/*
 * Ficha de los lugares para visitar (ver includes/lugares.php): "Para tu
 * visita" como un bloque más de la ficha, "Próximamente en…" con las filas de
 * la agenda (agenda.css), "Cerca de…" y la tarjeta y la barra de la visita
 * (sobre los estilos del contacto, listados.css y comer.css).
 *
 * Los selectores llevan la clase del bloque adelante para ganarle a los
 * estilos globales del kit de Elementor (h2, h3, a, los títulos naranjas).
 */

/* ---------------------------------------------------------------------------
 * Para tu visita: las filas de que-hacer.css, sin su recuadro (ya está en la tarjeta del bloque)
 * ------------------------------------------------------------------------ */

.areco-lugares-visita .areco-visita.areco-visita--ficha {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* "Ver horarios" del encabezado baja hasta acá: que el título no quede pegado al borde. */
.areco-lugares-visita #horarios {
	scroll-margin-top: 90px;
}

/* En el celular, sin el ícono de cada fila (el rótulo alcanza) y con el día y
   el horario en la misma línea: el texto usa todo el ancho de la tarjeta. */
@media (max-width: 767px) {
	.areco-lugares-visita .areco-visita--ficha .areco-visita__fila {
		grid-template-columns: minmax(0, 1fr);
	}

	.areco-lugares-visita .areco-visita--ficha .areco-visita__icono {
		display: none;
	}

	.areco-lugares-visita .areco-visita--ficha .areco-visita__rotulo {
		padding-top: 0;
	}

	.areco-lugares-visita .areco-visita--ficha .areco-visita__horario > div {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 2px 12px;
	}

	.areco-lugares-visita .areco-visita--ficha .areco-visita__horario > div + div {
		margin-top: 0;
	}

	/* Hoy: el horario y el estado debajo del día. */
	.areco-lugares-visita .areco-visita--ficha .areco-visita__horario > div.areco-visita__hoy {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* La entrada: "Entrada: $5.000", como el horario. */
.areco-lugares-visita .areco-lugares-entrada {
	font-weight: 600;
	color: var(--areco-tinta);
}

/* En el encabezado, al lado del estado de ahora: "Entrada gratuita" en verde, el precio en gris. */
.areco-ficha .areco-lugares-pildora {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 7px;
	margin: 0;
	padding: 7px 14px;
	border-radius: 999px;
	background: #f0f1ee;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #3d4439;
}

.areco-ficha .areco-lugares-pildora--gratis {
	background: #eef3ea;
	color: #3d6f33;
}

.areco-ficha .areco-lugares-pildora .areco-icono {
	width: 17px;
	height: 17px;
}

/* ---------------------------------------------------------------------------
 * Recorrelo con guía: la tarjeta horizontal del listado, dentro del bloque
 * ------------------------------------------------------------------------ */

.areco-ficha .areco-lugares-guias__bajada {
	margin: -8px 0 18px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--areco-texto);
}

.areco-lugares-guias .areco-listado--horizontal .areco-tarjeta__media {
	min-height: 200px;
}

/* ---------------------------------------------------------------------------
 * Recorrido a pie: la parada, la anterior y la siguiente
 * ------------------------------------------------------------------------ */

.areco-ficha .areco-lugares-recorrido__parada {
	margin: -8px 0 16px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #3f6b35;
}

.areco-lugares-recorrido .areco-lugares-recorrido__vecinas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.areco-ficha a.areco-lugares-recorrido__vecina {
	display: grid;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--areco-linea);
	border-radius: var(--areco-radio);
	color: var(--areco-texto);
	text-decoration: none;
	transition: border-color 0.15s, background-color 0.15s;
}

.areco-ficha a.areco-lugares-recorrido__vecina:hover,
.areco-ficha a.areco-lugares-recorrido__vecina:focus-visible {
	border-color: #cfdcc8;
	background: var(--areco-verde-claro);
	color: var(--areco-texto);
}

.areco-ficha .areco-lugares-recorrido__vecina--siguiente {
	text-align: right;
}

.areco-ficha .areco-lugares-recorrido__rotulo {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--areco-gris);
}

.areco-ficha .areco-lugares-recorrido__vecina strong {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--areco-tinta);
}

.areco-ficha .areco-lugares-recorrido__minutos {
	font-size: 14px;
	color: var(--areco-gris);
}

