/**
 * Frikimart — ficha de negocio (spec.md sección 4.3, F2).
 *
 * Se encola SOLO en single-fm_negocio.php (frikimart/functions.php),
 * nunca en el resto del sitio (spec.md sección 14: sin CSS de más).
 * Usa los tokens de main.css (:root) y sigue la paleta/tipografía y el
 * layout de docs/diseno/Ficha.dc.html (celular) y
 * docs/diseno/FichaEscritorio.dc.html (escritorio, min-width: 1024px).
 *
 * Mobile-first: todo lo de abajo es el layout de celular; el bloque final
 * @media (min-width: 1024px) reacomoda a dos columnas como en el mockup de
 * escritorio.
 */

.fm-ficha {
	display: block;
}

/* -------------------------------------------------------------------- */
/* Portada + logo                                                        */
/* -------------------------------------------------------------------- */

.fm-ficha-portada {
	position: relative;
	/* aspect-ratio en vez de un alto fijo: con alto fijo, en escritorio
	   (mucho más ancho) la portada se veía como una franja angosta
	   estirada horizontalmente. Proporción parecida a la portada de
	   Facebook en celular; el ancho real lo decide el contenedor, el alto
	   lo calcula el navegador a partir de esta proporción, con un tope para
	   que no crezca sin límite en pantallas muy anchas (ver también el
	   ajuste de escritorio, más abajo). */
	aspect-ratio: 2.2 / 1;
	max-height: 220px;
	border-bottom: 2px solid var(--fm-color-texto);
}

/* Recorta SOLO la foto/placeholder de portada — el logo (bottom negativo,
   se asoma fuera del banner) es hermano de esto, no hijo, para no
   recortarse también. Antes .fm-ficha-portada tenía overflow:hidden
   directamente y el logo quedaba adentro, así que se veía cortado por la
   mitad (reportado por Fabi). */
.fm-ficha-portada-recorte {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background-color: var(--fm-color-rosa-claro);
}

.fm-ficha-portada-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Placeholder mientras no hay ilustración real de Atreyu (gato mascota):
   bloque de color de marca, documentado en single-fm_negocio.php. */
.fm-ficha-portada-placeholder {
	width: 100%;
	height: 100%;
	background-color: var(--fm-color-rosa-claro);
	background-image: radial-gradient(rgba(214, 24, 122, 0.28) 1.4px, transparent 1.8px);
	background-size: 12px 12px;
}

/* Mismo max-width/padding que .fm-contenedor (main.css): marco invisible
   (sin fondo ni altura propia) que le da al logo un punto de referencia
   alineado con el resto del contenido, en vez del banner de portada
   (ancho completo, sin max-width). */
.fm-ficha-portada-marco {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--fm-espacio-sm);
}

.fm-ficha-logo {
	position: absolute;
	left: var(--fm-espacio-sm);
	bottom: -44px;
	width: 96px;
	height: 96px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 3px solid var(--fm-color-texto);
	border-radius: 18px;
	background: var(--fm-color-blanco);
	box-shadow: 4px 4px 0 var(--fm-color-texto);
	overflow: hidden;
}

.fm-ficha-logo-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fm-ficha-logo-placeholder {
	font-family: var(--fm-fuente-display);
	font-size: 34px;
	color: var(--fm-color-acento);
}

/* -------------------------------------------------------------------- */
/* Layout de la ficha: FLEXBOX, no un grid de áreas compartidas.         */
/*                                                                        */
/* La versión anterior usaba un solo CSS Grid de 2 columnas donde cada    */
/* sección ocupaba una fila nombrada — eso obligaba a que filas SIN       */
/* relación compartieran alto entre columnas (el alto de "Sobre el        */
/* negocio" dependía de qué tan alta fuera la tarjeta de "Cómo llegar" de  */
/* al lado) y, cuando dos secciones compartían una misma área para         */
/* ahorrar espacio, se ENCIMABAN en vez de apilarse (dos bugs reales       */
/* reportados por Fabi). Flexbox de una sola columna no tiene ese          */
/* problema: cada item se apila según su propio alto, sin "filas"          */
/* compartidas entre columnas.                                             */
/*                                                                          */
/* Celular: .fm-ficha-principal y .fm-ficha-barra-lateral son               */
/* `display: contents` (invisibles) — cada sección se vuelve un hijo        */
/* directo de .fm-ficha-grid (flex, una columna), y el `order` explícito    */
/* de cada .fm-area-* decide el orden visual (ver bloque de abajo),         */
/* independiente de en qué wrapper viva cada una en el PHP.                 */
/*                                                                           */
/* Escritorio (@media min-width: 1024px, más abajo): ambos wrappers se       */
/* vuelven CAJAS REALES (flex, columna) una al lado de la otra — cada una    */
/* con su PROPIO alto, sin ninguna fila compartida con la otra columna.      */
/* -------------------------------------------------------------------- */

