/* ==========================================================================
   Tours Core - estilos de tarjetas, grillas y botones.
   Viven en el plugin para que los shortcodes funcionen con cualquier tema.
   Los colores se controlan desde las variables de abajo.
   ========================================================================== */

:root {
	--tc-primary: #3B2412;
	--tc-primary-dark: #241208;
	--tc-accent: #FCB424;
	--tc-accent-dark: #9C6D10;
	--tc-wa: #1faa55;
	--tc-ink: #1C1410;
	--tc-muted: #6B5B4D;

	/* Los mismos seis colores en componentes sueltos. Hacen falta porque
	   rgba() no acepta una variable que contenga un color entero: para un
	   velo o una sombra con transparencia hay que darle los números. */
	--tc-primary-rgb: 59, 36, 18;
	--tc-primary-dark-rgb: 36, 18, 8;
	--tc-accent-rgb: 252, 180, 36;
	--tc-accent-dark-rgb: 156, 109, 16;
	--tc-ink-rgb: 28, 20, 16;
	--tc-muted-rgb: 107, 91, 77;
	/* Grises de la familia de la marca. El tema hijo los recalcula desde el
	   tono del color de marca, así que con una paleta cálida salen cálidos.
	   Estos valores son el respaldo si el plugin trabaja con otro tema. */
	--tc-line: #E8E5E2;
	--tc-line-fuerte: #C6BEB9;
	--tc-surface: #ffffff;
	--tc-soft: #F8F6F4;
	--tc-soft-2: #F4F1F0;
	--tc-radius: 14px;
	--tc-shadow: 0 1px 2px rgba(var(--tc-ink-rgb), .06), 0 8px 24px rgba(var(--tc-ink-rgb), .07);
	--tc-shadow-hover: 0 2px 4px rgba(var(--tc-ink-rgb), .08), 0 16px 40px rgba(var(--tc-ink-rgb), .12);
}

/* ---------- Grilla ---------- */
.tc-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 600px) {
	.tc-grid--2,
	.tc-grid--3,
	.tc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.tc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.tc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Tarjeta ---------- */
.tc-card {
	display: flex;
	flex-direction: column;
	background: var(--tc-surface);
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	overflow: hidden;
	box-shadow: var(--tc-shadow);
	transition: transform .22s ease, box-shadow .22s ease;
}

.tc-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--tc-shadow-hover);
}

.tc-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tc-soft);
}

.tc-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}

.tc-card:hover .tc-card__img { transform: scale(1.04); }

.tc-card__img--empty {
	background: linear-gradient(135deg, var(--tc-soft), var(--tc-line, #e8eeec));
}

.tc-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--tc-accent);
	/* Texto oscuro, no blanco: el acento es un color CLARO y lleva texto
	   encima. En blanco daba 1,95:1 cuando el mínimo para leer es 4,5:1,
	   así que la etiqueta de cada tarjeta era casi invisible. Con el color
	   de marca oscuro da 7,89:1 en verde y 10,04:1 en marrón. */
	color: var(--tc-primary-dark, #15291F);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
}

.tc-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 18px;
}

.tc-card__meta {
	margin: 0;
	font-size: .8rem;
	color: var(--tc-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.tc-card__sep { margin: 0 6px; }

.tc-card__title {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.35;
	font-weight: 700;
}

.tc-card__title a {
	color: var(--tc-ink);
	text-decoration: none;
}

.tc-card__title a:hover { color: var(--tc-primary); }

.tc-card__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--tc-muted);
}

.tc-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--tc-line);
}

/* ---------- Precio ---------- */
.tc-price { font-size: .86rem; color: var(--tc-muted); }
.tc-price__label { font-size: .78rem; }
.tc-price__amount { font-size: 1.25rem; color: var(--tc-ink); }
.tc-price__unit { font-size: .74rem; }
/* El precio tachado iba en un gris propio con 2,47:1 sobre blanco, por
   debajo incluso del mínimo para texto grande. Usa el gris secundario, que
   es el que la pantalla de Marca comprueba. */
.tc-price__before { color: var(--tc-muted); margin-right: 2px; }
.tc-price--quote { font-weight: 600; color: var(--tc-primary); }

/* ---------- Botones ---------- */
.tc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--tc-primary);
	color: #fff !important;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1;
	padding: 13px 22px;
	border: 0;
	border-radius: 999px;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}