@media (max-width: 767px) {
	.areco-lugares-recorrido .areco-lugares-recorrido__vecinas {
		grid-template-columns: minmax(0, 1fr);
	}

	.areco-ficha .areco-lugares-recorrido__vecina--siguiente {
		text-align: left;
	}

	.areco-ficha .areco-lugares-recorrido__vecina--vacia {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Próximamente en…: las filas de la agenda dentro del bloque
 * ------------------------------------------------------------------------ */

.areco-lugares-agenda .areco-agenda .areco-agenda-dias {
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
}

.areco-ficha a.areco-lugares__mas {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	color: var(--areco-verde);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.areco-ficha a.areco-lugares__mas:hover span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Cerca de…: lugares para visitar (foto, tipo, nombre y distancia) y, debajo,
 * las tarjetas de los lugares para comer
 * ------------------------------------------------------------------------ */

.areco-lugares-cerca .areco-lugares-cerca__fila + .areco-lugares-cerca__fila {
	margin-top: 40px;
}

.areco-lugares-cerca .areco-lugares-cerca__lista {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.areco-lugares-cerca .areco-lugares-cerca__lugar a {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	height: 100%;
	padding: 10px;
	border-radius: var(--areco-radio);
	background: #fff;
	box-shadow: var(--areco-sombra);
	color: var(--areco-texto);
	text-decoration: none;
	transition: box-shadow 0.15s;
}

.areco-lugares-cerca .areco-lugares-cerca__lugar a:hover,
.areco-lugares-cerca .areco-lugares-cerca__lugar a:focus-visible {
	box-shadow: var(--areco-sombra-alta);
	color: var(--areco-texto);
}

.areco-lugares-cerca .areco-lugares-cerca__foto {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 4px;
	object-fit: cover;
}

.areco-lugares-cerca .areco-lugares-cerca__foto--vacia {
	display: grid;
	place-items: center;
	background: var(--areco-verde-claro);
	color: var(--areco-verde);
}

.areco-lugares-cerca .areco-lugares-cerca__cuerpo {
	display: grid;
	gap: 4px;
	min-width: 0;
}

.areco-lugares-cerca .areco-lugares-cerca__tipo {
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #3f6b35;
}

.areco-lugares-cerca .areco-lugares-cerca__nombre {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--areco-tinta);
}

.areco-lugares-cerca .areco-lugares-cerca__lugar a:hover .areco-lugares-cerca__nombre {
	color: var(--areco-nombre);
}

.areco-lugares-cerca .areco-lugares-cerca__distancia {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 14px;
	color: var(--areco-gris);
}

.areco-lugares-cerca .areco-lugares-cerca__distancia .areco-icono {
	width: 15px;
	height: 15px;
}

@media (max-width: 1024px) {
	.areco-lugares-cerca .areco-lugares-cerca__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.areco-lugares-cerca .areco-lugares-cerca__lista {
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
	}

	.areco-lugares-cerca .areco-lugares-cerca__fila + .areco-lugares-cerca__fila {
		margin-top: 32px;
	}
}

/* ---------------------------------------------------------------------------
 * Tarjeta de la visita (costado, en la computadora) y barra del celular
 * ------------------------------------------------------------------------ */

.areco-contacto--visita .areco-lugares-hoy {
	margin: -4px 0 0;
}

.areco-contacto--visita .areco-lugares-hoy > div {
	display: grid;
	gap: 6px;
}

.areco-contacto--visita .areco-lugares-hoy > div[hidden] {
	display: none;
}

.areco-contacto--visita .areco-lugares-hoy dt {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--areco-contacto-gris);
}

.areco-contacto--visita .areco-lugares-hoy dd {
	display: grid;
	gap: 8px;
	justify-items: start;
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--areco-contacto-tinta);
}

/* "Abierto · cierra a las 16:30", en píldora como en el encabezado. */
.areco-contacto--visita .areco-lugares-hoy dd .areco-estado {
	padding: 6px 12px;
	border-radius: 999px;
	background: #f0f1ee;
	font-size: 14.5px;
}

.areco-contacto--visita .areco-lugares-hoy dd .areco-estado--abierto {
	background: #eef3ea;
}

.areco-contacto--visita .areco-lugares-hoy dd .areco-estado--pronto {
	background: #fdf0ea;
}

.areco-contacto--visita a.areco-lugares-hoy__semana {
	justify-self: start;
	margin-top: -8px;
	color: #3f6b35;
	font-size: 14.5px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.areco-contacto--visita .areco-lugares-direccion {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid var(--areco-contacto-linea);
	font-size: 15px;
	line-height: 1.45;
	color: var(--areco-contacto-gris);
}

.areco-contacto--visita .areco-lugares-direccion strong {
	font-weight: 600;
	color: var(--areco-contacto-tinta);
}

.areco-contacto--visita .areco-lugares-direccion .areco-icono {
	margin-top: 2px;
	color: #3f6b35;
}

/* El número a la vista en la tarjeta (en la computadora se mira, no se llama). */
.areco-contacto--visita.areco-contacto--tarjeta a.areco-contacto__boton:not(.areco-contacto__boton--llegar) {
	border-color: #cfdcc8;
	color: #3f6b35;
}

.areco-contacto--visita.areco-contacto--tarjeta a.areco-contacto__boton:not(.areco-contacto__boton--llegar):hover {
	border-color: #3d6133;
	background: #3d6133;
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Celular: el público es mayor, la letra chica va un punto más grande (docs/03, 2.7)
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {
	.areco-ficha a.areco-lugares__mas {
		font-size: 16px;
	}

	.areco-ficha .areco-lugares-pildora,
	.areco-ficha .areco-lugares-recorrido__parada,
	.areco-ficha .areco-lugares-recorrido__minutos {
		font-size: 15px;
	}

	.areco-ficha .areco-lugares-recorrido__rotulo {
		font-size: 14px;
	}

	.areco-ficha .areco-lugares-guias__bajada,
	.areco-ficha .areco-lugares-recorrido__vecina strong {
		font-size: 17px;
	}

	.areco-lugares-cerca .areco-lugares-cerca__tipo {
		font-size: 13.5px;
	}

	.areco-lugares-cerca .areco-lugares-cerca__nombre {
		font-size: 17px;
	}

	.areco-lugares-cerca .areco-lugares-cerca__distancia {
		font-size: 15px;
	}
}