/* ============================================================
 * responsive.css – Etapa 13: Diseño Responsivo
 * Añade media queries para adaptar el layout de 955px fijo
 * a pantallas de tablets y móviles.
 * ============================================================ */

/* ── Hamburger button (hidden on desktop) ── */
.hamburger {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 1001;
}
.hamburger span {
	display: block;
	width: 28px;
	height: 3px;
	margin: 5px 0;
	background: #333;
	border-radius: 2px;
	transition: transform .3s, opacity .3s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* ── Tablets (max-width: 980px) ── */
@media screen and (max-width: 980px) {
	.columns-wrap {
		flex-direction: column;
	}
	.wrapper {
		width: 95% !important;
		max-width: 1200px;
		padding: 0 2.5%;
		box-sizing: border-box;
	}

	#header {
		height: auto !important;
		padding: 10px 0;
	}
	#header #langnav {
		width: auto;
		float: none;
		text-align: right;
		padding: 0;
		gap: 6px;
	}
	#header #langnav a,
	#header #langnav p {
		width: 40px;
		height: 30px;
	}
	#header #langnav img {
		width: 34px;
		height: 22px;
	}
	#header a.toplogo {
		width: 200px;
		height: auto;
	}
	#header a.toplogo img {
		width: 100%;
		height: auto;
	}
	#header #topnav {
		width: 100%;
		padding-top: 10px;
		margin-top: 10px;
		height: auto;
	}

	.content {
		width: 100% !important;
		padding-right: 0;
		float: none !important;
	}
	.sidebar {
		width: 100% !important;
		float: none !important;
		padding: 0 !important;
	}
	.content .innerFull {
		width: 100% !important;
		box-sizing: border-box;
	}
	.content .izquierda,
	.content .derecha {
		width: 100% !important;
		float: none !important;
		padding: 0 0 10px 0;
	}

	h1 {
		width: 100% !important;
		box-sizing: border-box;
		background-size: 100% auto;
	}
	h1 form.sorter {
		position: static;
		width: 100%;
		height: auto;
		margin-top: 6px;
		padding: 5px 0;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 6px;
		box-sizing: border-box;
	}
	h1 form.sorter label {
		width: auto;
		line-height: 24px;
	}
	h1 form.sorter .jNiceSelectWrapper,
	h1 form.sorter .jNiceSelectWrapper div span {
		width: 170px !important;
	}
	h1 form.sorter .jNiceSelectWrapper ul {
		width: 140px !important;
	}
	h1 form.sorter input[type="submit"] {
		width: auto;
	}

	.bar-card {
		padding: 18px;
		align-items: center;
		gap: 18px;
	}
	.bar-card-left {
		flex: 0 0 240px;
		margin: 0;
	}
	.bar-card-photo,
	.bar-card-photo .fotoGrande,
	.fotoGrande {
		width: 240px;
		height: 190px;
	}
	.bar-gb-fields {
		padding: 14px 84px 8px 16px;
	}
	.bar-card-logo .bar-logo {
		width: 66px;
		height: 66px;
	}
	.bar-hero {
		height: 280px;
	}
	.bar-hero-name {
		font-size: 18px;
	}
	.bar-hero-logo {
		width: 58px;
		height: 58px;
	}
	.bar-hero-caption {
		left: calc(16px + 58px + 10px);
	}
	.carta-module-split {
		grid-template-columns: 1fr;
	}
	.carta-slide img {
		min-height: 340px;
		max-height: 440px;
	}
	.carta-resources {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
	.gallery-main {
		height: 360px;
	}
	.gallery-counter {
		bottom: 76px;
	}
	.gallery-thumb {
		flex-basis: 78px;
		height: 56px;
	}

	#footer {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		margin-top: 24px;
		padding: 0 8px 16px;
		box-sizing: border-box;
	}
	#footer:before,
	#footer a.footerlogo,
	#footer nav {
		display: none;   /* movil-ok: el logotipo y el menu del pie; en movil los mismos enlaces estan en el menu hamburguesa — comprobado que Aviso legal se alcanza */
	}
	#footer div.copyright {
		line-height: 1.35;
		padding: 0 6px;
	}
	body {
		padding-bottom: 76px;
	}
	#cb-cookie {
		bottom: 76px !important;
	}
	.mobile-dock {
		display: block;
	}

	.sidebar .greybox,
	.sidebar .redbox {
		width: 100% !important;
		min-height: auto !important;
	}
	/* ⚠ `float: none` es lo que faltaba, y sin ello el `width: auto` de abajo
	   hace justo lo contrario de lo que parece.
	   Estas cajas heredan `float: left` de `div.greybox` (maqueta de 2009). Un
	   bloque FLOTADO con ancho automático no ocupa el ancho disponible: se
	   encoge hasta su contenido. Por eso el buscador de eventos salía a 245px
	   pegado a la izquierda, con 99px muertos al lado, mientras el resto de
	   buscadores del sitio ocupan todo el ancho. Sin flotar, el mismo
	   `width: auto` rellena el hueco, que era la intención original.
	   Los mapas de región/provincia/ciudad ya estaban a 344 por su propia
	   regla `#mapa`, así que no se mueven. */
	.content .greybox,
	.content .redbox,
	.content .izquierda .greybox,
	.content .izquierda .redbox,
	.content .derecha .greybox,
	.content .derecha .redbox {
		width: auto !important;
		float: none !important;
		box-sizing: border-box;
	}

	#pagination {
		width: 100% !important;
		box-sizing: border-box;
	}

	ul.bares:not(.home-featured-track) li div {
		width: calc(100% - 230px);
	}
	ul.bares:not(.home-featured-track) li a.flecha {
		margin: 20px 0;
	}

	#barmap {
		width: 100% !important;
		box-sizing: border-box;
	}
	.barData {
		width: 100% !important;
	}
	.fotoGrande {
		width: 100% !important;
		height: auto !important;
		max-width: 400px;
	}
	.fotoGrande img {
		width: 100%;
		height: auto;
	}

	ul.servs {
		width: 100% !important;
	}
	ul.servs li {
		width: 30%;
		margin: 0 1.5% 5px;
	}

	ul.destacados li {
		width: 30%;
		margin: 0 1.5%;
	}

	#minimap, #miniform {
		width: 48% !important;
	}

	ul.minioptions {
		width: 100% !important;
	}
	ul.minioptions li {
		width: 48%;
	}

	#proxEv {
		width: 100% !important;
	}

	.mismedios {
		width: 96% !important;
		margin: 2% 0;
		float: none !important;
	}

	.topImage {
		width: 100% !important;
		height: auto !important;
	}
	.topImage img {
		width: 100%;
		height: auto;
	}

	#mapa {
		width: 100% !important;
	}

	.banners {
		width: 100%;
	}

	ul.listasPerfil, ul.listasPerfil li {
		width: 100% !important;
	}
}

