/* Ficha 2027 — negocios y restaurantes, sin Elementor.
   Creado 2026-09-18 · v3.9.0 (los listados: cabecera, rejilla y paginas)
   v3.18.0 (2026-09-27) — Opcion B1 de Angel: la foto apaisada de arriba (playas) a 2:1 en
   el movil y la tableta. Ver el final.
   Regla de la casa: cada cambio de CSS = nombre de archivo nuevo (WP Rocket
   borra el ?ver=).

   Esta hoja dibuja el ESCRITORIO. El movil tendra su propia version; mientras
   tanto, al final hay un apaño minimo para que no se rompa.

   Los colores y medidas salen de wti-base-2027 (el sistema de diseno). Aqui
   solo se declara lo propio de la ficha. */

.wti-ficha {
	--f-verde: #0E7A4F;
	--f-verde-suave: #EAF7F0;
	--f-lectura: "Newsreader", Georgia, serif;

	background: var(--wti-crema-fondo, #FBF7F2);
	color: var(--wti-tinta, #1B1512);
}

.wti-ficha * {
	box-sizing: border-box;
}

.wti-ficha img {
	display: block;
	max-width: 100%;
}

.wti-ficha h1,
.wti-ficha h2,
.wti-ficha h3 {
	margin: 0;
	font-weight: 400;
}

.wti-ficha-dentro {
	max-width: var(--wti-ancho, 1280px);
	margin: 0 auto;
	padding: 0 36px;
}

.wti-ficha-rotulo {
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 10px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wti-gris-claro, #A79C93);
}

/* ---------- la foto apaisada de las playas ----------
   Las 56 la tienen cargada. Una playa no tiene logo que enseñar, asi que su
   cabecera es la foto, a todo ancho y sin nada escrito encima. */

.wti-ficha-apaisada {
	background: var(--wti-foto-fondo, #F3EFEA);
}

.wti-ficha-apaisada img {
	width: 100%;
	height: min(46vh, 460px);
	min-height: 260px;
	object-fit: cover;
}

/* ---------- cabecera ---------- */

.wti-ficha-cabecera {
	background: #fff;
	border-bottom: 1px solid var(--wti-linea, #E8E2DA);
}

.wti-ficha-cabecera .wti-ficha-dentro {
	display: flex;
	gap: 40px;
	align-items: center;
	padding-top: 30px;
	padding-bottom: 30px;
}

.wti-ficha-marca {
	flex: 0 0 auto;
	width: 286px;
	height: 143px;              /* 2:1, como la foto destacada */
	border: 1px solid var(--wti-linea, #E8E2DA);
	border-radius: var(--wti-radio, 14px);
	overflow: hidden;
	background: #fff;
}

.wti-ficha-marca img {
	width: 100%;
	height: 100%;
	object-fit: cover;          /* el logo llena la tarjeta */
}

.wti-ficha-titular {
	flex: 1 1 auto;
	min-width: 0;
}

.wti-ficha-titular h1 {
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--f-titulo, var(--wti-naranja, #F57C00));
}

.wti-ficha-lema {
	margin: 12px 0 0;
	max-width: 900px;
	font-family: var(--f-lectura);
	font-size: 18px;
	line-height: 1.5;
	color: #33291F;
}

.wti-ficha-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 22px;
	margin-top: 18px;
}

.wti-ficha-dato {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 22px 5px 0;
	border-right: 1px solid var(--wti-linea, #E8E2DA);
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 12.5px;
	letter-spacing: .06em;
	color: var(--wti-gris, #8A817B);
}

.wti-ficha-dato:last-child {
	border-right: 0;
	padding-right: 0;
}

.wti-ficha-dato svg {
	flex: 0 0 auto;
	color: var(--wti-marron, #7A5238);
	opacity: .7;
}

/* ---------- el sello de "abierto todo el año" ----------
   Va dentro de la caja de horarios, que es donde toca. En los colores calidos
   de la casa: crema, marron y naranja. Sale en las fichas que lo tienen
   marcado: 62% de los negocios y 41% de los restaurantes. */

.wti-ficha-sello {
	position: relative;
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 20px;
	padding: 16px 20px;
	border-radius: var(--wti-radio, 14px);
	background: linear-gradient(140deg, #FDF1E1 0%, #F4DDC2 100%);
	border: 1px solid rgba(122, 82, 56, .20);
	box-shadow: 0 8px 24px rgba(122, 82, 56, .12);
	overflow: hidden;
}

/* Un destello suave, para que no sea un rectangulo plano. */
.wti-ficha-sello::before {
	content: "";
	position: absolute;
	top: -70%;
	right: -12%;
	width: 52%;
	height: 240%;
	background: radial-gradient(closest-side, rgba(245, 124, 0, .22), transparent);
	pointer-events: none;
}

.wti-ficha-sello-icono {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid rgba(245, 124, 0, .35);
	box-shadow: 0 3px 10px rgba(122, 82, 56, .12);
	color: var(--wti-naranja, #F57C00);
}

.wti-ficha-sello-texto {
	position: relative;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 13px;
	line-height: 1.45;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wti-naranja-fuerte, #E06E00);
	white-space: nowrap;
}

.wti-ficha-sello-texto em {
	display: block;
	font-style: normal;
	font-size: 19px;
	letter-spacing: .16em;
	color: var(--wti-marron, #7A5238);
}

/* ---------- tira de galeria ---------- */

.wti-ficha-tira {
	background: #fff;           /* blanco: el crema es solo de la barra de contacto (v3.12.3) */
	border-bottom: 1px solid var(--wti-linea, #E8E2DA);
	padding: 22px 0;
}

.wti-ficha-tira .wti-ficha-dentro {
	display: grid;
	grid-template-columns: 2fr repeat(6, 1fr);
	gap: 10px;
	height: 190px;
}

.wti-ficha-foto {
	overflow: hidden;
	border-radius: var(--wti-radio-chico, 10px);
	background: var(--wti-foto-fondo, #F3EFEA);
}

.wti-ficha-foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.wti-ficha-foto:hover img {
	transform: scale(1.05);
}

.wti-ficha-foto-mas {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px;
	border: 1px dashed #D5CCC1;
	text-align: center;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wti-gris, #8A817B);
	text-decoration: none;
}

/* ---------- barra de contacto ---------- */

/* En crema, para que la barra de acciones se distinga del resto (Angel,
   2026-09-24). Los botones normales van en blanco con texto marrón; el fuerte
   (Reservar) sigue en naranja. */
.wti-ficha-barra {
	background: var(--wti-crema, #F2E6D8);
	border-bottom: 1px solid var(--wti-crema-hover, #EADBC7);
	padding: 18px 0;
}

.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte) {
	border-color: #E0CDB6;
	color: var(--wti-marron, #7A5238);
}

.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):hover,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):focus-visible {
	border-color: var(--wti-naranja, #F57C00);
	background: var(--wti-naranja, #F57C00);
	color: #fff;
}

.wti-ficha-barra .wti-ficha-dentro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

/* ---------- botones, redes y pastillas ---------- */

.wti-ficha-botonera {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.wti-ficha-boton {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wti-naranja, #F57C00);
	border-radius: 999px;
	background: #fff;
	color: var(--wti-naranja, #F57C00);
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background .18s, color .18s, border-color .18s;
}

.wti-ficha-boton:hover,
.wti-ficha-boton:focus-visible {
	background: var(--wti-naranja, #F57C00);
	color: #fff;
}

.wti-ficha-boton-fuerte {
	background: var(--wti-naranja, #F57C00);
	color: #fff;
}

.wti-ficha-boton-fuerte:hover,
.wti-ficha-boton-fuerte:focus-visible {
	background: var(--wti-naranja-fuerte, #E06E00);
	border-color: var(--wti-naranja-fuerte, #E06E00);
}

.wti-ficha-redes {
	display: flex;
	gap: 8px;
}

.wti-ficha-red {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wti-naranja, #F57C00);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .18s;
}

.wti-ficha-red:hover,
.wti-ficha-red:focus-visible {
	background: var(--wti-naranja-fuerte, #E06E00);
}

/* El telefono no se enseña: sale al pulsar, y ese clic es el que se mide. */
.wti-ficha-telefonos {
	display: flex;
	gap: 18px;
	padding-top: 14px;
}

.wti-ficha-telefonos[hidden] {
	display: none;
}

.wti-ficha-telefonos a {
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 19px;
	letter-spacing: .04em;
	color: var(--wti-naranja, #F57C00);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
}

.wti-ficha-pastillas {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.wti-ficha-pastillas span {
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--f-verde-suave);
	color: var(--f-verde);
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 12px;
	letter-spacing: .04em;
}

.wti-ficha-pastillas-naranja span {
	background: #FDF0E0;
	color: var(--wti-naranja-fuerte, #E06E00);
}

/* ---------- cuerpo a dos columnas ---------- */

.wti-ficha-cuerpo {
	max-width: var(--wti-ancho, 1280px);
	margin: 0 auto;
	padding: 40px 36px 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	gap: 34px;
	align-items: start;
}

.wti-ficha-caja {
	background: var(--f-caja, #fff);
	border: 1px solid var(--wti-linea, #E8E2DA);
	border-radius: 16px;
	padding: 28px 30px;
	margin-bottom: 24px;
}

.wti-ficha-caja h2 {
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 21px;
	letter-spacing: .015em;
	color: var(--wti-tinta, #1B1512);
	padding-bottom: 14px;
	margin-bottom: 20px;
	border-bottom: 2px dotted rgba(245, 124, 0, .45);
}

.wti-ficha-principal {
	padding: 34px 40px 40px;
}

.wti-ficha-texto {
	font-family: var(--f-lectura);
	font-size: 16px;
	line-height: 1.7;
	color: #33291F;
}

.wti-ficha-texto p {
	margin: 0 0 20px;
}

.wti-ficha-texto p:last-child {
	margin-bottom: 0;
}

.wti-ficha-texto strong {
	font-weight: 600;
	color: var(--wti-tinta, #1B1512);
}

.wti-ficha-texto a {
	color: var(--wti-marron, #7A5238);
	border-bottom: 1px solid rgba(122, 82, 56, .3);
	text-decoration: none;
}

.wti-ficha-texto a:hover {
	color: var(--wti-naranja, #F57C00);
	border-color: var(--wti-naranja, #F57C00);
}

/* Una negrita dentro de un enlace es un enlace: no puede robarle el color.
   Pasa en casi todas las fichas, que escriben <a><strong>texto</strong></a>. */
.wti-ficha-texto a strong,
.wti-ficha-texto a b,
.wti-ficha-texto a em {
	color: inherit;
}

/* Lo que el editor de WordPress deja escrito en el texto y hay que respetar. */
.wti-ficha-texto h2,
.wti-ficha-texto h3,
.wti-ficha-texto h4 {
	margin: 28px 0 10px;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--wti-tinta, #1B1512);
}

.wti-ficha-texto h2 { font-size: 21px; }
.wti-ficha-texto h3 { font-size: 17px; }
.wti-ficha-texto h4 { font-size: 15px; }

.wti-ficha-texto ul,
.wti-ficha-texto ol {
	margin: 0 0 20px;
	padding-left: 22px;
}

.wti-ficha-texto li {
	margin-bottom: 8px;
	line-height: 1.6;
}

.wti-ficha-texto blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--wti-naranja, #F57C00);
	font-style: italic;
	color: var(--wti-marron, #7A5238);
}

.wti-ficha-texto em {
	font-style: italic;
}

.wti-ficha-texto hr {
	margin: 28px 0;
	border: 0;
	border-top: 1px solid var(--wti-linea, #E8E2DA);
}

.wti-ficha-texto img {
	height: auto;
	border-radius: var(--wti-radio-chico, 10px);
}

.wti-ficha-consejo {
	margin-top: 30px;
	padding: 22px 26px;
	border-left: 3px solid var(--wti-naranja, #F57C00);
	border-radius: 0 12px 12px 0;
	background: var(--wti-crema, #F2E6D8);
}

.wti-ficha-consejo .wti-ficha-rotulo {
	color: var(--wti-marron, #7A5238);
}

.wti-ficha-consejo p {
	margin: 10px 0 0;
	font-family: var(--f-lectura);
	font-size: 16.5px;
	line-height: 1.6;
	font-style: italic;
	color: #33291F;
}

/* ---------- el visor ---------- */

.wti-ficha-visor {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 72px;
	background: rgba(15, 11, 9, .93);
}

.wti-ficha-visor[hidden] {
	display: none;
}

.wti-ficha-visor-dentro {
	position: relative;
	width: 100%;
	max-width: 1180px;
	max-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wti-ficha-visor-dentro img {
	max-width: 100%;
	max-height: 82vh;
	width: auto;
	border-radius: 8px;
}

.wti-ficha-visor-dentro .wti-ficha-video {
	width: 100%;
	border-radius: 8px;
}

.wti-ficha-visor-cerrar,
.wti-ficha-visor-antes,
.wti-ficha-visor-luego {
	position: absolute;
	border: 0;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
	border-radius: 50%;
	transition: background .18s;
	line-height: 1;
}

.wti-ficha-visor-cerrar:hover,
.wti-ficha-visor-antes:hover,
.wti-ficha-visor-luego:hover {
	background: var(--wti-naranja, #F57C00);
}

.wti-ficha-visor-cerrar {
	top: 18px;
	right: 22px;
	width: 46px;
	height: 46px;
	font-size: 30px;
}

.wti-ficha-visor-antes,
.wti-ficha-visor-luego {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	font-size: 34px;
}

.wti-ficha-visor-antes { left: 16px; }
.wti-ficha-visor-luego { right: 16px; }

.wti-ficha-visor-pie {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 20px;
	text-align: center;
	color: rgba(255, 255, 255, .7);
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* En el visor, la panoramica ocupa todo el ancho y se arrastra. */
.wti-ficha-visor .wti-ficha-panorama {
	width: 100%;
}

.wti-ficha-visor .wti-ficha-panorama-carril {
	height: 72vh;
}

/* ---------- video y vista 360 ----------
   Van en su propia fila debajo del texto, uno al lado del otro, como los tiene
   Angel hoy. Son miniaturas: al pulsarlas se abren en el visor. */

.wti-ficha-medios {
	display: grid;
	gap: 18px;
}

.wti-ficha-medios-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wti-ficha-medios-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wti-ficha-medio {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wti-foto-fondo, #F3EFEA);
}

.wti-ficha-medio img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.wti-ficha-medio:hover img {
	transform: scale(1.04);
}

.wti-ficha-medio-velo {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(27, 21, 18, .08) 45%, rgba(27, 21, 18, .58) 100%);
}

.wti-ficha-medio-etiqueta {
	position: absolute;
	left: 14px;
	bottom: 14px;
	width: auto;
	height: auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 15px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .94);
	color: var(--wti-tinta, #1B1512);
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 11px;
	line-height: 1;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: background .18s, color .18s;
}

.wti-ficha-medio:hover .wti-ficha-medio-etiqueta {
	background: var(--wti-naranja, #F57C00);
	color: #fff;
}

/* ---------- la galeria en miniaturas (playas) ----------
   Va dentro de la misma caja que el video y la vista 360. Las playas no tienen
   tira de fotos arriba: ahi van los banners. */

.wti-ficha-miniaturas {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}

.wti-ficha-medios + .wti-ficha-miniaturas {
	margin-top: 14px;
}

.wti-ficha-miniatura {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wti-radio-chico, 10px);
	background: var(--wti-foto-fondo, #F3EFEA);
}

.wti-ficha-miniatura img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.wti-ficha-miniatura:hover img {
	transform: scale(1.06);
}

.wti-ficha-miniatura-mas {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	border: 1px dashed #D5CCC1;
	text-align: center;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wti-gris, #8A817B);
	text-decoration: none;
}

.wti-ficha-miniatura-mas:hover {
	border-color: var(--wti-naranja, #F57C00);
	color: var(--wti-naranja, #F57C00);
}

/* ---------- video ---------- */

.wti-ficha-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
}

.wti-ficha-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------- vista 360 ----------
   La foto panoramica se enseña en una caja por la que se arrastra de lado a
   lado. Sin libreria: la foto es mas ancha que la caja y lo que se mueve es el
   desplazamiento horizontal. */

.wti-ficha-panorama {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wti-foto-fondo, #F3EFEA);
}

.wti-ficha-panorama-carril {
	height: 380px;
	overflow-x: auto;
	overflow-y: hidden;
	cursor: grab;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.wti-ficha-panorama-carril::-webkit-scrollbar {
	display: none;
}

.wti-ficha-panorama-carril.wti-agarrando {
	cursor: grabbing;
}

.wti-ficha-panorama-carril img {
	height: 100%;
	width: auto;
	max-width: none;
	user-select: none;
	-webkit-user-drag: none;
}

.wti-ficha-panorama-pista {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(27, 21, 18, .72);
	color: #fff;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	pointer-events: none;
	transition: opacity .3s;
}

.wti-ficha-panorama.wti-tocado .wti-ficha-panorama-pista {
	opacity: 0;
}

/* ---------- el recorte del texto ----------
   El texto no puede pasar de la altura de las cajas de al lado: lo que sobra se
   esconde detras de un "Leer mas". La altura la calcula el JavaScript, porque
   depende de cuantas cajas tenga la ficha. */

.wti-ficha-recorte {
	position: relative;
	overflow: hidden;
}

.wti-ficha-desvanece {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 120px;
	background: linear-gradient(rgba(255, 255, 255, 0), #fff 88%);
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s;
}

.wti-ficha-recorte.wti-recortado .wti-ficha-desvanece {
	opacity: 1;
}

.wti-ficha-mas {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.wti-ficha-mas[hidden] {
	display: none;
}

/* ---------- rango de precio ---------- */

.wti-ficha-precio {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid rgba(122, 82, 56, .28);
	background: var(--wti-crema, #F2E6D8);
	color: var(--wti-marron, #7A5238);
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 12.5px;
	letter-spacing: .08em;
	font-variant-numeric: tabular-nums;
}

.wti-ficha-precio svg {
	opacity: .75;
}

/* ---------- los servicios que Angel escribe a mano ----------
   Cada uno trae titulo, explicacion y su boton. */

.wti-ficha-servicio {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid var(--wti-linea, #E8E2DA);
}

.wti-ficha-servicio h3 {
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 16px;
	line-height: 1.3;
	letter-spacing: .01em;
	color: var(--wti-tinta, #1B1512);
}

.wti-ficha-servicio p {
	margin: 8px 0 0;
	font-family: var(--f-lectura);
	font-size: 15px;
	line-height: 1.55;
	color: var(--wti-gris, #8A817B);
}

.wti-ficha-servicio .wti-ficha-boton {
	margin-top: 14px;
}

/* ---------- los botones de la columna de al lado ----------
   En 400 px de ancho los botones se partian de cualquier manera y quedaban
   desiguales. Aqui van uno por linea, todos del mismo ancho, y las redes
   separadas por un filete. */

.wti-ficha-cuerpo aside .wti-ficha-botonera {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.wti-ficha-cuerpo aside .wti-ficha-boton {
	width: 100%;
	justify-content: center;
}

.wti-ficha-cuerpo aside .wti-ficha-redes {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--wti-linea, #E8E2DA);
	justify-content: center;
}

/* Dos por fila cuando son cortos y caben bien. */
.wti-ficha-cuerpo aside .wti-ficha-botonera.wti-ficha-botonera-par {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---------- horarios ---------- */

.wti-ficha-fila {
	display: flex;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid var(--wti-linea, #E8E2DA);
}

.wti-ficha-fila:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.wti-ficha-et {
	flex: 0 0 106px;
	padding-top: 4px;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 10.5px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wti-gris, #8A817B);
}

.wti-ficha-vl {
	flex: 1 1 auto;
	font-family: var(--f-lectura);
	font-size: 15.5px;
	line-height: 1.5;
	color: #33291F;
	overflow-wrap: anywhere;
}

/* ---------- como llegar ---------- */

.wti-ficha-dir {
	display: flex;
	gap: 10px;
	margin: 0;
	font-family: var(--f-lectura);
	font-size: 15.5px;
	line-height: 1.5;
	color: #33291F;
	overflow-wrap: anywhere;
}

.wti-ficha-dir svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--wti-marron, #7A5238);
	opacity: .7;
}

.wti-ficha-como {
	margin: 14px 0 0;
	font-family: var(--f-lectura);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wti-gris, #8A817B);
	overflow-wrap: anywhere;
}

/* El mapa dibujado de «Como llegar». Es un recuadro incrustado de Google, que
   es gratis sin limite; el mapa de JavaScript cobra por carga y las fichas
   tienen mucha mas visita que los listados. Anadido 2026-09-22 (v3.6.0). */
.wti-ficha-caja iframe {
	display: block;
	width: 100%;
	margin: 18px 0;
	border: 1px solid var(--wti-linea, #E8E2DA);
	border-radius: 12px;
}

.wti-ficha-mapa {
	margin: 18px 0 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wti-foto-fondo, #F3EFEA);
}

.wti-ficha-mapa iframe {
	margin: 0;
	height: 260px;
	border: 0;
	border-radius: 0;
}

@media (max-width: 900px) {
	.wti-ficha-mapa iframe {
		height: 220px;
	}
}

/* ---------- las cajas anchas de las salas ----------
   Las recomendaciones van a dos columnas, como en la web de hoy, y sobre crema
   para separarlas del resto. La programacion de residencias, en caja normal. */

.wti-ficha-recomendaciones {
	background: linear-gradient(140deg, #FDF4EA 0%, #FBEEDF 100%);
	border-color: rgba(122, 82, 56, .18);
}

.wti-ficha-dos-columnas {
	columns: 2;
	column-gap: 54px;
}

.wti-ficha-dos-columnas > *:first-child {
	margin-top: 0;
}

.wti-ficha-dos-columnas h3 {
	break-after: avoid;
	margin: 26px 0 10px;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: .01em;
	color: var(--wti-tinta, #1B1512);
}

.wti-ficha-dos-columnas h3:first-child {
	margin-top: 0;
}

/* Las listas de las residencias, con su aire */
.wti-ficha-ancho .wti-ficha-texto ul {
	margin: 14px 0 0;
	padding-left: 22px;
}

.wti-ficha-ancho .wti-ficha-texto li {
	margin-bottom: 8px;
	line-height: 1.6;
}

/* La cabecera de noticia sin foto: el titular a todo ancho. Es lo normal, 2.559
   de las 2.982; la foto solo acompaña al titular en las noticias atadas a una
   sala. */
.wti-ficha-cabecera-sola .wti-ficha-titular {
	max-width: 100%;
}

.wti-ficha-cabecera-sola .wti-ficha-lema {
	max-width: 1000px;
}

/* ---------- lo propio de las noticias ----------
   La imagen vertical (la tienen 2.522 de 2.982) va flotando a la derecha del
   texto, como en la web de hoy. Y la caja de la fiesta lleva su foto. */

.wti-noticia-vertical {
	float: right;
	width: 50%;
	max-width: 430px;
	margin: 4px 0 24px 32px;
}

.wti-noticia-vertical img {
	width: 100%;
	height: auto;
	border-radius: var(--wti-radio, 14px);
}

.wti-noticia .wti-ficha-recorte::after {
	content: "";
	display: block;
	clear: both;
}

.wti-noticia-extra {
	width: 100%;
	height: auto;
	margin: 0 0 18px;
	border-radius: var(--wti-radio, 14px);
}

.wti-noticia-evento-foto {
	display: block;
	margin-bottom: 16px;
	border-radius: var(--wti-radio-chico, 10px);
	overflow: hidden;
	background: var(--wti-foto-fondo, #F3EFEA);
}

/* El logo del evento y el del sitio van enteros sobre blanco, no recortados:
   casi siempre son logos, no fotos. */
.wti-noticia-evento-foto img,
.wti-noticia-logo img {
	width: 100%;
	height: 150px;
	object-fit: contain;
	padding: 12px;
	background: #fff;
	transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}

.wti-noticia-logo {
	display: block;
	margin-bottom: 16px;
	border: 1px solid var(--wti-linea, #E8E2DA);
	border-radius: var(--wti-radio-chico, 10px);
	overflow: hidden;
	background: #fff;
}

.wti-noticia-logo:hover img,
.wti-noticia-evento-foto:hover img {
	transform: scale(1.04);
}

.wti-noticia-evento-nombre {
	margin: 0 0 18px;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--wti-tinta, #1B1512);
}

.wti-noticia-evento-nombre a:hover {
	color: var(--wti-naranja, #F57C00);
}

.wti-noticia .wti-ficha-botonera {
	margin-top: 18px;
}

/* El calendario de fechas de la fiesta lo pinta el atajo de wti-core; aqui
   solo se le da el aire y el marco de las demas cajas. */
.wti-noticia-calendario {
	padding-top: 44px;
}

/* ---------- bloques de abajo ---------- */

.wti-ficha-ancho {
	max-width: var(--wti-ancho, 1280px);
	margin: 0 auto;
	padding: 44px 36px 0;
}

/* La última sección no es el último hijo (detrás va el visor de fotos, oculto):
 * :last-of-type sí la encuentra y deja aire antes del pie (v3.12.4). */
.wti-ficha-ancho:last-of-type {
	padding-bottom: 64px;
}

.wti-ficha .wti-ficha-titulo-ancho {
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 21px;
	letter-spacing: .015em;
	padding-bottom: 14px;
	margin: 0 0 24px;
	border-bottom: 2px dotted rgba(245, 124, 0, .45);
}

.wti-ficha-rejilla {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}

.wti-ficha-tarjeta {
	background: #fff;
	border: 1px solid var(--wti-linea, #E8E2DA);
	border-radius: var(--wti-radio, 14px);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .2s, transform .2s;
}

.wti-ficha-tarjeta:hover {
	border-color: var(--wti-naranja, #F57C00);
	transform: translateY(-3px);
}

.wti-ficha-tarjeta img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	background: var(--wti-foto-fondo, #F3EFEA);
}

.wti-ficha-txt {
	display: block;
	padding: 18px 20px 22px;
}

.wti-ficha-tarjeta h3 {
	margin-top: 8px;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 16.5px;
	line-height: 1.3;
}

/* ---------- apaño de movil ----------
   Provisional: el movil tendra su propia vista. Esto solo evita que la ficha
   se salga de la pantalla mientras tanto. */

@media (max-width: 1023px) {

	.wti-ficha-dentro,
	.wti-ficha-cuerpo,
	.wti-ficha-ancho {
		padding-left: 18px;
		padding-right: 18px;
	}

	.wti-ficha-cabecera .wti-ficha-dentro {
		flex-direction: column;
		align-items: flex-start;
		gap: 22px;
	}

	.wti-ficha-marca {
		width: 240px;
		height: 120px;
	}

	.wti-ficha-titular h1 {
		font-size: 28px;
	}



	.wti-ficha-tira .wti-ficha-dentro {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		height: auto;
		grid-auto-rows: 120px;
	}

	.wti-ficha-cuerpo {
		grid-template-columns: 1fr;
	}

	.wti-ficha-principal {
		padding: 26px 22px 30px;
	}

	.wti-ficha-rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wti-ficha-dos-columnas {
		columns: 1;
	}

	.wti-ficha-panorama-carril {
		height: 260px;
	}

	.wti-ficha-medios-2,
	.wti-ficha-medios-3 {
		grid-template-columns: 1fr;
	}

	.wti-ficha-miniaturas {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wti-noticia-vertical {
		float: none;
		width: 100%;
		max-width: none;
		margin: 0 0 20px;
	}

	.wti-ficha-visor {
		padding: 56px 14px;
	}

	.wti-ficha-visor-antes,
	.wti-ficha-visor-luego {
		width: 42px;
		height: 42px;
		font-size: 26px;
	}
}

/* ---------- los listados ----------
   La rejilla y la tarjeta son las de wti-especiales-2027, que es la del
   buscador. Aqui solo va la cabecera del listado y los ajustes propios. */

.wti-archivo {
	background: var(--wti-crema-fondo, #FBF7F2);
	color: var(--wti-tinta, #1B1512);
	padding-bottom: 60px;
}

/* Sin recuadros blancos: la crema de la pagina corre de arriba abajo.
   La hoja del buscador le pone fondo blanco a `.s27` y la cabecera lo tenia
   tambien; aqui se quitan los dos (Angel, 22-09-2026: «ese fondo blanco fuera
   tambien»). Solo dentro del listado: el buscador se queda como esta. */
.wti-archivo .s27 {
	background: transparent;
}

.wti-archivo-dentro {
	max-width: var(--wti-ancho, 1280px);
	margin: 0 auto;
	padding: 0 36px;
}

.wti-archivo-cabecera {
	background: transparent;
	border-bottom: 1px solid var(--wti-linea, #E8E2DA);
	padding: 34px 0 30px;
	margin-bottom: 34px;
}

.wti-archivo-cabecera h1 {
	margin: 0;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 36px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--wti-naranja, #F57C00);
}

/* El texto de la cabecera lleva tope de ancho a proposito.

   A todo el ancho la linea sale de unas 140 letras y el ojo se pierde al
   saltar de renglon; lo comodo son 60-90. Con 900px ya vamos por 110, que es
   generoso. El 22-09-2026 se quito y se volvio a poner el mismo dia, con el
   motivo explicado. El titulo si va a todo el ancho. */
.wti-archivo-lema {
	margin: 12px 0 0;
	max-width: 900px;
	font-family: "Newsreader", Georgia, serif;
	font-size: 18px;
	line-height: 1.5;
	color: #33291F;
}

.wti-archivo-texto {
	margin-top: 14px;
	max-width: 900px;
	font-family: "Newsreader", Georgia, serif;
	font-size: 16px;
	line-height: 1.7;
	color: var(--wti-gris, #8A817B);
}

.wti-archivo-texto p {
	margin: 0 0 14px;
}

.wti-archivo-vacio {
	font-family: "Newsreader", Georgia, serif;
	font-size: 17px;
	color: var(--wti-gris, #8A817B);
}

/* Las paginas, con el mismo aire que el resto */
.wti-archivo-paginas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 36px;
}

.wti-archivo-paginas .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--wti-linea, #E8E2DA);
	border-radius: 999px;
	background: #fff;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 14px;
	color: var(--wti-tinta, #1B1512);
	text-decoration: none;
	transition: border-color .18s, color .18s, background .18s;
}

.wti-archivo-paginas .page-numbers:hover {
	border-color: var(--wti-naranja, #F57C00);
	color: var(--wti-naranja, #F57C00);
}

.wti-archivo-paginas .page-numbers.current {
	background: var(--wti-naranja, #F57C00);
	border-color: var(--wti-naranja, #F57C00);
	color: #fff;
}

.wti-archivo-paginas .page-numbers.dots {
	border-color: transparent;
	background: none;
}

@media (max-width: 1023px) {
	.wti-archivo-dentro {
		padding-left: 18px;
		padding-right: 18px;
	}

	.wti-archivo-cabecera h1 {
		font-size: 27px;
	}
}

/* ---------- esenciales en la cabecera (v3.12.0-3.12.1, 2026-09-24) ----------
 * Los negocios destacados del lugar o la playa van en la cabecera, a la derecha
 * del nombre: logos en tarjetas 2:1, hasta 4 por fila (8 en dos filas). */

.wti-ficha-esenciales {
	flex: 0 0 auto;
	max-width: 60%;
	padding-left: 32px;
	border-left: 1px solid var(--wti-linea, #E8E2DA);
}

/* v3.13.0: el tamaño de Playa d'en Bossa es el máximo (Angel): logos de 164 px,
 * hasta 4 por fila; con menos de 4, el bloque se estrecha. «Pequeño» (panel):
 * 130 px. */
.wti-ficha-esenciales--1 { --ese-col: 1; }
.wti-ficha-esenciales--2 { --ese-col: 2; }
.wti-ficha-esenciales--3 { --ese-col: 3; }
.wti-ficha-esenciales--4,
.wti-ficha-esenciales--5,
.wti-ficha-esenciales--6,
.wti-ficha-esenciales--7,
.wti-ficha-esenciales--8,
.wti-ficha-esenciales--peq { --ese-col: 4; }
.wti-ficha-esenciales--peq { --ese-logo: 130px; }

.wti-ficha-esenciales-titulo {
	display: block;
	margin-bottom: 10px;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wti-naranja, #F57C00);
}

.wti-ficha-esenciales-rejilla {
	display: grid;
	grid-template-columns: repeat(var(--ese-col, 4), minmax(0, var(--ese-logo, 164px)));
	gap: 12px;
}

.wti-ficha-esencial {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 2 / 1;
	border: 1px solid var(--wti-linea, #E8E2DA);
	border-radius: var(--wti-radio-chico, 10px);
	overflow: hidden;
	background: #fff;
	color: var(--wti-marron, #7A5238);
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 12px;
	text-align: center;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.wti-ficha-esencial img {
	width: 100%;
	height: 100%;
	object-fit: cover;          /* el logo llena la tarjeta, como en Esenciales */
}

.wti-ficha-esencial:hover,
.wti-ficha-esencial:focus-visible {
	transform: translateY(-2px);
	border-color: var(--wti-naranja, #F57C00);
	box-shadow: 0 12px 24px -16px rgba(27, 21, 18, .45);
}

@media (max-width: 960px) {
	.wti-ficha-cabecera .wti-ficha-dentro {
		flex-wrap: wrap;
	}

	.wti-ficha-esenciales {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-top: 18px;
		border-left: 0;
		border-top: 1px solid var(--wti-linea, #E8E2DA);
	}
}

@media (max-width: 560px) {
	.wti-ficha-esenciales-rejilla {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wti-ficha-esenciales--1 .wti-ficha-esenciales-rejilla {
		grid-template-columns: minmax(0, 260px);
	}
}

/* ---------- plantilla desde el panel (v3.13.0, fase D1) ---------- */

.wti-ficha-barra--blanco { background: #fff; border-bottom-color: var(--wti-linea, #E8E2DA); }
.wti-ficha-barra--marron { background: var(--wti-marron, #7A5238); border-bottom-color: var(--wti-marron, #7A5238); }
.wti-ficha-barra--naranja { background: var(--wti-naranja, #F57C00); border-bottom-color: var(--wti-naranja, #F57C00); }
.wti-ficha-barra--blanco .wti-ficha-boton:not(.wti-ficha-boton-fuerte) {
	border-color: var(--wti-naranja, #F57C00);
	color: var(--wti-naranja, #F57C00);
}
.wti-ficha-barra--marron .wti-ficha-boton:not(.wti-ficha-boton-fuerte),
.wti-ficha-barra--naranja .wti-ficha-boton:not(.wti-ficha-boton-fuerte) {
	background: transparent;
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}
.wti-ficha-barra--naranja .wti-ficha-boton-fuerte {
	background: #fff;
	border-color: #fff;
	color: var(--wti-naranja-fuerte, #E06E00);
}
.wti-ficha-barra--marron .wti-ficha-red,
.wti-ficha-barra--naranja .wti-ficha-red {
	background: rgba(255, 255, 255, .18);
}

.wti-ficha-principal--entero .wti-ficha-desvanece { display: none; }

.wti-ficha-cuerpo--izq { grid-template-columns: 400px minmax(0, 1fr); }
.wti-ficha-cuerpo--izq > aside { order: -1; }

.wti-ficha-noticias { padding: 20px 0 44px; }

/* ---------- todas las playas (v3.14.0) ---------- */
.wti-ficha-playas-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.wti-ficha-playas-lista { columns: 4 220px; column-gap: 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.9; }
.wti-ficha-playas-lista a { color: var(--wti-tinta, #1B1512); text-decoration: none; }
.wti-ficha-playas-lista a:hover { color: var(--wti-naranja, #F57C00); }
.wti-ficha-playas-lista strong { color: var(--wti-naranja, #F57C00); font-weight: 600; }

/* ---------- formulario de la ficha (v3.15.0) ---------- */
.wti-ficha-escribir {
	width: min(640px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 30px 80px -30px rgba(27, 21, 18, .55);
	overflow: auto;
}
.wti-ficha-escribir::backdrop { background: rgba(27, 21, 18, .55); backdrop-filter: blur(3px); }
.wti-ficha-escribir .f27 { padding: 28px 28px 22px; margin: 0; background: #fff; }
.wti-ficha-escribir .f27-dentro { padding: 0; max-width: none; }
.wti-ficha-escribir-cerrar {
	position: sticky; top: 10px; float: right; margin: 10px 10px 0 0;
	width: 38px; height: 38px; border-radius: 50%; border: 0;
	background: var(--wti-crema, #F2E6D8); color: var(--wti-tinta, #1B1512);
	font-size: 24px; line-height: 1; cursor: pointer; z-index: 2;
}
.wti-ficha-escribir-cerrar:hover { background: var(--wti-naranja, #F57C00); color: #fff; }

/* ---------- noticia por piezas (v3.16.0) ---------- */
.wti-ficha-meta a { color: inherit; text-decoration: none; }
.wti-ficha-meta a:hover { color: var(--wti-naranja, #F57C00); }
.wti-noticia .wti-ficha-principal { display: flow-root; }

/* ---------- títulos a todo ancho con la cabecera de la casa (v3.17.0) ----------
   Los listados (Fiestas en…, Noticias de…, Todas las playas) llevan la misma
   cabecera que el bloque Artículos (.wti-cabeza de la base). El calendario de
   la noticia es parte de la fiesta: título de caja. */
.wti-ficha .wti-ficha-cabeza { margin-bottom: 22px; }
.wti-noticia-calendario .wti-ficha-titulo-ancho { margin-bottom: 18px; }

/* ---------------------------------------------------------------------------
   v3.18.0 (2026-09-27) — Opcion B1 de Angel (maqueta-movil-fotos-2027.html,
   bloque B): las fotos apaisadas, siempre 2:1 en el movil y la tableta (hasta
   1200 px). La foto de arriba de las playas (1920x566) salia en un hueco casi
   cuadrado (390x388 en el iPhone: se veia el 30 %) o de 1,67:1 en el iPad; a
   2:1 se ve el 59 % y el nombre de la playa sube a la primera pantalla. El
   ordenador, igual (ancho completo y 460 px de alto como mucho).
   --------------------------------------------------------------------------- */
@media (max-width:1200px){
	.wti-ficha-apaisada img{height:auto;min-height:0;aspect-ratio:2/1}
}

/* ---------------------------------------------------------------------------
   3.19.0 (2026-09-29, tema 5.12.0) — Iconos, opción B de Angel («tan finos y
   pequeños apenas se ven»): rellenos y a 20 px (inc/wti-iconos-2027.php). Las
   redes, con su logo SOLO y a 30 px, sin el círculo naranja alrededor («no
   quiero un círculo dentro de otro»). Los iconos de datos, sin transparencia.
   --------------------------------------------------------------------------- */
.wti-ficha-red {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: none;
	color: var(--wti-naranja, #F57C00);
}
.wti-ficha-red:hover,
.wti-ficha-red:focus-visible {
	background: none;
	color: var(--wti-naranja-fuerte, #E06E00);
}
.wti-ficha-red:focus-visible {
	outline: 2px solid var(--wti-naranja, #F57C00);
	outline-offset: 2px;
}
.wti-ficha-redes {
	gap: 4px;
	align-items: center;
}
.wti-ficha-dato svg {
	opacity: 1;
}
.wti-ficha-boton {
	gap: 10px;
}

/* ---------------------------------------------------------------------------
   3.20.0 (2026-09-29, tema 5.12.1) — La barra de contacto como el ejemplo que
   Angel da por bueno («así está mejor»; la 3.19.0 le parecía fea: iconos
   naranjas sueltos y dos botones naranjas compitiendo). El problema era el color
   y el sitio de los iconos, no el juego:
   - la barra es un recuadro crema con esquinas, dentro del ancho de la ficha;
   - botones blancos con el icono (18 px, relleno) del mismo color oscuro que el
     texto; solo «Reservar» va en naranja;
   - una raya fina separa los botones de las redes;
   - las redes, en círculos blancos con el logo naranja (19 px; la «f» sola de
     Facebook, así no hay un círculo dentro de otro).
   --------------------------------------------------------------------------- */
.wti-ficha-barra,
.wti-ficha-barra.wti-ficha-barra--crema {
	background: transparent;
	border-bottom: 0;
	padding: 18px 0 6px;
}
.wti-ficha-barra > .wti-ficha-dentro:first-child {
	background: var(--wti-crema, #F2E6D8);
	border-radius: 16px;
	padding-top: 14px;
	padding-bottom: 14px;
	gap: 20px;
}
.wti-ficha-barra .wti-ficha-botonera {
	gap: 10px;
}
.wti-ficha-barra .wti-ficha-boton {
	height: 42px;
	padding: 0 18px;
	gap: 9px;
	font-size: 12.5px;
}
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte) {
	background: #fff;
	border-color: transparent;
	color: #4A3222;
	box-shadow: 0 1px 2px rgba(122, 82, 56, .14);
}
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):hover,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):focus-visible {
	background: #fff;
	border-color: var(--wti-naranja, #F57C00);
	color: #c25e00;
}
.wti-ficha-barra .wti-ficha-redes {
	padding-left: 22px;
	border-left: 1px solid rgba(122, 82, 56, .22);
}
.wti-ficha-redes {
	gap: 8px;
}
.wti-ficha-red {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #fff;
	color: var(--wti-naranja, #F57C00);
	box-shadow: 0 1px 2px rgba(122, 82, 56, .14);
}
.wti-ficha-red:hover,
.wti-ficha-red:focus-visible {
	background: var(--wti-naranja, #F57C00);
	color: #fff;
}
@media (max-width: 1023px) {
	.wti-ficha-barra .wti-ficha-redes {
		padding-left: 0;
		border-left: 0;
	}
}

/* 3.20.1 — La segunda caja de la barra (los teléfonos, escondidos hasta pulsar
   «Ver teléfono») no lleva el recuadro: salía una franja crema vacía. */
.wti-ficha-barra > .wti-ficha-dentro + .wti-ficha-dentro {
	background: none;
	padding-top: 0;
	padding-bottom: 0;
}
.wti-ficha-barra .wti-ficha-telefonos:not([hidden]) {
	margin-top: 12px;
}

/* 3.20.2 (tema 5.12.3) — Como el ejemplo de Angel, al detalle: iconos de los
   botones a 20 px (WhatsApp, Instagram y web en línea gruesa: rellenos y
   pequeños eran una mancha), letra de los botones a 13 px, y los logos llenan
   el círculo: 22 px en 40 px. */
.wti-ficha-barra .wti-ficha-boton {
	font-size: 13px;
	gap: 10px;
}
.wti-ficha-red {
	width: 40px;
	height: 40px;
}

/* 3.20.3 (tema 5.12.4) — Las medidas del ejemplo «Premium» que Angel da por
   bueno: Phosphor Regular (línea) en teléfono, calendario, correo y WhatsApp;
   redes en círculos blancos de 42 px con el logo a 21 px (relleno en YouTube,
   TikTok y Telegram; línea en Instagram, X y web), sombra suave y un pequeño
   salto al pasar por encima. */
.wti-ficha-red {
	width: 42px;
	height: 42px;
	box-shadow: 0 3px 10px rgba(27, 21, 18, .10);
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.wti-ficha-red:hover,
.wti-ficha-red:focus-visible {
	background: #fff;
	color: var(--wti-naranja, #F57C00);
	transform: translateY(-2px);
	box-shadow: 0 5px 14px rgba(27, 21, 18, .15);
}
@media (prefers-reduced-motion: reduce) {
	.wti-ficha-red:hover,
	.wti-ficha-red:focus-visible {
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   3.21.0 (2026-09-29, tema 5.13.0) — Vuelta al estilo de la web real. Angel:
   «así están en la real y me valdrían mucho mejor, los tuyos parecen pegotes» y
   «se ve como pixelado o mordido». Medidas copiadas de la ficha real (Los
   Bodegueros): botones de 35 px, fondo #FFF4E5, raya naranja de 1 px, esquinas
   de 15 px, texto naranja Oswald 14 px e icono Font Awesome sólido de 14 px (los
   mismos iconos que pinta la real). El precio, en blanco con raya y texto
   marrones. Las redes, cuadradas en naranja con el logo en blanco. Sin recuadro
   crema detrás de la barra.
   --------------------------------------------------------------------------- */
.wti-ficha-barra > .wti-ficha-dentro:first-child {
	background: none;
	border-radius: 0;
	padding-top: 0;
	padding-bottom: 0;
}
.wti-ficha-barra,
.wti-ficha-barra.wti-ficha-barra--crema {
	padding: 20px 0 8px;
}
.wti-ficha-boton,
.wti-ficha-boton-fuerte,
.wti-ficha-barra .wti-ficha-boton,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte) {
	height: 35px;
	padding: 0 16px;
	gap: 6px;
	border: 1px solid var(--wti-naranja, #F57C00);
	border-radius: 15px;
	background: #FFF4E5;
	color: var(--wti-naranja, #F57C00);
	box-shadow: none;
	font-family: var(--wti-titulos, Oswald, sans-serif);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1;
}
.wti-ficha-boton:hover,
.wti-ficha-boton:focus-visible,
.wti-ficha-boton-fuerte:hover,
.wti-ficha-boton-fuerte:focus-visible,
.wti-ficha-barra .wti-ficha-boton:hover,
.wti-ficha-barra .wti-ficha-boton:focus-visible,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):hover,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):focus-visible {
	background: var(--wti-naranja, #F57C00);
	border-color: var(--wti-naranja, #F57C00);
	color: #fff;
}
/* Caja del icono como la de la real: 1,2 em de ancho y 1 em de alto, centrado. */
.wti-ficha-boton svg,
.wti-ficha-precio svg {
	width: 1.2em;
	height: 1em;
	flex: none;
}
.wti-ficha-precio {
	height: 35px;
	padding: 0 16px;
	gap: 6px;
	border: 1px solid var(--wti-marron, #7A5238);
	border-radius: 15px;
	background: #fff;
	color: var(--wti-marron, #7A5238);
	font-size: 14px;
	letter-spacing: normal;
	line-height: 1;
}
.wti-ficha-precio svg {
	opacity: 1;
}
.wti-ficha-barra .wti-ficha-redes {
	padding-left: 0;
	border-left: 0;
}
.wti-ficha-redes {
	gap: 6px;
}
.wti-ficha-red {
	width: 34px;
	height: 34px;
	border-radius: 6px;
	background: var(--wti-naranja, #F57C00);
	color: #fff;
	box-shadow: none;
	transition: background .18s;
}
.wti-ficha-red svg {
	width: 17px;
	height: 17px;
}
.wti-ficha-red:hover,
.wti-ficha-red:focus-visible {
	background: var(--wti-naranja-fuerte, #E06E00);
	color: #fff;
	transform: none;
	box-shadow: none;
}
.wti-ficha-dato svg {
	width: 1.1em;
	height: 1.1em;
}

/* 3.21.1 (tema 5.13.1) — En la columna de al lado el precio ocupa todo el ancho,
   como los botones: el texto va centrado igual que ellos. */
.wti-ficha-cuerpo aside .wti-ficha-precio {
	justify-content: center;
}

/* ---------------------------------------------------------------------------
   3.22.0 (2026-09-29, tema 5.14.0) — La barra de contacto, como el ejemplo
   «Premium» de Angel («quiero esto», «todos los contactos en una caja como
   antes», «más grande, más definido, líneas perfectas»):
   - todo en una caja crema con esquinas redondas: botones, raya fina y redes;
   - botones blancos de 46 px, texto marrón oscuro Oswald 15 px, «Reservar» en
     naranja;
   - iconos de trazo a 24 px (Tabler: rejilla de 24 px y trazo de 2 px). Los
     tamaños van en píxeles enteros y el icono cae centrado en un píxel entero
     (46 − 2 de raya − 24 = 20, la mitad 10), así las líneas no salen borrosas
     en pantallas normales, que era el «pixelado o mordido»;
   - redes en círculos blancos de 44 px con el logo naranja a 24 px.
   Carta, menús y precio siguen como en la web real (3.21.x).
   --------------------------------------------------------------------------- */
.wti-ficha-barra,
.wti-ficha-barra.wti-ficha-barra--crema {
	padding: 18px 0 6px;
}
.wti-ficha-barra > .wti-ficha-dentro:first-child {
	background: var(--wti-crema, #F2E6D8);
	border-radius: 18px;
	padding-top: 16px;
	padding-bottom: 16px;
	gap: 20px;
}
.wti-ficha-barra .wti-ficha-botonera {
	gap: 12px;
}
.wti-ficha-barra .wti-ficha-boton,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte) {
	height: 46px;
	padding: 0 22px 0 18px;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #fff;
	color: #3D2A1E;
	box-shadow: 0 2px 6px rgba(122, 82, 56, .12);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: .06em;
	line-height: 1;
}
.wti-ficha-barra .wti-ficha-boton.wti-ficha-boton-fuerte {
	background: var(--wti-naranja, #F57C00);
	border-color: var(--wti-naranja, #F57C00);
	color: #fff;
	box-shadow: 0 3px 10px rgba(245, 124, 0, .28);
}
.wti-ficha-barra .wti-ficha-boton:hover,
.wti-ficha-barra .wti-ficha-boton:focus-visible,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):hover,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte):focus-visible {
	background: #fff;
	border-color: var(--wti-naranja, #F57C00);
	color: #3D2A1E;
}
.wti-ficha-barra .wti-ficha-boton.wti-ficha-boton-fuerte:hover,
.wti-ficha-barra .wti-ficha-boton.wti-ficha-boton-fuerte:focus-visible {
	background: var(--wti-naranja-fuerte, #E06E00);
	border-color: var(--wti-naranja-fuerte, #E06E00);
	color: #fff;
}
.wti-ficha-boton svg.wti-ico-trazo,
.wti-ficha-red svg.wti-ico-trazo {
	width: 24px;
	height: 24px;
	flex: none;
}
.wti-ficha-barra .wti-ficha-redes {
	padding-left: 22px;
	border-left: 1px solid rgba(122, 82, 56, .22);
}
.wti-ficha-redes {
	gap: 8px;
}
.wti-ficha-red {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	color: var(--wti-naranja, #F57C00);
	box-shadow: 0 3px 10px rgba(27, 21, 18, .10);
	transition: transform .2s ease, box-shadow .2s ease;
}
.wti-ficha-red:hover,
.wti-ficha-red:focus-visible {
	background: #fff;
	color: var(--wti-naranja-fuerte, #E06E00);
	transform: translateY(-2px);
	box-shadow: 0 5px 14px rgba(27, 21, 18, .15);
}
@media (prefers-reduced-motion: reduce) {
	.wti-ficha-red:hover,
	.wti-ficha-red:focus-visible {
		transform: none;
	}
}
@media (max-width: 1023px) {
	.wti-ficha-barra .wti-ficha-redes {
		padding-left: 0;
		border-left: 0;
	}
}

/* 3.22.1 (tema 5.14.2) — Angel: «no quiero los botones más grandes, quiero
   iconos más grandes». Los botones vuelven a su tamaño (42 px, letra 13 px) y
   los iconos se quedan a 24 px: 42 − 2 de raya − 24 = 16, la mitad 8, así el
   icono sigue en píxel entero. Las redes, en círculos de 42 px. El WhatsApp es
   el logo oficial (opción B). */
.wti-ficha-barra > .wti-ficha-dentro:first-child {
	padding-top: 14px;
	padding-bottom: 14px;
}
.wti-ficha-barra .wti-ficha-botonera {
	gap: 10px;
}
.wti-ficha-barra .wti-ficha-boton,
.wti-ficha-barra .wti-ficha-boton:not(.wti-ficha-boton-fuerte) {
	height: 42px;
	padding: 0 18px 0 14px;
	gap: 8px;
	font-size: 13px;
}
.wti-ficha-red {
	width: 42px;
	height: 42px;
}

/* 3.22.3 (tema 5.14.5) — Angel, 29-09:
   - «Cómo llegar» separado del mapa y del tamaño de los botones de la barra
     (42 px) con el icono a 24 px;
   - las categorías y la zona de la ficha vuelven a ser enlaces, como en la
     web real: mismo color que el texto y naranja al pasar por encima. */
.wti-ficha-mapa + .wti-ficha-botonera {
	margin-top: 16px;
}
.wti-ficha-boton#GTM-Como-llegar {
	height: 42px;
	gap: 8px;
}
.wti-ficha-dato a,
.wti-fm-datos a {
	color: inherit;
	text-decoration: none;
	transition: color .18s;
}
.wti-ficha-dato a:hover,
.wti-ficha-dato a:focus-visible,
.wti-fm-datos a:hover,
.wti-fm-datos a:focus-visible {
	color: var(--wti-naranja, #F57C00);
}

/* ---------------------------------------------------------------------------
   3.22.4 (2026-09-29, tema 5.16.7) — Ficha en la tableta (700–1023 px), Angel en
   el iPad:
   - «logo en una columna y título y extracto en otra, con las categorías»: la
     cabecera vuelve a ir lado a lado (antes se apilaba);
   - «galería en una fila, con al menos 4»: una sola fila, con 4 fotos y «Ver la
     galería» (o 5 fotos si no hay más); las demás siguen en el visor;
   - «vídeo y 360 al final, después de horarios y mapas»: las cajas de la columna y
     las de al lado se ordenan juntas (main y aside con display:contents) y la del
     vídeo y el 360 va la última.
   --------------------------------------------------------------------------- */
@media (min-width:700px) and (max-width:1023px){
	.wti-ficha-cabecera .wti-ficha-dentro{flex-direction:row;align-items:center;gap:28px}
	.wti-ficha-marca{width:220px;height:110px}
	.wti-ficha-cabecera .wti-ficha-titular{flex:1 1 0;min-width:0}

	.wti-ficha-tira .wti-ficha-dentro{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-auto-rows:auto;height:auto}
	.wti-ficha-tira .wti-ficha-foto{aspect-ratio:4 / 3}
	.wti-ficha-tira .wti-ficha-dentro:has(.wti-ficha-foto-mas) > .wti-ficha-foto:not(.wti-ficha-foto-mas):nth-child(n+5),
	.wti-ficha-tira .wti-ficha-dentro:not(:has(.wti-ficha-foto-mas)) > .wti-ficha-foto:nth-child(n+6){display:none}

	.wti-ficha-cuerpo{row-gap:0}
	.wti-ficha-cuerpo > main,
	.wti-ficha-cuerpo > aside{display:contents}
	.wti-ficha-cuerpo > main > *{order:1}
	.wti-ficha-cuerpo > aside > *{order:2}
	.wti-ficha-cuerpo > main > .wti-ficha-caja:has(.wti-ficha-medios){order:3}
}

/* 3.22.5 (2026-09-29, tema 5.16.8) — Cabecera de la ficha en la tableta, opción C de
   la maqueta «Ficha del iPad» (Angel: «creo que la C; no todas tendrán tantas
   categorías»): logo de 320×160 y, al lado, el texto centrado a su altura: título de
   26 px, resumen de 15 px y cada familia de categorías en su propia línea, sin rayas.
   Con pocas categorías el texto queda centrado junto al logo. El título lleva
   .wti-ficha-cabecera delante porque el panel de Estilos lo fija a 40 px. */
@media (min-width:700px) and (max-width:1023px){
	.wti-ficha-cabecera .wti-ficha-dentro{gap:24px;align-items:stretch}
	.wti-ficha-marca{width:320px;height:160px;align-self:center}
	.wti-ficha-cabecera .wti-ficha-titular{display:flex;flex-direction:column;justify-content:center}
	.wti-ficha-cabecera .wti-ficha-titular h1{font-size:26px;line-height:1.1}
	.wti-ficha-cabecera .wti-ficha-lema{font-size:15px;margin-top:10px}
	.wti-ficha-cabecera .wti-ficha-meta{flex-direction:column;align-items:flex-start;gap:6px;margin-top:14px}
	.wti-ficha-cabecera .wti-ficha-dato{border-right:0;padding:0}
}

/* 3.22.6 (tema 5.16.9) — Angel: «intenta poner las categorías en línea siempre que
   quepan». En la tableta las familias de categorías van seguidas en la misma línea y
   solo bajan a la siguiente cuando no caben; sin rayas entre ellas (una raya al final
   de una línea partida queda mal), separadas por el hueco. */
@media (min-width:700px) and (max-width:1023px){
	.wti-ficha-cabecera .wti-ficha-meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 20px}
	.wti-ficha-cabecera .wti-ficha-dato{max-width:100%}
}

/* 3.22.7 (tema 5.16.10) — Angel: «si hay vídeo y 360, en 2 columnas mejor». En la
   tableta (700–1023 px) el vídeo y la vista 360 van lado a lado (antes, uno debajo
   del otro). */
@media (min-width:700px) and (max-width:1023px){
	.wti-ficha-medios-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* 3.22.8 (2026-09-29, tema 5.17.0)
   1) Migas de pan en todas las fichas (Angel: «para volver al menos a su portada
      desde cada ficha»): Inicio › portada › [rama] › ficha, en letra pequeña gris,
      encima de todo; en el móvil, encima de las fotos (nada encima de la foto).
   2) Las fotos apaisadas no se cortan en la tableta (Angel: «las imágenes
      horizontales se cortan en el iPad»): de 700 a 1200 px la foto se ve entera, a
      su proporción, en vez de recortada a 2:1. */
.wti-ficha-migas{background:#fff}
.wti-ficha-migas .wti-ficha-dentro{padding-top:14px;padding-bottom:0}
.wti-migas{font:500 12px/1.45 var(--wti-texto,Inter,system-ui,sans-serif);color:var(--wti-gris,#8A817B)}
.wti-migas a{color:inherit;text-decoration:none;transition:color .15s ease}
.wti-migas a:hover,.wti-migas a:focus-visible{color:var(--wti-naranja,#F57C00)}
.wti-migas [aria-current]{color:var(--wti-tinta,#1B1512)}
.wti-migas-sep{margin:0 5px}
.wti-fm-migas{padding:10px 16px 8px;background:#fff}
.wti-ficha-migas + .wti-ficha-apaisada{margin-top:12px}
@media (min-width:700px) and (max-width:1200px){
	.wti-ficha-apaisada img{height:auto;min-height:0;aspect-ratio:auto;object-fit:contain}
}