.fm-ficha-grid {
	padding-top: 48px;
	padding-bottom: var(--fm-espacio-lg);
	display: flex;
	flex-direction: column;
	gap: var(--fm-espacio-md);
}

.fm-ficha-principal,
.fm-ficha-barra-lateral,
.fm-ficha-info-tienda {
	display: contents;
}

.fm-ficha-contacto {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: var(--fm-espacio-sm);
	padding: var(--fm-espacio-md);
	border: 2px solid var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	background: var(--fm-color-blanco);
	box-shadow: 5px 5px 0 var(--fm-color-texto);
}

/**
 * Orden visual en celular (una sola columna, docs/diseno/Ficha.dc.html):
 * Nekodex ahora es su propia tarjeta, justo después del nombre (Fabi: ya
 * no debe compartir tarjeta con estado/dirección/botones). Las 3 posibles
 * secciones de "etiquetas" (productos/franquicias/otras) comparten el
 * mismo `order` — en un flex de una sola columna, varios items con el
 * mismo valor simplemente se apilan en su orden natural del documento, a
 * diferencia de un grid-area compartida (ahí sí se encimaban).
 */
.fm-area-categoria   { order: 1; }
.fm-area-titulo      { order: 2; }
.fm-area-nekodex     { order: 3; }
.fm-area-contacto    { order: 4; }
.fm-area-descripcion { order: 5; }
.fm-area-etiquetas   { order: 6; }
.fm-area-galeria     { order: 7; }
.fm-area-eventos     { order: 8; }
.fm-area-horario     { order: 9; }
.fm-area-comprar     { order: 10; }
.fm-area-resenas     { order: 11; }
.fm-area-mapa        { order: 12; }
.fm-area-verificado  { order: 13; }
.fm-area-similares   { order: 14; }
.fm-area-reclamar    { order: 15; }

.fm-ficha-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* .fm-chip vive en main.css (sitewide, siempre cargado antes que esta hoja)
   — la copia que había aquí ganaba la cascada sobre el fondo de
   .fm-chip--urgencia (misma especificidad, esta hoja carga después) sin
   tocar su color de texto blanco, dejando las etiquetas "Quedan X"/"Vence
   pronto" en blanco sobre blanco e ilegibles. */

.fm-chip--categoria {
	background: #22c7e6;
}

.fm-chip--oscuro {
	border-color: var(--fm-color-texto);
	background: var(--fm-color-texto);
	color: var(--fm-color-fondo);
}

.fm-ficha-titulo-fila {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--fm-espacio-sm);
}

.fm-ficha-titulo {
	margin: 0;
	font-family: var(--fm-fuente-display);
	font-weight: 400;
	font-size: 1.9rem;
	line-height: 1.12;
}

/**
 * Botón de corazón (favorito, Bloque C, F6-continuación) — nunca "estrella".
 * Visible siempre, con o sin sesión: sin sesión es un <a>, con sesión un
 * <button> togleado por assets/js/favoritos.js. Mismo lenguaje visual que
 * .fm-ficha-boton (borde 2px + sombra cómic) pero circular, para distinguirlo
 * de los botones de acción (WhatsApp/Cómo llegar/Instagram).
 */
.fm-ficha-boton-favorito {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 50%;
	background: var(--fm-color-blanco);
	box-shadow: 2px 2px 0 var(--fm-color-texto);
	color: var(--fm-color-texto);
	cursor: pointer;
	text-decoration: none;
}