/* ── Móviles (max-width: 640px) ── */
@media screen and (max-width: 640px) {
	body {
		font-size: 13px;
	}

	.wrapper {
		width: 100% !important;
		padding: 0 10px;
		box-sizing: border-box;
	}

	/* Hamburger menu */
	#header {
		position: relative;
	}
	.hamburger {
		display: block;
	}
	#topnav {
		display: none;   /* movil-ok: el menu de escritorio; en movil manda #mobile-menu, con los mismos enlaces */
		width: 100%;
		background: #fff;
		padding: 10px 0;
		border-top: 1px solid #ddd;
	}
	#topnav.open {
		display: block;
	}
	#topnav a {
		display: block;
		padding: 10px 15px;
		font-size: 16px;
		line-height: 1.4;
		border-bottom: 1px solid #eee;
		min-height: 44px;
	}
	#topnav a:last-child {
		border-bottom: none;
	}

	#header a.toplogo {
		width: 160px;
		float: none;
		display: block;
		margin: 0 auto;
	}
	#header #langnav {
		justify-content: center;
		margin: 0 auto 10px;
	}

	/* Form responsiveness */
	fieldset.largo,
	fieldset.largo input,
	fieldset.largo select,
	fieldset.largo textarea {
		width: 100% !important;
		box-sizing: border-box;
	}
	fieldset.corto,
	fieldset.corto input,
	fieldset.corto select {
		width: 100% !important;
		box-sizing: border-box;
	}
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	select,
	textarea {
		max-width: 100%;
		box-sizing: border-box;
	}
	input[type="submit"],
	button {
		min-height: 44px;
		min-width: 44px;
	}

	ul.bares:not(.home-featured-track) li {
		width: 100% !important;
	}
	ul.bares:not(.home-featured-track) li a.thumb {
		width: 100% !important;
		height: auto !important;
		max-width: 280px;
		margin: 0 auto 10px;
		float: none !important;
		display: block;
	}
	ul.bares:not(.home-featured-track) li a.thumb img {
		width: 100%;
		height: auto;
	}
	ul.bares:not(.home-featured-track) li div {
		width: 100% !important;
		float: none !important;
	}
	ul.bares:not(.home-featured-track) li a.flecha {
		display: none;   /* movil-ok: la flechita decorativa del listado de 2009; no lleva a ninguna parte */
	}

	ul.destacados li {
		width: 100% !important;
		margin: 0 0 10px !important;
	}

	ul.servs li {
		width: 48% !important;
	}

	.fotoGrande {
		max-width: 100%;
		margin: 10px 0;
	}

	.bar-card {
		display: block;
		padding: 16px;
		border-radius: 16px;
	}
	.bar-card-left,
	.bar-card-right {
		width: 100%;
		max-width: 100%;
		flex: none;
	}
	.bar-card-left {
		margin-bottom: 16px;
		margin-left: auto;
		margin-right: auto;
	}
	.bar-card-photo,
	.bar-card-photo .fotoGrande,
	.fotoGrande {
		width: 100%;
		height: auto !important;
		max-width: none;
	}
	.bar-card-photo {
		height: 230px !important;
	}
	.bar-hero {
		height: 210px;
		border-radius: 10px;
	}
	.bar-hero-name {
		font-size: 15px;
	}
	.bar-hero-logo {
		width: 50px;
		height: 50px;
		bottom: 12px;
		left: 12px;
	}
	.bar-hero-caption {
		bottom: 12px;
		left: calc(12px + 50px + 9px);
		right: 12px;
	}
	.bar-hero-caption-nolog {
		left: 12px;
	}
	.bar-hero-meta {
		gap: 5px;
	}
	.bar-hero-pill {
		font-size: 10px;
		padding: 3px 8px;
	}
	.carta-module {
		padding: 12px;
	}
	.carta-stage-head {
		align-items: flex-start;
		flex-direction: column;
	}
	.carta-stage-intro {
		width: 100%;
		justify-content: flex-start;
	}
	.carta-stage-title {
		font-size: 22px;
		white-space: normal;
	}
	.carta-slide img {
		min-height: 220px;
		max-height: 320px;
	}
	.carta-arrow {
		width: 40px;
		height: 40px;
		font-size: 16px;
	}
	.carta-arrow-prev {
		left: 10px;
	}
	.carta-arrow-next {
		right: 10px;
	}
	.carta-viewer-bar {
		flex-direction: column;
		align-items: stretch;
		justify-content: center;
		padding: 10px 12px;
	}
	.carta-viewer-meta {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
	}
	.carta-dots {
		margin-left: 0;
	}
	.carta-viewer-actions {
		justify-content: stretch;
		width: 100%;
	}
	.carta-action-chip,
	.carta-action-chip-primary {
		width: 100%;
	}
	.carta-thumbs-wrap {
		padding: 10px;
	}
	.carta-thumb {
		flex-basis: 108px;
		width: 108px;
	}
	.carta-thumb img {
		height: 72px;
	}
	.carta-resources {
		grid-template-columns: 1fr;
	}
	.carta-resource-card {
		padding: 12px;
	}
	.carta-external-link,
	.carta-pdf-link {
		padding: 13px 12px;
	}
	.carta-external-icon,
	.carta-pdf-icon {
		width: 40px;
		height: 40px;
	}
	.gallery-section {
		margin: 24px 0 26px;
	}
	.gallery-main {
		height: 260px;
	}
	.gallery-arrow {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}
	.gallery-prev {
		left: 10px;
	}
	.gallery-next {
		right: 10px;
	}
	.gallery-counter {
		right: 10px;
		bottom: 74px;
		padding: 6px 11px;
		font-size: 11px;
	}
	.gallery-thumbs {
		padding: 10px 10px 12px;
		gap: 6px;
	}
	.gallery-thumb {
		flex-basis: 68px;
		height: 50px;
	}
	.gallery-lb-arrow {
		width: 44px;
		height: 44px;
	}
	.gallery-lb-prev {
		left: 12px;
	}
	.gallery-lb-next {
		right: 12px;
	}
	.gallery-lb-thumbs {
		max-width: 88vw;
	}
	.gallery-lb-thumb {
		flex-basis: 64px;
		height: 44px;
	}
	.bar-platforms {
		gap: 9px;
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
	}
	.bar-card-social-icons {
		max-width: 320px;
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
	.ficha-grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin: 22px 0;
	}
	.detail-card-topbar {
		flex-wrap: wrap;
		align-items: flex-start;
	}
	.detail-share-action {
		padding: 9px 12px;
	}
	.detail-return-link {
		padding: 14px;
		gap: 12px;
	}
	.detail-return-title {
		font-size: 19px;
	}
	.ficha-panel-header {
		padding: 15px 16px 14px;
		font-size: 13px;
	}
	.ficha-feat-img,
	.ficha-menu-card .ficha-feat-img {
		height: 190px;
	}
	.ficha-feat-body,
	.ficha-menu-body {
		padding: 16px 16px 18px;
	}
	.ficha-feat-title,
	.ficha-menu-title {
		font-size: 16px;
	}
	.ficha-menu-price-num {
		font-size: 26px;
	}
	.event-row {
		padding: 10px 12px;
		margin: 6px 0;
		gap: 10px;
	}
	.event-date {
		font-size: 9px;
		padding: 6px 10px;
		min-height: 24px;
	}
	.event-title {
		font-size: 12px;
	}
	.menu-item {
		padding: 11px 13px;
		margin: 6px 0;
	}
	.menu-title {
		font-size: 13px;
	}
	.menu-price {
		font-size: 11px;
	}
	.bar-plat {
		font-size: 13px;
		padding: 9px 12px;
	}
	.bar-card-logo {
		position: static;
		margin: 0 0 12px;
	}
	.bar-card-logo .bar-logo {
		width: 74px;
		height: 74px;
		margin: 0 auto;
	}
	.bar-gb-fields {
		padding: 14px;
	}
	.bar-gb-row {
		padding: 10px 0;
	}
	.bar-description {
		padding: 18px 18px 16px;
	}
	.bar-desc-text {
		padding: 15px 16px 15px 17px;
		font-size: 14px;
		line-height: 1.82;
	}
	.bar-description .bar-section-title {
		font-size: 10px;
		letter-spacing: 1.1px;
	}
	.bar-social-icons {
		gap: 10px;
	}
	.bar-social-link {
		width: 46px;
		height: 46px;
	}
	.bar-social-link img {
		width: 26px;
		height: 26px;
	}
	.ficha-panel {
		border-radius: 16px;
	}
	.ficha-feat-footer {
		padding-top: 12px;
	}
	.ficha-feat-cta,
	.ficha-menu-cta {
		font-size: 12px;
	}
	.event-row {
		gap: 10px;
	}
	.event-title {
		font-size: 11px;
	}
	.servicios-grid {
		padding: 12px;
		gap: 7px;
	}
	.bar-description .servicios-grid .icos {
		width: 36px;
		height: 36px;
		padding: 5px;
	}

	.bar-logo {
		float: none;
		margin: 10px auto;
		display: block;
	}

	.redbox input {
		width: 100%;
		box-sizing: border-box;
	}
	.redbox input[type="submit"] {
		width: 100%;
	}

	ul.populares li.sv-card {
		border-bottom-color: #eeeeee;
	}
	.sv-card-inner {
		gap: 10px;
		padding: 10px 0;
	}
	.sv-card-right, .sv-card-right a, .sv-card-right a.sv-card-img-link {
		width: 72px;
		height: 58px;
	}
	.sv-section-title {
		font-size: 20px;
	}

	#minimap, #miniform {
		width: 100% !important;
		float: none !important;
		height: auto !important;
	}

	ul.minioptions li {
		width: 100% !important;
	}

	a.prevE, .nextE {
		width: 40px;
		height: 40px;
	}
	a.nextE {
		left: auto;
		right: 0;
	}

	.corto {
		width: 100% !important;
	}

	.planesradio {
		width: 100% !important;
		box-sizing: border-box;
	}

	#clicker {
		width: 100% !important;
		box-sizing: border-box;
	}
}