.tc-btn:hover { background: var(--tc-primary-dark); transform: translateY(-1px); }
.tc-btn--sm { padding: 10px 16px; font-size: .86rem; }
.tc-btn--wa { background: var(--tc-wa); }
.tc-btn--wa:hover { background: #17893f; }
.tc-btn--ghost {
	background: transparent;
	color: var(--tc-primary) !important;
	border: 1.5px solid var(--tc-primary);
}
.tc-btn--ghost:hover { background: var(--tc-primary); color: #fff !important; }
.tc-btn--block { width: 100%; }

/* ---------- Listas de incluye, no incluye y que llevar ---------- */
.tc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 11px;
}

.tc-list li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	line-height: 1.55;
}

.tc-list__ico {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin-top: .15em;
}

.tc-list__ico--check { color: var(--tc-primary); }
.tc-list__ico--equis { color: #b4463a; }
.tc-list__ico--punto { color: var(--tc-accent-dark); }

/* Lo mejor de este viaje: check en el bronce de la marca. */
.tc-list--hl .tc-list__ico--check { color: var(--tc-accent-dark); }

/* ---------- Testimonios ---------- */
.tc-quote {
	margin: 0;
	padding: 24px;
	background: var(--tc-surface);
	border: 1px solid var(--tc-line);
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
}

.tc-stars { color: var(--tc-accent); letter-spacing: 2px; margin-bottom: 10px; }

.tc-quote blockquote {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
	font-size: .96rem;
	line-height: 1.6;
	color: var(--tc-ink);
}

.tc-quote blockquote p:last-child { margin-bottom: 0; }

.tc-quote__by {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .88rem;
	color: var(--tc-ink);
}

.tc-quote__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.tc-quote__place,
.tc-quote__tour { color: var(--tc-muted); font-size: .82rem; }

/* ---------- Vacio ---------- */
.tc-empty {
	padding: 18px;
	background: var(--tc-soft);
	border: 1px dashed var(--tc-line);
	border-radius: var(--tc-radius);
	color: var(--tc-muted);
	text-align: center;
}

/* ==========================================================================
   Tarjeta simple: solo la foto y un botón con el enlace.
   ========================================================================== */
.tc-card--simple {
	border: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
}

.tc-card--simple:hover { transform: none; box-shadow: none; }

.tc-card--simple .tc-card__media {
	aspect-ratio: 3 / 4;
	border-radius: var(--tc-radius);
	box-shadow: var(--tc-shadow);
}

.tc-card--simple:hover .tc-card__media { box-shadow: var(--tc-shadow-hover); }

.tc-card__cta {
	display: flex;
	justify-content: center;
	margin-top: -24px;
	position: relative;
	z-index: 1;
}

.tc-card__cta .tc-btn {
	box-shadow: 0 6px 18px rgba(var(--tc-ink-rgb), .22);
	text-align: center;
}

/* ==========================================================================
   Carrusel
   ========================================================================== */
.tc-slider {
	position: relative;
	--tc-vis: 3;
}

.tc-slider__viewport { overflow: hidden; }

.tc-slider__track {
	display: flex;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;

	/* El navegador se queda con el desplazamiento vertical; el horizontal lo
	   maneja el script para poder cambiar de tarjeta con el dedo. */
	touch-action: pan-y;
	cursor: grab;
}

.tc-slider.is-arrastrando .tc-slider__track {
	cursor: grabbing;
	user-select: none;
}

/* Mientras se arrastra, las imágenes no deben "despegarse" como enlaces. */
.tc-slider__track img,
.tc-slider__track a {
	-webkit-user-drag: none;
	user-select: none;
}

.tc-slider__slide {
	flex: 0 0 100%;
	min-width: 0;
	padding-inline: 12px;
	box-sizing: border-box;
}

@media (min-width: 640px) {
	.tc-slider__slide { flex-basis: 50%; }
}

@media (min-width: 1000px) {
	.tc-slider__slide { flex-basis: calc(100% / var(--tc-vis)); }
}

/* Compensa el acolchado de los extremos para alinear con el resto. */
.tc-slider__viewport { margin-inline: -12px; }

/* ---------- Flechas ----------
   Estilos completos y con especificidad propia: así ninguna regla de otro
   plugin puede dejarlas sin fondo, como pasaba antes. */
.tc-slider .tc-slider__nav {
	position: absolute;
	top: 36%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	margin: 0;
	padding: 0;
	background-color: var(--tc-accent);
	background-image: none;
	border: 2px solid var(--tc-primary);
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(var(--tc-ink-rgb), .18);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .18s ease, transform .18s ease;
}

.tc-slider .tc-slider__nav svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--tc-primary);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tc-slider .tc-slider__nav:hover,
.tc-slider .tc-slider__nav:focus {
	background-color: var(--tc-primary);
	transform: scale(1.06);
}