/* Bloque I.4: conteo de fans que ya guardaron esta tienda como favorita. */
.fm-ficha-boton-favorito-conteo {
	position: absolute;
	bottom: -6px;
	right: -6px;
	min-width: 18px;
	padding: 0 4px;
	border: 2px solid var(--fm-color-blanco);
	border-radius: 999px;
	background: var(--fm-color-texto);
	color: var(--fm-color-blanco);
	font-size: 0.65rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}

.fm-ficha-boton-favorito .fm-icono-corazon {
	width: 22px;
	height: 22px;
}

.fm-ficha-boton-favorito--activo {
	background: var(--fm-color-acento);
	border-color: var(--fm-color-acento);
	color: var(--fm-color-blanco);
}

.fm-ficha-boton-favorito:disabled {
	opacity: 0.6;
	cursor: default;
}

.fm-ficha-estado {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 0.9rem;
}

.fm-ficha-estado-punto {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.fm-ficha-estado-punto--abierto {
	background: var(--fm-color-exito);
}

.fm-ficha-estado-punto--cerrado {
	background: var(--fm-color-gris);
}

.fm-ficha-estado-punto--desconocido {
	background: var(--fm-color-rosa-claro);
	border: 2px solid var(--fm-color-gris);
}

.fm-ficha-estado-detalle {
	font-weight: 500;
	color: var(--fm-color-gris);
}

.fm-ficha-direccion {
	margin: 0;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--fm-color-gris);
}

.fm-ficha-botones {
	display: grid;
	/* 2 columnas, no 3: "Cómo llegar" se quitó de aquí (quedaba duplicado
	   con el botón de la sección "Cómo llegar" de más abajo, que ya trae
	   el mapa junto) — ahora el máximo son 2 botones (WhatsApp/Instagram). */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 4px;
}

.fm-ficha-boton {
	height: 76px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 16px;
	box-shadow: 3px 3px 0 var(--fm-color-texto);
	font-family: var(--fm-fuente-texto);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	text-align: center;
}

.fm-ficha-boton--whatsapp {
	background: var(--fm-color-acento);
	color: var(--fm-color-blanco);
}

.fm-ficha-boton--maps {
	background: var(--fm-color-texto);
	color: var(--fm-color-fondo);
}

.fm-ficha-boton--instagram,
.fm-ficha-boton--web {
	background: var(--fm-color-blanco);
	color: var(--fm-color-texto);
}

/* .fm-ficha-cupon*: retirado — el cupón de la ficha ahora usa el mismo
   componente .fm-cupon-tarjeta que el resto del sitio (main.css), ver
   single-fm_negocio.php. */
/**
 * Sección "Nekodex" (cupón + adelanto bloqueado + "Registrar visita"):
 * Fabi pidió que tuviera su propia tarjeta, no un borde-divisor plano como
 * las secciones del cuerpo — mismo lenguaje de tarjeta que .fm-ficha-contacto
 * (borde 2px + sombra cómic), en mobile y escritorio por igual.
 */
.fm-ficha-nekodex {
	padding: var(--fm-espacio-md);
	border: 2px solid var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	background: var(--fm-color-fondo);
	box-shadow: 4px 4px 0 var(--fm-color-texto);
	display: flex;
	flex-direction: column;
	gap: var(--fm-espacio-sm);
}

.fm-ficha-nekodex .fm-cupon-tarjeta {
	width: 100%;
}

/* -------------------------------------------------------------------- */
/* Cuerpo: secciones debajo del pliegue                                  */
/* -------------------------------------------------------------------- */

.fm-ficha-seccion {
	padding: var(--fm-espacio-lg) 0;
	border-top: 2px solid var(--fm-color-texto);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.fm-ficha-seccion--acento {
	background: #ddf6fb;
	margin: 0 calc(var(--fm-espacio-sm) * -1);
	padding-left: var(--fm-espacio-sm);
	padding-right: var(--fm-espacio-sm);
}

.fm-ficha-seccion-titulo {
	margin: 0;
	font-family: var(--fm-fuente-titulos);
	font-weight: 800;
	font-size: 1.35rem;
}

.fm-ficha-descripcion {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--fm-color-gris);
}

.fm-ficha-aviso {
	margin: 0;
	padding: var(--fm-espacio-md);
	border: 2px dashed var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	font-size: 0.95rem;
	color: var(--fm-color-gris);
}