/* ── Móviles Pequeños (max-width: 480px) ── */
@media screen and (max-width: 480px) {
	body {
		font-size: 12px;
	}

	.wrapper {
		width: 100% !important;
		padding: 0 8px;
		box-sizing: border-box;
	}

	/* Header Adjustments for 480px */
	#header {
		padding: 5px 0;
	}

	#header a.toplogo {
		width: 140px;
	}

	#header #langnav {
		margin: 0 auto 8px;
	}

	#header #langnav a,
	#header #langnav p {
		width: 36px;
		height: 28px;
	}

	#header #langnav img {
		width: 30px;
		height: 20px;
	}

	/* Navigation */
	#topnav a {
		padding: 8px 12px;
		font-size: 14px;
		line-height: 1.3;
		min-height: 40px;
	}

	/* Hero Search */
	.hero-search-bar {
		padding: 12px 8px;
	}

	.smartsearch-input {
		font-size: 13px;
		padding: 8px 32px;
		border-radius: 18px;
	}

	.smartsearch-icon-search {
		left: 8px;
	}

	.smartsearch-icon-voice {
		right: 8px;
	}

	/* Bar Cards */
	.bar-card {
		padding: 12px;
		gap: 12px;
	}

	.bar-card-photo {
		height: 200px !important;
	}

	.bar-hero {
		height: 180px;
		border-radius: 8px;
	}

	.bar-hero-name {
		font-size: 13px;
	}

	.bar-hero-logo {
		width: 44px;
		height: 44px;
		bottom: 10px;
		left: 10px;
	}

	.bar-hero-caption {
		bottom: 10px;
		left: calc(10px + 44px + 8px);
		right: 10px;
		font-size: 11px;
	}

	.bar-hero-pill {
		font-size: 9px;
		padding: 2px 6px;
	}

	/* Sidebar */
	.glass-card {
		width: 100%;
		max-width: 100%;
		padding: 12px 6px 8px 6px !important;
	}

	.info-item {
		font-size: 0.9rem;
		padding: 0.15rem 0.5rem 0.15rem 0.25rem;
		gap: 0.35rem;
	}

	.info-ico {
		width: 16px;
		height: 16px;
		min-width: 16px;
	}

	/* Forms */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	select,
	textarea {
		font-size: 16px; /* Min 16px for mobile usability */
		padding: 8px 6px;
	}

	fieldset.largo input,
	fieldset.corto input {
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Gallery */
	.gallery-main {
		height: 240px;
	}

	.gallery-thumb {
		flex-basis: 60px;
		height: 44px;
	}

	.gallery-counter {
		font-size: 10px;
		padding: 4px 8px;
		bottom: 70px;
		right: 8px;
	}

	/* Buttons */
	input[type="submit"],
	button {
		min-height: 44px;
		min-width: 44px;
		padding: 8px 12px;
		font-size: 12px;
	}

	/* Plates/Servicios */
	ul.servs li {
		width: 48% !important;
		margin: 0 1% 4px !important;
	}

	/* Lists */
	ul.bares:not(.home-featured-track) li a.thumb {
		max-width: 240px;
		margin: 0 auto 8px;
	}

	/* Footer */
	body {
		padding-bottom: 70px;
	}

	#cb-cookie {
		bottom: 70px !important;
	}

	.mobile-dock-item,
	.mobile-dock-toggle {
		min-height: 60px;
		font-size: 10px;
		padding: 4px 2px;
	}

	.mobile-dock-item svg,
	.mobile-dock-toggle svg {
		width: 20px;
		height: 20px;
	}

	/* Cards */
	.ficha-panel {
		border-radius: 12px;
	}

	.ficha-feat-img,
	.ficha-menu-card .ficha-feat-img {
		height: 160px;
	}

	.ficha-feat-body,
	.ficha-menu-body {
		padding: 12px;
	}

	.ficha-feat-title,
	.ficha-menu-title {
		font-size: 14px;
	}

	.bar-card-logo .bar-logo {
		width: 60px;
		height: 60px;
	}

	/* Responsiveness for text */
	h1 {
		font-size: 14px;
		padding: 6px;
	}

	h2 {
		font-size: 14px;
	}

	h3 {
		font-size: 12px;
	}

	/* Carta Module */
	.carta-module {
		padding: 10px;
	}

	.carta-stage-title {
		font-size: 18px;
	}

	.carta-arrow {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}

	.carta-thumb {
		flex-basis: 96px;
		width: 96px;
	}

	.carta-thumb img {
		height: 64px;
	}

	.carta-resource-card {
		padding: 10px;
	}

	/* Ensure touch targets */
	a, button, input[type="button"], input[type="submit"] {
		min-height: 44px;
		display: inline-block;
		padding: 8px 12px;
	}
	
	.menu-item {
		padding: 10px 12px;
		margin: 5px 0;
	}
	.menu-title {
		font-size: 12px;
	}
	.menu-price {
		font-size: 10px;
	}
}