.tc-slider .tc-slider__nav:hover svg,
.tc-slider .tc-slider__nav:focus svg { stroke: var(--tc-accent); }

.tc-slider .tc-slider__nav:focus-visible {
	outline: 2px solid var(--tc-ink);
	outline-offset: 3px;
}

.tc-slider .tc-slider__nav--prev { left: -10px; }
.tc-slider .tc-slider__nav--next { right: -10px; }

@media (max-width: 760px) {
	.tc-slider .tc-slider__nav { display: none; }
}

/* ---------- Puntos ---------- */
.tc-slider__puntos {
	display: flex;
	justify-content: center;
	gap: 9px;
	margin-top: 24px;
}

.tc-slider .tc-slider__punto {
	width: 11px;
	height: 11px;
	margin: 0;
	padding: 0;
	background-color: var(--tc-accent);
	background-image: none;
	border: 1px solid var(--tc-primary);
	border-radius: 999px;
	box-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .18s ease, width .18s ease;
}

.tc-slider .tc-slider__punto.is-activo {
	width: 30px;
	background-color: var(--tc-primary);
}

.tc-slider .tc-slider__punto:focus-visible {
	outline: 2px solid var(--tc-ink);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.tc-slider__track { transition: none; }
}

/* ==========================================================================
   Libro de reclamaciones
   ========================================================================== */

.lr {
	max-width: 760px;
	margin-inline: auto;
}