.fm-ficha-galeria {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.fm-ficha-galeria-img {
	display: block;
	width: 100%;
	height: 108px;
	object-fit: cover;
	border: 2px solid var(--fm-color-texto);
	border-radius: 12px;
}

/* Cada foto es un <button> (abre el modal de galería), no un <img> suelto
   — se le quita la apariencia nativa de botón para que se vea igual que
   antes. */
.fm-ficha-galeria-item {
	display: block;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

/* -------------------------------------------------------------------- */
/* Modal de la galería de fotos (fm_theme_render_modal_galeria()) — mismo  */
/* patrón de apertura/cierre que .fm-modal-cupon (nekodex.css), pero con   */
/* su propio CSS aquí: esta plantilla no siempre carga nekodex.css.        */
/* -------------------------------------------------------------------- */

.fm-modal-galeria[hidden] {
	display: none;
}

.fm-modal-galeria {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.fm-modal-galeria__fondo {
	position: absolute;
	inset: 0;
	background: rgba(28, 20, 38, 0.85);
}

.fm-modal-galeria__caja {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(900px, 92vw);
	max-height: 90vh;
}

.fm-modal-galeria__imagen {
	display: block;
	max-width: 100%;
	max-height: 90vh;
	border: 2px solid var(--fm-color-blanco);
	border-radius: var(--fm-radio-borde);
	object-fit: contain;
	background: var(--fm-color-texto);
}

.fm-modal-galeria__cerrar {
	position: absolute;
	top: -44px;
	right: 0;
	width: 36px;
	height: 36px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 50%;
	background: var(--fm-color-blanco);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
}

.fm-modal-galeria__nav {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 50%;
	background: var(--fm-color-blanco);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 639px) {
	/* En celular los botones de navegación se ven encima de la imagen en
	   vez de a los lados (no caben ambos lados + imagen en pantallas
	   angostas). */
	.fm-modal-galeria__caja {
		flex-direction: column;
	}

	.fm-modal-galeria__nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}

	.fm-modal-galeria__anterior {
		left: 8px;
	}

	.fm-modal-galeria__siguiente {
		right: 8px;
	}
}

.fm-ficha-horario {
	border: 2px solid var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	background: var(--fm-color-blanco);
	overflow: hidden;
}

.fm-ficha-horario-fila {
	display: flex;
	justify-content: space-between;
	padding: 11px 14px;
	border-bottom: 1px solid #e8dfd2;
	font-size: 0.95rem;
}

.fm-ficha-horario-fila:last-child {
	border-bottom: 0;
}

.fm-ficha-horario-dia {
	font-weight: 700;
}

.fm-ficha-horario-horas {
	color: var(--fm-color-gris);
}

.fm-ficha-horario-notas {
	margin: 0;
	font-size: 0.85rem;
	color: var(--fm-color-gris);
}

/* -------------------------------------------------------------------- */
/* Próximos eventos (F4): misma tarjeta .fm-evento-tarjeta que usan la     */
/* portada (front-page.css) y la Agenda (agenda.css) — se declara también  */
/* aquí porque ficha.css es la única hoja que carga en single-fm_negocio.php */
/* y cada plantilla solo encola lo que usa (spec.md sección 14). Aquí se   */
/* pinta sin enlace (fm_theme_render_tarjeta_evento($instancia, false)):   */
/* no tiene sentido enlazar a la ficha en la que ya se está.               */
/* -------------------------------------------------------------------- */

.fm-ficha-eventos-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fm-evento-tarjeta {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	border: 2px solid var(--fm-color-texto);
	border-radius: 16px;
	background: var(--fm-color-blanco);
	box-shadow: 3px 3px 0 var(--fm-color-texto);
	text-decoration: none;
	color: var(--fm-color-texto);
}

.fm-evento-tarjeta-fecha {
	width: 58px;
	height: 64px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--fm-color-texto);
	color: var(--fm-color-fondo);
}

.fm-evento-tarjeta-dia {
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 1px;
}

.fm-evento-tarjeta-num {
	font-family: var(--fm-fuente-titulos);
	font-weight: 800;
	font-size: 1.5rem;
	line-height: 1;
}

.fm-evento-tarjeta-mes {
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 1px;
	color: #22c7e6;
}

.fm-evento-tarjeta-texto {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.fm-evento-tarjeta-titulo {
	font-family: var(--fm-fuente-titulos);
	font-weight: 800;
	font-size: 1.05rem;
	line-height: 1.2;
}

.fm-evento-tarjeta-lugar {
	font-size: 0.9rem;
	color: var(--fm-color-gris);
}

.fm-evento-tarjeta-hora {
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--fm-color-acento);
}

.fm-ficha-mapa-placeholder {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: var(--fm-espacio-md);
	border: 2px dashed var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	background: #efe7da;
}

.fm-ficha-verificado {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--fm-color-gris);
}