/* ⚠ UN ENLACE QUE SOLO ENVUELVE UNA FOTO NO ES UN BOTÓN DE TEXTO.
   Las reglas de arriba —`a, button, input[...]` con `min-height` y `padding`,
   en ≤480 y otra vez en ≤400— existen para que un enlace de texto se pueda
   pulsar con el dedo, y están bien. Pero pillan a TODOS los `<a>`, incluidos
   los que son solo el marco de una miniatura, y ahí ese relleno se ve como un
   borde de color alrededor de la foto: el contenedor tiene fondo propio
   (`#f0ece7`) y `overflow:hidden`, así que el hueco del padding queda a la
   vista y la imagen parece encogida dentro de un marco.

   Medido a 360px antes de esto: la tarjeta del listado tenía el enlace a
   200×133 y la foto a 178×119 (22×14 de hueco), y la de la barra lateral el
   enlace a 60×60 y la foto a 40×48 (20×12). Se veía solo en móvil, porque las
   reglas que lo causan solo existen ahí.

   No se pierde objetivo táctil: estos enlaces SON la foto, y la más pequeña
   mide 60×60. Por eso también se anula el `min-height`, que si no estiraría
   el marco por debajo de la imagen.

   ⚠ Si algún día se añade otro listado con miniatura, su clase de enlace hay
   que darla de alta AQUÍ. Hoy son las tres que ponen `thumbs()` y
   `minithumbs()`: `thumb`, `eventThumb` y `sv-card-img-link`. */
a.thumb,
a.eventThumb,
a.sv-card-img-link {
	padding: 0 !important;
	min-height: 0 !important;
}