.lr__cabecera {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	justify-content: space-between;
	align-items: flex-start;
	padding: 18px 20px;
	margin-bottom: 24px;
	border: 1px solid var(--tc-line, #e2e8e6);
	border-left: 4px solid var(--tc-primary, #1F3F31);
	border-radius: 8px;
	background: var(--tc-soft, #f7faf9);
}

.lr__empresa { margin: 0; line-height: 1.6; font-size: .94rem; }
.lr__fecha { margin: 0; font-size: .94rem; color: var(--tc-muted, #5f6f6c); }

.lr__bloque {
	margin: 0 0 26px;
	padding: 22px 22px 8px;
	border: 1px solid var(--tc-line, #e2e8e6);
	border-radius: 10px;
}

.lr__bloque legend {
	padding-inline: 10px;
	font-weight: 700;
	font-size: 1.02rem;
	color: var(--tc-primary, #1F3F31);
}

.lr__ayuda {
	margin: 0 0 18px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--tc-soft-2, #f2f6f5);
	font-size: .9rem;
	line-height: 1.6;
	color: var(--tc-muted, #5f6f6c);
}

.lr__campo { margin-bottom: 16px; }

.lr__campo > label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .92rem;
}

.lr__req { color: #9B2C2C; }

.lr__campo input[type="text"],
.lr__campo input[type="email"],
.lr__campo select,
.lr__campo textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--tc-line, #d9e2e0);
	border-radius: 8px;
	background: #fff;
	font: inherit;
	font-size: .95rem;
	color: var(--tc-ink, #15211f);
	box-sizing: border-box;
}

.lr__campo textarea { resize: vertical; min-height: 110px; }

.lr__campo input:focus,
.lr__campo select:focus,
.lr__campo textarea:focus {
	outline: 2px solid var(--tc-accent, #D7B48C);
	outline-offset: 1px;
	border-color: var(--tc-primary, #1F3F31);
}

.lr__radios { display: flex; flex-wrap: wrap; gap: 10px 22px; }

.lr__radio,
.lr__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: .94rem;
	cursor: pointer;
}

.lr__campo--checkbox > .lr__check { margin-top: 4px; }

.lr__acepta {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 0 0 18px;
	font-size: .92rem;
	line-height: 1.6;
}

.lr__acepta input { margin-top: 3px; flex: 0 0 auto; }

.lr__nota {
	margin: 0 0 22px;
	padding: 14px 16px;
	border-radius: 8px;
	background: #fdf6ec;
	border: 1px solid #e8d5b5;
	font-size: .9rem;
	line-height: 1.6;
}

.lr__errores {
	margin-bottom: 22px;
	padding: 16px 18px;
	border-radius: 8px;
	border: 1px solid #e3b3b3;
	background: #fcf0f0;
	font-size: .93rem;
}

.lr__errores p { margin: 0 0 8px; }
.lr__errores ul { margin: 0 0 0 18px; line-height: 1.7; }

/* Botón con todos sus colores propios: así ninguna regla de otro plugin
   puede dejarlo blanco sobre blanco. */
.lr__enviar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border: 2px solid var(--tc-primary, #1F3F31);
	border-radius: 999px;
	background-color: var(--tc-primary, #1F3F31);
	color: #fff;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: background-color .18s ease, color .18s ease;
}

.lr__enviar:hover,
.lr__enviar:focus {
	background-color: var(--tc-accent, #D7B48C);
	border-color: var(--tc-primary, #1F3F31);
	color: var(--tc-primary-dark, #15291F);
}

/* El campo trampa no debe verse ni ser alcanzable con el tabulador. */
.lr__trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.lr--exito {
	padding: 30px 28px;
	border: 1px solid #bcd9c6;
	border-left: 4px solid var(--tc-primary, #1F3F31);
	border-radius: 10px;
	background: #f2f8f4;
}

.lr__titulo { margin: 0 0 10px; font-size: 1.4rem; }
.lr__numero { margin: 0 0 14px; font-size: 1.1rem; }

/* Aviso de dato sin completar, en las páginas legales. */
mark.tc-falta {
	padding: 1px 7px;
	border-radius: 4px;
	background: #fff2c9;
	color: #7a5a00;
	font-size: .92em;
}

@media (max-width: 600px) {
	.lr__bloque { padding: 18px 16px 6px; }
	.lr__cabecera { flex-direction: column; }
	.lr__enviar { width: 100%; }
}

/* ==========================================================================
   Bloque de contacto  [contacto]
   ========================================================================== */

.ct { margin-block: 8px 0; }

.ct-canales {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
	margin-bottom: 26px;
}

@media (min-width: 620px) {
	.ct-canales { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ct-card {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 20px;
	border: 1px solid var(--tc-line, #e2e8e6);
	border-radius: 14px;
	background: #fff;
	color: var(--tc-ink, #15211f);
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ct-card:hover,
.ct-card:focus {
	transform: translateY(-3px);
	border-color: var(--tc-primary, #1F3F31);
	box-shadow: 0 14px 28px rgba(var(--tc-ink-rgb), .12);
	text-decoration: none;
}

.ct-card__ico {
	width: 30px;
	height: 30px;
	margin-bottom: 8px;
	color: var(--tc-primary, #1F3F31);
}

.ct-card--wa .ct-card__ico { color: #1f9c4b; }

.ct-card__que {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--tc-muted, #5f6f6c);
}

.ct-card__dato {
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.ct-card__accion {
	margin-top: 8px;
	color: var(--tc-accent-dark, #9A6D3F);
	font-size: .9rem;
	font-weight: 600;
}

.ct-card:hover .ct-card__accion { color: var(--tc-primary, #1F3F31); }

/* ---------- Dirección y horario ---------- */

.ct-datos {
	display: grid;
	gap: 14px;
	grid-template-columns: 1fr;
	padding: 20px 22px;
	margin-bottom: 26px;
	border-radius: 14px;
	background: var(--tc-soft, #f3f7f6);
}

@media (min-width: 620px) {
	.ct-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}

.ct-dato {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.ct-dato .ct-card__ico {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
}

.ct-dato__que {
	margin: 0 0 2px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--tc-muted, #5f6f6c);
}

.ct-dato__valor {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
}

/* ---------- Mapa ---------- */

.tc-mapa {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--tc-line, #e2e8e6);
	background: var(--tc-soft-2, #eef2f1);
}

.tc-mapa iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

@media (max-width: 620px) {
	.tc-mapa { aspect-ratio: 4 / 3; }
}