.fm-ficha-similares {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 8px;
	/* Defensivo: aunque overflow-x:auto ya debería darle ancho mínimo 0
	   para efectos de layout, algunos navegadores (sobre todo versiones
	   viejas de Safari/iOS) no lo aplican de forma consistente — esto
	   evita que la franja de scroll horizontal empuje el ancho de toda la
	   página (reportado por Fabi en "Tiendas cerca"). */
	min-width: 0;
}

.fm-ficha-similar {
	width: 200px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	border: 2px solid var(--fm-color-texto);
	border-radius: 16px;
	background: var(--fm-color-blanco);
	box-shadow: 3px 3px 0 var(--fm-color-texto);
	overflow: hidden;
	text-decoration: none;
	color: var(--fm-color-texto);
}

.fm-ficha-similar-img {
	height: 90px;
	border-bottom: 2px solid var(--fm-color-texto);
	background-color: var(--fm-color-rosa-claro);
	overflow: hidden;
}

.fm-ficha-similar-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.fm-ficha-similar-texto {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.fm-ficha-similar-nombre {
	font-family: var(--fm-fuente-titulos);
	font-weight: 800;
	font-size: 1rem;
}

.fm-ficha-similar-cat {
	font-size: 0.8rem;
	color: var(--fm-color-gris);
}

.fm-ficha-seccion--reclamar {
	gap: 10px;
}

.fm-ficha-enlace-reclamar {
	display: flex;
	min-height: 48px;
	align-items: center;
	justify-content: center;
	border: 2px dashed var(--fm-color-texto);
	border-radius: var(--fm-radio-borde);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--fm-color-texto);
	text-decoration: none;
	text-align: center;
}

/* -------------------------------------------------------------------- */
/* Escritorio (docs/diseno/FichaEscritorio.dc.html)                      */
/*                                                                        */
/* Dos columnas: contenido (izquierda, flexible) + barra lateral          */
/* (derecha, 400px). "Similares cerca" queda a todo lo ancho, abajo.      */
/* La tarjeta de contacto (estado+dirección+botones+cupón) y la tarjeta   */
/* de horario+cómo-comprar dejan de ser `display: contents` y se          */
/* convierten en las tarjetas reales de la barra lateral; el resto de     */
/* los .fm-area-* solo cambian de posición en el grid.                    */
/* -------------------------------------------------------------------- */