/* ── Móviles muy pequeños (max-width: 400px / 360px) ── */
@media screen and (max-width: 400px) {
	/* Base text sizing */
	body {
		font-size: 11px;
		padding-bottom: 88px;
	}

	/* Header optimizations */
	#header {
		padding: 2px 0;
	}

	#header a.toplogo {
		width: 120px;
	}

	#header a.toplogo img {
		width: 100%;
		height: auto;
	}

	#header #langnav {
		margin: 0 auto 6px;
		gap: 4px;
	}

	#header #langnav a,
	#header #langnav p {
		width: 32px;
		height: 24px;
		min-height: 24px;
	}

	#header #langnav img {
		width: 26px;
		height: 18px;
	}

	/* Navigation */
	#topnav a {
		padding: 6px 8px;
		font-size: 11px;
		line-height: 1.2;
		min-height: 36px;
		border-bottom: 1px solid #f0f0f0;
	}

	#topnav a:last-child {
		border-bottom: none;
	}

	/* Hamburger */
	.hamburger {
		right: 5px;
		top: 5px;
		padding: 4px;
	}

	.hamburger span {
		width: 24px;
		height: 2px;
		margin: 4px 0;
	}

	/* Main H1 */
	h1 {
		font-size: 13px;
		padding: 6px 8px 16px;
		background-size: 100% auto;
	}

	h1 form.sorter {
		gap: 4px;
	}

	h1 form.sorter .jNiceSelectWrapper,
	h1 form.sorter .jNiceSelectWrapper div span {
		width: 140px !important;
		height: 22px !important;
	}

	h1 form.sorter .jNiceSelectWrapper div span {
		padding: 5px 5px 0;
		font-size: 9px;
	}

	h1 form.sorter .jNiceSelectWrapper ul {
		width: 130px !important;
	}

	/* Typography */
	h2 {
		font-size: 13px;
		padding: 0 6px 8px;
	}

	h3 {
		font-size: 11px;
		padding: 0 0 0 6px;
	}

	p {
		font-size: 11px;
		padding: 1px 0;
		margin: 0;
	}

	/* Hero Search */
	.hero-search-bar {
		padding: 10px 6px;
	}

	.smartsearch-input {
		font-size: 12px;
		padding: 7px 28px;
		border-radius: 16px;
	}

	.smartsearch-icon-search {
		left: 6px;
		width: 14px;
		height: 14px;
	}

	.smartsearch-icon-voice {
		right: 6px;
		width: 14px;
		height: 14px;
	}

	.smartsearch-clear {
		right: 32px;
	}

	.smartsearch-dropdown {
		max-height: 250px;
	}

	.smartsearch-dd-item {
		padding: 4px 10px;
		gap: 8px;
		font-size: 11px;
	}

	.smartsearch-dd-item .ss-thumb,
	.smartsearch-dd-item .ss-icon {
		width: 28px;
		height: 28px;
		min-width: 28px;
	}

	/* Bar Cards */
	.bar-card {
		padding: 10px;
		gap: 10px;
		border-radius: 12px;
	}

	.bar-card-photo {
		height: 180px !important;
		border-radius: 8px;
	}

	.bar-hero {
		height: 160px;
		border-radius: 8px;
	}

	.bar-hero-name {
		font-size: 12px;
	}

	.bar-hero-logo {
		width: 40px;
		height: 40px;
		bottom: 8px;
		left: 8px;
	}

	.bar-hero-caption {
		bottom: 8px;
		left: calc(8px + 40px + 6px);
		right: 8px;
		font-size: 10px;
		line-height: 1.2;
	}

	.bar-hero-caption-nolog {
		left: 8px;
	}

	.bar-hero-meta {
		gap: 3px;
	}

	.bar-hero-pill {
		font-size: 8px;
		padding: 1px 4px;
	}

	/* Sidebar */
	.glass-card {
		width: 100%;
		max-width: 100%;
		padding: 10px 4px 6px !important;
		border-radius: 12px;
		gap: 2px;
	}

	.info-item {
		font-size: 0.85rem;
		padding: 0.1rem 0.35rem 0.1rem 0.2rem;
		gap: 0.25rem;
		min-height: 18px;
	}

	.info-label {
		font-size: 0.85rem;
		font-weight: 400;
	}

	.info-ico {
		width: 14px;
		height: 14px;
		border: 1px solid #ffeaea;
		min-width: 14px;
	}

	.fsb-social-track {
		gap: 8px;
		padding: 0;
	}

	.fsb-social-arrow {
		width: 26px;
		height: 26px;
		font-size: 16px;
	}

	.fsb-social-viewport {
		width: 150px;
	}

	.social-icon-link {
		width: 40px;
		height: 40px;
	}

	.social-icon-link img {
		width: 18px;
		height: 18px;
	}

	/* Forms */
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	select,
	textarea {
		font-size: 14px; /* Min 14px for touch screens */
		padding: 6px 4px;
		border-radius: 4px;
	}

	fieldset.largo input,
	fieldset.corto input,
	fieldset.largo select,
	fieldset.corto select {
		width: 100% !important;
		box-sizing: border-box;
	}

	fieldset.largo,
	fieldset.corto {
		padding: 8px;
	}

	/* Buttons */
	input[type="submit"],
	button,
	input[type="button"] {
		min-height: 40px;
		min-width: 40px;
		padding: 6px 10px;
		font-size: 11px;
	}

	/* Gallery */
	.gallery-main {
		height: 220px;
	}

	.gallery-arrow {
		width: 36px;
		height: 36px;
		font-size: 14px;
	}

	.gallery-prev {
		left: 6px;
	}

	.gallery-next {
		right: 6px;
	}

	.gallery-counter {
		font-size: 9px;
		padding: 3px 6px;
		bottom: 66px;
		right: 6px;
	}

	.gallery-thumbs {
		padding: 8px 8px 10px;
		gap: 4px;
	}

	.gallery-thumb {
		flex-basis: 50px;
		height: 36px;
		border-radius: 4px;
	}

	.gallery-lb-arrow {
		width: 36px;
		height: 36px;
	}

	.gallery-lb-thumb {
		flex-basis: 48px;
		height: 32px;
	}

	/* Mobile Dock */
	.mobile-dock {
		left: 0;
		right: 0;
		bottom: 0;
		padding-left: 0;
		padding-right: 0;
		border-radius: 0;
		height: 88px;
	}

	.mobile-dock-nav {
		gap: 0;
	}

	.mobile-dock-item,
	.mobile-dock-toggle {
		font-size: 9px;
		min-height: 54px;
		padding: 3px 2px;
		border-radius: 0;
		gap: 2px;
	}

	.mobile-dock-item svg,
	.mobile-dock-toggle svg {
		width: 18px;
		height: 18px;
	}

	.mobile-dock-sheet {
		left: 6px;
		right: 6px;
		bottom: 74px;
		padding: 10px;
		border-radius: 8px;
	}

	.mobile-dock-sheet-links {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	/* Lists & Lists */
	ul.bares:not(.home-featured-track) li a.thumb {
		max-width: 200px;
		margin: 0 auto 6px;
	}

	ul.servs li {
		width: 100% !important;
		margin: 0 0 3px !important;
	}

	ul.destacados li {
		width: 100% !important;
		margin: 0 0 6px !important;
	}

	ul.minioptions li {
		width: 100% !important;
	}

	/* Cards & Panels */
	.ficha-panel {
		border-radius: 10px;
	}

	.ficha-feat-img,
	.ficha-menu-card .ficha-feat-img {
		height: 140px;
	}

	.ficha-feat-body,
	.ficha-menu-body {
		padding: 10px;
	}

	.ficha-feat-title,
	.ficha-menu-title {
		font-size: 12px;
	}

	.ficha-menu-price-num {
		font-size: 20px;
	}

	.ficha-panel-header {
		padding: 12px 12px 10px;
		font-size: 11px;
	}

	.bar-card-logo {
		margin: 0 0 10px;
	}

	.bar-card-logo .bar-logo {
		width: 52px;
		height: 52px;
		margin: 0 auto;
	}

	.bar-gb-fields {
		padding: 10px;
	}

	.bar-gb-row {
		padding: 8px 0;
	}

	.bar-description {
		padding: 14px;
	}

	/* Carta Module */
	.carta-module {
		padding: 8px;
	}

	.carta-stage-title {
		font-size: 16px;
	}

	.carta-arrow {
		width: 32px;
		height: 32px;
		font-size: 12px;
	}

	.carta-thumb {
		flex-basis: 88px;
		width: 88px;
	}

	.carta-thumb img {
		height: 56px;
	}

	.carta-resource-card {
		padding: 8px;
	}

	/* Ensure proper touch targets */
	a, button, input[type="button"], input[type="submit"], .clickable {
		min-height: 40px;
		display: inline-block;
		padding: 6px 10px;
	}

	/* Footer */
	#footer {
		margin-top: 12px;
		padding: 0 4px 12px;
	}

	#footer div.copyright {
		font-size: 10px;
		line-height: 1.3;
		padding: 0 4px;
	}

	#cb-cookie {
		bottom: 88px !important;
	}

	.menu-item {
		padding: 9px 11px;
		margin: 5px 0;
	}
	.menu-title {
		font-size: 11px;
	}
	.menu-price {
		font-size: 9px;
	}
}