@media (min-width: 1024px) {
	/* Dos cajas reales lado a lado (flex-row), NO un grid de 2 columnas
	   con filas nombradas compartidas — ver nota grande al inicio del
	   archivo sobre por qué se cambió. */
	.fm-ficha-grid {
		padding-top: 72px;
		padding-bottom: 64px;
		padding-left: var(--fm-espacio-lg);
		padding-right: var(--fm-espacio-lg);
		flex-direction: row;
		flex-wrap: wrap;
		column-gap: 48px;
		row-gap: var(--fm-espacio-lg);
		align-items: flex-start;
	}

	.fm-ficha-principal,
	.fm-ficha-barra-lateral,
	.fm-ficha-info-tienda {
		display: flex;
		flex-direction: column;
		gap: var(--fm-espacio-md);
	}

	.fm-ficha-principal {
		flex: 1;
		min-width: 0;
	}

	.fm-ficha-barra-lateral {
		width: 400px;
		flex-shrink: 0;
	}

	/* "Similares cerca" ocupa todo el ancho, abajo de las 2 columnas —
	   flex-basis:100% fuerza el salto de línea dentro del flex-wrap del
	   contenedor padre (.fm-ficha-grid). */
	.fm-area-similares {
		flex-basis: 100%;
	}

	/* Reset de las secciones del cuerpo (ya no necesitan línea separadora
	   ni padding vertical del flujo de celular, el espacio lo da el `gap`
	   de cada columna) — DEBE ir ANTES de las tarjetas de abajo
	   (.fm-ficha-info-tienda, .fm-area-mapa): con la misma especificidad,
	   la regla que carga DESPUÉS gana, y antes este reset (que vivía
	   después en el archivo) le ganaba el `padding` a la tarjeta de "Cómo
	   llegar", dejándola sin padding aunque sí con borde/sombra (reportado
	   por Fabi: el contenido pegado a las orillas de una tarjeta que
	   claramente tenía borde).
	   */
	.fm-ficha-seccion {
		padding: 0;
		border-top: 0;
	}

	/* Orden DENTRO de la barra lateral — distinto del `order` de celular
	   (ahí "mapa" va después de horario/comprar/reseñas; aquí va justo
	   después de "contacto", como en el mockup de escritorio). Mismas
	   clases, valores nuevos: por especificidad igual, la regla de esta
	   media query (que carga después) gana sobre la regla base de arriba. */
	.fm-area-nekodex     { order: 1; }
	.fm-area-contacto    { order: 2; }
	.fm-area-mapa        { order: 3; }
	.fm-area-info-tienda { order: 4; }
	.fm-area-verificado  { order: 5; }
	.fm-area-reclamar    { order: 6; }

	.fm-ficha-info-tienda {
		padding: var(--fm-espacio-md);
		border: 2px solid var(--fm-color-texto);
		border-radius: var(--fm-radio-borde);
		background: var(--fm-color-blanco);
		box-shadow: 6px 6px 0 var(--fm-color-texto);
	}

	.fm-area-mapa {
		padding: var(--fm-espacio-md);
		border: 2px solid var(--fm-color-texto);
		border-radius: var(--fm-radio-borde);
		background: var(--fm-color-blanco);
		box-shadow: 6px 6px 0 var(--fm-color-texto);
	}

	.fm-ficha-titulo {
		font-size: 3.25rem;
	}

	.fm-ficha-descripcion {
		max-width: 640px;
	}

	/* En celular los botones van en varias columnas (ver regla base, con
	   minmax(0,1fr) — NO "1fr" suelto, mismo motivo que .fm-ficha-grid
	   más arriba); aquí, dentro de la tarjeta de contacto, van uno debajo
	   de otro a todo lo ancho. */
	.fm-ficha-botones {
		grid-template-columns: minmax(0, 1fr);
	}

	.fm-ficha-boton {
		height: 56px;
	}

	.fm-ficha-galeria {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.fm-ficha-galeria-img {
		height: 150px;
	}

	.fm-ficha-seccion--acento {
		margin: 0;
		padding: var(--fm-espacio-md);
		border-radius: var(--fm-radio-borde);
	}

	.fm-ficha-similares {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		overflow-x: visible;
		padding-bottom: 0;
	}

	.fm-ficha-similar {
		width: auto;
	}

	/* Portada y logo, proporción más ancha tipo Facebook PC (ver regla
	   base, arriba). A partir de este ancho la portada deja de ser de
	   borde a borde: se centra con el mismo max-width que el resto del
	   contenido, con esquinas redondeadas y borde completo (antes solo
	   tenía border-bottom, pensado para cuando era de borde a borde) —
	   Fabi: "si el viewport es más ancho que el cover" debe verse así. */
	.fm-ficha-portada {
		aspect-ratio: 3.5 / 1;
		max-height: 340px;
		max-width: 1200px;
		margin: 0 auto;
		border: 2px solid var(--fm-color-texto);
		border-radius: var(--fm-radio-borde);
	}

	/* border-radius también en el envoltorio que recorta la foto (ya tenía
	   overflow:hidden) — si no, la imagen seguiría con esquinas cuadradas
	   aunque .fm-ficha-portada ya las tenga redondeadas. */
	.fm-ficha-portada-recorte {
		border-radius: var(--fm-radio-borde);
	}

	.fm-ficha-portada-marco {
		padding: 0 var(--fm-espacio-lg);
	}

	.fm-ficha-logo {
		width: 140px;
		height: 140px;
		bottom: -60px;
	}

	.fm-ficha-logo-placeholder {
		font-size: 48px;
	}
}

/* ------------------------------------------------------------------
   Reseñas (template-parts/resenas.php). Las estrellas son el ícono
   Font Awesome autohospedado (assets/img/iconos/estrella.svg); las vacías
   van en gris suave y las llenas en el color de acento.
   ------------------------------------------------------------------ */
.fm-resenas .fm-estrellas {
	display: inline-flex;
	gap: 2px;
	vertical-align: middle;
}

.fm-resenas .fm-estrella {
	width: 16px;
	height: 16px;
	fill: #E5DAE0;
}

.fm-resenas .fm-estrella--llena {
	fill: var(--fm-color-acento);
}

.fm-resenas .fm-estrellas--grandes .fm-estrella {
	width: 24px;
	height: 24px;
}

.fm-resenas-mensaje {
	margin: 0 0 var(--fm-espacio-sm);
	padding: 0.75rem 1rem;
	border-radius: 0.75rem;
	background: #FFF0F6;
	border-left: 4px solid var(--fm-color-acento);
}

.fm-resenas-mensaje--ok {
	background: #EAF8EF;
	border-left-color: var(--fm-color-exito);
}

.fm-resenas-mensaje--error {
	background: #FDECEC;
	border-left-color: #B32D2E;
}

.fm-resenas-resumen {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 var(--fm-espacio-sm);
}

.fm-resenas-promedio {
	font-size: 1.5rem;
	font-weight: 700;
}

.fm-resenas-total {
	color: var(--fm-color-gris);
}

.fm-resenas-lista {
	list-style: none;
	margin: 0 0 var(--fm-espacio-md);
	padding: 0;
}

.fm-resena {
	padding: var(--fm-espacio-sm) 0;
	border-top: 1px solid #EFE3E8;
}

.fm-resena-encabezado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
}