/* ═══════════════════════════════════════════════════════════
 * Smart Search Bar – Responsive (Etapa 34)
 * ═══════════════════════════════════════════════════════════ */

@media screen and (max-width: 980px) {
	.smartsearch-bar-wrapper {
		padding: 20px 10px 16px;
	}
	.smartsearch-container {
		max-width: 100%;
	}
	.smartsearch-input {
		font-size: 15px;
		padding: 11px 44px;
	}
}

@media screen and (max-width: 640px) {
	.smartsearch-bar-wrapper {
		padding: 16px 0 12px;
	}
	.smartsearch-input {
		font-size: 14px;
		padding: 10px 40px;
		border-radius: 22px;
	}
	.smartsearch-icon-search { left: 12px; }
	.smartsearch-icon-voice { right: 12px; }
	.smartsearch-clear { right: 38px; }
	.smartsearch-dropdown {
		max-height: 300px;
	}
	.smartsearch-dd-item {
		padding: 6px 14px;
		gap: 10px;
	}
	.smartsearch-dd-item .ss-thumb,
	.smartsearch-dd-item .ss-icon {
		width: 32px; height: 32px;
	}
	.search-result-thumb {
		width: 56px; height: 42px;
	}
	.search-result-link {
		gap: 10px; padding: 10px 4px;
	}
}

@media screen and (max-width: 400px) {
	.smartsearch-input {
		font-size: 14px;
		padding: 10px 36px;
	}
	.mobile-dock-item,
	.mobile-dock-toggle {
		font-size: 10px;
		min-height: 60px;
		gap: 3px;
	}
	.mobile-dock-item svg,
	.mobile-dock-toggle svg {
		width: 20px;
		height: 20px;
	}
}

/* ════════════════════════════════════════════════════════════════════════
 * FICHAS DEL BUSCADOR INTELIGENTE EN MÓVIL (2026-08-08)
 * ════════════════════════════════════════════════════════════════════════
 * Reportado: «las imágenes de los establecimientos como que están
 * arrinconadas, no me gusta nada cómo quedan; estandariza las fichas».
 *
 * Y no era una impresión: había DOS bloques de móvil peleándose, escritos en
 * momentos distintos y sin saber el uno del otro.
 *
 *   style.css      @600px  →  ficha en COLUMNA, imagen al 100% y 140px de alto
 *   responsive.css @640px  →  imagen de 56×42 (esta gana, va después)
 *
 * De la primera sobrevivía `flex-direction: column` y el `min-height: 140px`;
 * de la segunda, el ancho de 56. Resultado medido: una imagen de **56×140**,
 * un rectángulo estrecho y alto arrinconado arriba a la izquierda de una
 * tarjeta en columna. Ni una cosa ni la otra.
 *
 * Aquí se elige UNA sola forma y se escribe entera: la horizontal —foto a la
 * izquierda, texto a la derecha—, que es la misma lectura que las tarjetas del
 * buscador de locales. Una lista donde se mezclan establecimientos, eventos y
 * platos se recorre con el pulgar, y en horizontal caben más fichas por
 * pantalla sin perder la foto.
 *
 * ⚠ Solo móvil: va dentro de la media. En escritorio la ficha sigue con su
 * foto de 100px a la izquierda, exactamente como estaba.
 */
@media screen and (max-width: 640px) {
	.search-result-link {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding: 0;
	}
	/* Al volver a la horizontal, el filete rojo vuelve a ser vertical (el
	   bloque de 600px lo había puesto en horizontal para la vista en columna). */
	.search-result-link:before {
		width: 5px;
		height: auto;
		top: 0;
		bottom: 0;
	}
	.search-result-thumb {
		width: 92px;
		height: auto;
		min-height: 100%;
		align-self: stretch;
		object-fit: cover;
		flex: 0 0 92px;
	}
	.search-result-info {
		padding: 10px 12px 10px 14px;
		min-width: 0;
	}
	.search-result-title {
		font-size: 14px;
		line-height: 1.25;
	}

	/* ── La lupa se montaba encima del texto ──
	   La caja reserva 40px a cada lado para sus iconos, pero una regla
	   genérica de móvil —`input[type="text"] { padding: 6px 4px }`— le ganaba
	   por especificidad: (0,1,1) contra (0,1,0) de `.smartsearch-input`. Con
	   4px de hueco, la lupa (que está en x 24→38) caía justo encima de la
	   primera letra. Nombrando el `input` se iguala la especificidad y, al ir
	   después, manda esta. */
	input.smartsearch-input,
	input[type="text"].smartsearch-input {
		padding: 11px 40px 11px 40px;
		font-size: 14px;
		min-height: 44px;
		border-radius: 22px;
	}
}

/* ==========================================================================
   LA FICHA DEL ESTABLECIMIENTO, EN MÓVIL — tanda del 2026-08-09
   --------------------------------------------------------------------------
   Cinco cosas que se veían mal en un Samsung S23 (360px). Todo va dentro de
   media queries: el escritorio (≥981px) no entra en ninguna de estas reglas.
   Medido antes en /es/restaurant-amer-cocina-mediterranea, que es la ficha
   que tiene a la vez teléfono, reservas y dos redes sociales.
   ========================================================================== */

@media screen and (max-width: 980px) {

	/* ── 1. El hueco en blanco antes del pie ──────────────────────────────
	   Se medían 663px de nada entre el final del contenido y el pie. La causa
	   no estaba en el contenido sino en la columna lateral: `.sidebar` lleva
	   `min-height: 600px` («asegura espacio para sticky»), que tiene sentido
	   en el escritorio, donde la columna va flotando al lado. En móvil la
	   columna se apila debajo y su único hijo —`.fsb-sticky-wrap.fsb-desktop`—
	   está oculto, así que quedaban 600px reservados para nada.
	   Se anula solo aquí. Donde la columna sí lleva contenido en móvil (la
	   portada, el buscador) no cambia nada: sigue midiendo lo que ocupe. */
	.sidebar {
		min-height: 0;
	}

	/* ── 2. Los iconos del bloque «Información» ───────────────────────────
	   El icono se veía por encima de su círculo rojo y el círculo caído.
	   Es otra vez la trampa nº1, la regla heredada de 2009:
	     .content span:not(...)  →  padding: 0 0 12px    especificidad 0,17,1
	     .info-ico               →  padding: 0           especificidad 0,1,0
	   Ganaba la vieja, así que el span se llevaba 12px de relleno abajo: el
	   fondo redondo se estiraba hacia abajo mientras el icono seguía centrado
	   en la caja de contenido, 6px más arriba. Justo el desfase medido.
	   Encima el círculo se había ido quedando en 14×18 y el SVG, declarado
	   24×24, se aplastaba a 12×14.
	   Se arregla como ya hace el resto del proyecto con esa regla: nombrando
	   el `span` y con `!important`, que es lo único que la vence. */
	.info-item .info-ico,
	.content span.info-ico {
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
		min-height: 26px !important;
		padding: 0 !important;
		border: 1.5px solid #ffeaea;
		border-radius: 50%;
		box-sizing: border-box;
		flex-shrink: 0;
		align-self: center;
	}
	.info-item .info-ico svg,
	.info-item .info-ico img,
	.content span.info-ico svg,
	.content span.info-ico img {
		width: 15px !important;
		height: 15px !important;
		flex-shrink: 0;
	}
	/* La etiqueta es otro `span`, y la regla vieja le metía el mismo relleno
	   fantasma abajo: engordaba cada fila y descuadraba el texto. */
	.info-item .info-label,
	.content span.info-label {
		padding: 0 !important;
		line-height: 1.35;
	}
	.info-item {
		align-items: center;
		gap: 9px;
		min-height: 34px;
	}

	/* ── 3. Las redes sociales del establecimiento ────────────────────────
	   Se veía «un circulito pequeño con la f mal colocada». El bloque es un
	   carrusel pensado para la columna del escritorio: dos flechas de 40px y
	   un visor de ancho FIJO (150px en móvil). Resultado en 360px: de 334px
	   disponibles, 80 se los comían las flechas y solo cabían dos iconos y
	   medio de los cuatro que tiene esta ficha.
	   En móvil no hace falta carrusel: cinco redes a 44px caben de sobra. Se
	   ocultan las flechas y los iconos se centran. El JS del carrusel solo
	   pone y quita `disabled` a esos botones, así que ocultarlos no rompe
	   nada. */
	.fsb-social-arrow {
		display: none !important;   /* movil-ok: las flechas del carrusel de redes; en movil caben las cinco y no hay carrusel */
	}
	.fsb-social-viewport {
		width: auto !important;
		max-width: 100%;
		flex: 1 1 auto;
		overflow: visible;
	}
	.fsb-social-track {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		overflow: visible;
	}
	.fsb-social-container {
		flex-wrap: wrap;
		gap: 0;
	}
	/* 44px es el objetivo táctil mínimo; el icono sube a 22 para que no se
	   quede perdido dentro del círculo. */
	.social-icon-link {
		width: 44px !important;
		height: 44px !important;
		padding: 0 !important;
		flex-shrink: 0;
	}
	.social-icon-link img {
		width: 22px !important;
		height: 22px !important;
	}
}