.fm-resena-fecha {
	color: var(--fm-color-gris);
	font-size: 0.875rem;
}

.fm-resena-texto {
	margin: 0.25rem 0 0;
	overflow-wrap: anywhere;
}

.fm-resenas-escribir {
	border-top: 1px solid #EFE3E8;
	padding-top: var(--fm-espacio-sm);
}

.fm-resenas-subtitulo {
	margin: 0 0 var(--fm-espacio-xs);
}

.fm-resenas-campo {
	margin: 0 0 var(--fm-espacio-sm);
	padding: 0;
	border: 0;
}

.fm-resenas-campo legend,
.fm-resenas-campo > label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.fm-resenas-campo input[type="text"],
.fm-resenas-campo textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.75rem;
	border: 1px solid #D9CBD2;
	border-radius: 0.75rem;
	font: inherit;
}

.fm-resenas-nota {
	margin-bottom: var(--fm-espacio-sm);
}

.fm-resenas-ayuda,
.fm-resenas-nota {
	margin: 0.25rem 0 0;
	color: var(--fm-color-gris);
	font-size: 0.875rem;
}

/* Selector de estrellas: los radios van en orden 5..1 y se muestran al revés,
   así "las estrellas que le siguen en el HTML" son las de menor calificación. */
.fm-estrellas-input {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.fm-estrellas-input input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.fm-estrellas-input label {
	cursor: pointer;
	padding: 0 2px;
}

.fm-estrellas-input .fm-estrella {
	width: 32px;
	height: 32px;
	fill: #E5DAE0;
	transition: fill 0.15s;
}

.fm-estrellas-input input:checked ~ label .fm-estrella,
.fm-estrellas-input label:hover .fm-estrella,
.fm-estrellas-input label:hover ~ label .fm-estrella {
	fill: var(--fm-color-acento);
}

.fm-estrellas-input input:focus-visible + label {
	outline: 2px solid var(--fm-color-acento-oscuro);
	outline-offset: 2px;
	border-radius: 4px;
}

.fm-resenas-reglas {
	margin: 0 0 var(--fm-espacio-sm);
	border: 1px solid #EFE3E8;
	border-radius: 0.75rem;
	padding: 0.5rem 1rem;
}

.fm-resenas-reglas summary {
	cursor: pointer;
	font-weight: 600;
}

.fm-resenas-reglas-texto {
	margin-top: 0.5rem;
	font-size: 0.9375rem;
}

.fm-resenas-casilla {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 var(--fm-espacio-sm);
}

.fm-resenas-casilla input {
	margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
	.fm-estrellas-input .fm-estrella {
		transition: none;
	}
}