@media screen and (max-width: 640px) {

	/* ── 4. «Quiero ir» y «Ya he ido» partían la palabra en dos líneas ────
	   Las tres píldoras piden 354,5px (108,2 + 110,8 + 115,5 más 20 de hueco)
	   y en un S23 solo hay 344. Al ser un flex sin `nowrap`, en vez de
	   desbordar encogían, y el texto se partía: «Quiero» arriba, «ir» abajo.
	   Se recorta el relleno de 16 a 12 por lado (24px recuperados) y el hueco
	   de 10 a 8: pasan a pedir 325 y entran en una sola línea.
	   El `flex-wrap: wrap` es el seguro: si en una pantalla aún más estrecha
	   no cupieran, salta la píldora entera a la fila de abajo, pero la
	   palabra nunca se parte. */
	.bar-share-bar {
		flex-wrap: wrap;
		gap: 8px;
		row-gap: 8px;
	}
	.bar-share-btn,
	.content span.bar-share-btn {
		white-space: nowrap;
		padding: 0 12px !important;
		min-height: 40px;
		font-size: 12px;
		gap: 6px;
		flex: 0 0 auto;
		justify-content: center;
	}
	.bar-share-btn svg {
		flex-shrink: 0;
	}

	/* ── 5. El botón de acción se comía el hero ───────────────────────────
	   Medido en 360px: el nombre del local iba a 12px y el botón «Llamar
	   ahora / Reservar mesa» a 12,5px. El botón era literalmente más grande
	   que el nombre del establecimiento, y al lado del logo de 40px quedaba
	   desproporcionado.
	   Se invierte la jerarquía: el nombre pasa a 15px (14 por debajo de 400) y
	   el logo a 52px, mientras el botón baja a 11px y de 154 a 126px de ancho.
	   El alto acaba en 40 y no en los 32 que se piden aquí, porque la regla
	   genérica de móvil `a { min-height: 40px }` gana a `height` — y está
	   bien que gane: 40px es el objetivo táctil. El hero crece a 180px para
	   que la foto no quede aplastada por el texto. */
	.bar-hero {
		height: 180px;
	}
	.bar-hero-logo {
		width: 52px;
		height: 52px;
		bottom: 10px;
		left: 10px;
	}
	.bar-hero-caption {
		bottom: 10px;
		left: calc(10px + 52px + 10px);
		right: 10px;
	}
	.bar-hero-caption-nolog {
		left: 10px;
	}
	.bar-hero-name {
		font-size: 15px;
		margin-bottom: 2px;
	}
	.bar-hero-type {
		font-size: 10px;
		letter-spacing: 0.6px;
		margin-bottom: 6px;
	}
	.bar-hero-cta {
		height: 32px;
		padding: 0 14px;
		font-size: 11px;
		letter-spacing: 0.02em;
		margin-top: 0;
	}
	/* Preparado para cuando el hero muestre más de una acción a la vez
	   (reservar + llamar + web): se colocan en fila y saltan de línea
	   enteras, nunca partiendo el texto. */
	.bar-hero-acciones {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px;
	}

	/* ── Las acciones del hero, en el móvil ──────────────────────────────
	   Las dos píldoras con texto pedían 252 de los 262 de ancho útil: no
	   dejaban respirar ni al logo ni a la foto. Se deja UNA acción con
	   texto —reservar, que es a lo que se viene— y llamar se queda en un
	   botón redondo con el auricular, como en Google Maps o TheFork.

	   ⚠ El alto sigue siendo 40px y no se baja: lo manda la regla de
	   tamaño mínimo para el dedo de más abajo en este mismo fichero. Lo
	   que se recupera es ANCHO. Un botón más bajo se pulsa peor.

	   ⚠ Solo cuando hay DOS (`.bar-hero-acciones-dos`, que pone locales.php).
	   Si el local únicamente tiene teléfono, «Llamar» conserva su texto:
	   un icono suelto, sin nada al lado con que compararlo, no se entiende. */
	.bar-hero-cta-ico {
		display: block;
		width: 15px;
		height: 15px;
		flex: 0 0 auto;
	}
	.bar-hero-cta .bar-hero-cta-txt { margin-left: 7px; }

	/* ⚠ Sin MAYÚSCULAS y sin espaciado entre letras. No es capricho: era la
	   ÚNICA píldora de la ficha que gritaba —«Quiero ir», «Ya he ido»,
	   «Compartir», «Abrir en Google Maps» y las del bloque Información van
	   todas en minúscula—, así que además de desentonar pedía 124px solo de
	   texto. En caja normal cabe más grande (12px en vez de 11) y se lee
	   mejor: la fila pasa de 252px a 188px de los 262 disponibles. */
	.bar-hero-cta {
		text-transform: none;
		letter-spacing: 0;
		font-size: 12px;
		padding: 0 13px;
	}

	.bar-hero-acciones-dos .bar-hero-cta-tel {
		flex: 0 0 40px;
		width: 40px;
		padding: 0;
		border-radius: 50%;
	}
	.bar-hero-acciones-dos .bar-hero-cta-tel .bar-hero-cta-txt { display: none; }   /* movil-ok: el texto de «Llamar» SOLO cuando hay dos acciones; queda el auricular, y el otro boton si lleva texto con el que compararlo */
	.bar-hero-acciones-dos .bar-hero-cta-tel .bar-hero-cta-ico {
		width: 17px;
		height: 17px;
		margin: 0;
	}
}

/* En el escritorio los botones se quedan EXACTAMENTE como estaban: solo
   texto, sin icono. El icono es cosa del móvil, donde hace falta el sitio. */
@media screen and (min-width: 641px) {
	.bar-hero-cta-ico { display: none; }
}

@media screen and (max-width: 400px) {

	/* En un S23 (360px) lo de arriba ya entra. Esto es para los 320px, donde
	   las tres píldoras se quedaban a 21px de caber: bajando la letra a 11px
	   y el relleno a 10 piden 295 de los 304 disponibles. */
	.bar-share-bar {
		gap: 6px;
	}
	.bar-share-btn,
	.content span.bar-share-btn {
		padding: 0 10px !important;
		font-size: 11px;
		gap: 5px;
	}
	.bar-hero-name {
		font-size: 14px;
	}
}

@media screen and (max-width: 640px) {

	/* ── Botones de «Sin resultados»: 40px es poco para el dedo ───────────
	   Medido a 360px: «Buscar con filtros avanzados» 251×40 y «Volver al
	   inicio» 152×40, los dos por debajo del mínimo táctil de 44. Y son
	   justamente los dos botones que le quedan a alguien que NO ha encontrado
	   lo que buscaba: es el peor sitio para poner un botón difícil de acertar.
	   Solo móvil; en escritorio se quedan en 38 y 38 como estaban. */
	.search-no-btn-primary,
	.search-no-btn-secondary {
		min-height: 44px;
		justify-content: center;
	}
	/* A 360 los dos caben en fila (251 + 152 + 12 no); van uno debajo de otro
	   y ocupando el ancho, que es lo que ya hacía el `flex-wrap`, pero sin
	   quedarse a medias. */
	.search-no-actions {
		width: 100%;
	}
	.search-no-actions > a {
		flex: 1 1 100%;
	}
}

@media screen and (max-width: 640px) {

	/* ── El buscador de eventos, a dedo ───────────────────────────────────
	   Sus campos medían 38px y el botón 40, por debajo de los 44 que necesita
	   un dedo. Se igualan a los del resto de buscadores del sitio, que ya
	   estaban corregidos. `!important` porque la regla de `.buscador-box` que
	   los fija en 38 también lo lleva. */
	.buscador-box .bf-field select,
	.buscador-box .bf-field input[type="text"],
	.buscador-box .bf-field .flatpickr-input,
	.buscador-box .bf-field div select {
		height: 44px !important;
		line-height: 44px !important;
	}
	.bf-submit input[type="submit"] {
		min-height: 44px;
	}
	/* La barra de «Ordenar por» de eventos: el desplegable y el botón, igual
	   que en el buscador de locales. */
	.content form.sorter select,
	.content form.sorter input[type="submit"] {
		min-height: 44px;
	}
}