/* ============================================================
   El Fogón — Bodegón argentino · Asado y minutas
   Paleta v2 (editorial, referencia Estilo Campo):
     Crema #EDE9E3 (fondo del cuerpo) · Piedra #D1CBC2 (apoyos)
     Blanco #FFFFFF (cards) · Tinta #222222 · Gris #666666
     Bordó #A32834 (CTA primario y acentos fuertes) · hover #8C212C
     Dorado #B59859 (labels uppercase, detalles finos)
     Carbón #16120E QUEDA solo en: navbar sobre el hero, velo del
     video y footer (con sus muted #CBBFA9 / #A89B86).
   Tipografías: Alegreya (titulares y carta) · Chivo (funcional)
                Chivo Mono (precios y fichas)
   ============================================================ */

:root {
	/* Prueba tipográfica pedida por Rodri (volver atrás = restaurar:
	   titulos "Alegreya", Georgia, serif · texto "Chivo", sans-serif) */
	--fogon-font-titulos: "Red Rose", Roboto, sans-serif;
	--fogon-font-texto: "Montserrat", Roboto, sans-serif;
	--fogon-carbon: #16120E;
	--fogon-carbon-suave: #211A13;
	--fogon-crema: #EDE9E3;
	--fogon-piedra: #D1CBC2;
	--fogon-blanco: #FFFFFF;
	--fogon-tinta: #222222;
	--fogon-gris: #666666;
	--fogon-bordo: #A32834;
	--fogon-bordo-hover: #8C212C;
	--fogon-dorado: #B59859;
	--fogon-lino: #F2EBDD;
	--fogon-lino-claro: #FAF6EE;
	--fogon-borde: #D9D5D0;
	--fogon-borde-2: #D1CBC2;
	--fogon-brasa: #A32834;
	--fogon-brasa-hover: #8C212C;
	--fogon-cuero: #3D2B1F;
	--fogon-oliva: #76834E;
	--fogon-muted-oscuro: #CBBFA9;
	--fogon-muted-oscuro-2: #A89B86;
	--fogon-muted-claro: #4A3F33;
	--fogon-muted-claro-2: #6E6052;
}

/* ---------- Tipografía ---------- */

body {
	background-color: var(--fogon-crema);
	color: var(--fogon-tinta);
	font-family: var(--fogon-font-texto);
}

.bg-light {
    background-color: var(--fogon-crema) !important;
}

.divider .text-white, .divider path {
    color: var(--fogon-crema) !important;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: var(--fogon-font-titulos);
	font-weight: 500;
}

.navbar-brand img {
	width: 90px;
}

.logo-menu-mobile {
    width: 100px;
}

@media (max-width: 991.98px) {
    .navbar-brand img {
        padding: 15px 10px 15px 0px !important;
    }
}

/* ---------- Botones ---------- */

.btn-primary {
	background: var(--fogon-bordo);
	border: 1px solid var(--fogon-bordo);
	border-radius: 2px;
	color: #ffffff;
	font-family: var(--fogon-font-texto);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 12px 28px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background: var(--fogon-bordo-hover);
	border-color: var(--fogon-bordo-hover);
	color: #ffffff;
}

.btn-outline-primary {
	background: transparent;
	border: 1px solid var(--fogon-tinta);
	border-radius: 2px;
	color: var(--fogon-tinta);
	font-family: var(--fogon-font-texto);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 12px 28px;
}

.btn-outline-primary:hover {
	background: var(--fogon-tinta);
	border-color: var(--fogon-tinta);
	color: var(--fogon-crema);
}

/* ---------- Inputs ---------- */
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3), .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-radius: 0;
}

/* ---------- Links ---------- */

a {
	color: var(--fogon-bordo);
}

a:hover {
	color: var(--fogon-bordo-hover);
}

/* ---------- Superficies ---------- */

.card {
	background-color: var(--fogon-blanco);
	border-color: var(--fogon-borde);
}

.bg-gray {
	background-color: var(--fogon-crema) !important;
}

#divBloqueNewsletter .card {
	background-image: none !important;
	background-color: var(--fogon-blanco) !important;
	border: 1px solid var(--fogon-borde);
}

#divBloqueNewsletter .card :is(h1, h2, h3, h4),
#divBloqueNewsletter .card .text-white {
	color: var(--fogon-tinta) !important;
}

#divBloqueNewsletter .card p {
	color: var(--fogon-gris);
}

/* --------------- Navbar -------------- */

/* Transparente de verdad en desktop: el fondo lo pinta el <header>
   wrapper (bg-color-secundario), no el .navbar; y para ver el video
   a través, el header se superpone al hero en vez de empujarlo */
@media (min-width: 991.98px) {
	header.wrapper.bg-color-secundario {
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1020;
	}
}

/* En mobile igual: arriba de todo, el menú transparente sobre el hero
   (al scrollear, .navbar-stick le devuelve el fondo sólido) */
@media (max-width: 991.98px) {
	header.wrapper.bg-color-secundario {
		background: transparent;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1020;
	}

	/* El header superpuesto no debe pisar el texto del hero */
	.swiper-hero .swiper-content {
		padding-top: 72px;
	}
}

.navbar.navbar-bg-color-secundario {
    background: transparent;
}

@media (min-width: 991.98px) {
    #mobileMenu {
        background: transparent;
    }
}

.navbar-stick {
    background: var(--color-secundario) !important;
}

.navbar-unstick .navbar-nav .nav-link {
	color: #ffffff;
}

.navbar.navbar-bg-color-secundario{
	background: transparent;
}

.navbar-unstick + div nav {
  box-shadow: none;
}

@media (min-width:991.98px){
	#mobileMenu{
		background: transparent;
	}
	
}

@media (max-width:991.98px){
	.navbar-dark .navbar-nav .nav-link {
		color: #ffffff;
	}
}

/* ---------- Hero (portadas) ---------- */

.swiper-hero-sin-barra, .swiper-hero-sin-barra .swiper-slide {
    height: calc(100vw / 2.12);
}

/* El video de la portada va como fondo absoluto: sin esto, su contenedor
   (relative, height 100%) empuja el bloque de texto fuera del slide */
.swiper-hero .swiper-slide .mp4-video-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Velo carbón sobre el video para que el texto lino siempre contraste */
.swiper-hero .swiper-slide .mp4-video-container::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(22, 18, 14, 0.45);
	pointer-events: none;
}

.swiper-hero .swiper-content p,
.swiper-hero .swiper-content .lead {
	text-shadow: 0 1px 14px rgba(22, 18, 14, 0.65);
}

.swiper-hero .portada-texto-pequeno {
	font-family: var(--fogon-font-texto);
	font-weight: 600;
	font-size: 0.8rem !important;
	text-transform: uppercase;
	letter-spacing: 0.22em;
}

.swiper-hero .portada-texto-grande {
	font-family: var(--fogon-font-titulos);
	font-weight: 500;
	font-size: clamp(2.2rem, 4.5vw, 3.6rem) !important;
	line-height: 1.12;
	max-width: 13em;
}

.swiper-hero .portada-texto-normal {
	font-family: var(--fogon-font-texto);
	font-size: 1.1rem !important;
	line-height: 1.5;
	max-width: 34em;
}

.swiper-hero .rounded-pill {
	border-radius: 2px !important;
}

.swiper-hero a.btn-primary {
	font-family: var(--fogon-font-texto);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 12px 28px;
}

@media (max-width: 991.98px) {
	.swiper-hero-sin-barra, .swiper-hero-sin-barra .swiper-slide {
		height: calc(100vw / 1.25);
	}
}

/* Botón secundario del hero: outline crema (segundo botón de un slide,
   o botón único del slide tagline bg-portada-2) */
.swiper-hero a.btn-primary + a.btn-primary,
.swiper-hero .bg-portada-2 a.btn-primary {
	background-color: transparent !important;
	border: 1px solid var(--fogon-crema) !important;
	color: var(--fogon-crema) !important;
}

.swiper-hero a.btn-primary + a.btn-primary {
	margin-left: 12px;
}

.swiper-hero a.btn-primary + a.btn-primary:hover,
.swiper-hero .bg-portada-2 a.btn-primary:hover {
	background-color: var(--fogon-crema) !important;
	color: var(--fogon-carbon) !important;
}

/* ---------- Botón flotante de WhatsApp ---------- */

/* El interior del globo del SVG es un calado transparente (no está
   pintado de blanco): sobre fondos oscuros (footer carbón, hero) se ve
   el fondo a través. Fondo blanco circular que rellena los calados. */
.btn-whatsapp svg {
	background: radial-gradient(closest-side, #ffffff 90%, transparent 91%);
}

/* ---------- Footer: claim de marca ---------- */

.fogon-claim {
	display: block;
	font-family: var(--fogon-font-titulos);
	font-style: italic;
	font-size: 1.35rem;
	color: var(--fogon-lino);
}

.fogon-bajada {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--fogon-font-texto);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--fogon-dorado);
}

/* ---------- Footer: estructura estilo La Cabrera ----------
   Logo centrado arriba; abajo el punto de venta único repartido en tres
   columnas (Ubicación / Teléfono y reservas / Horarios) con título dorado
   e ícono centrado, como la referencia. El reparto se hace por CSS sobre
   la <ul class="puntos-venta-footer"> que arma footer.php. */

footer hr.footer-hr {
	border-top: 1px solid rgba(242, 235, 221, 0.12);
	opacity: 1;
}

/* El logo (col-lg-3) pasa a ocupar toda la fila, centrado */
footer .footer-desktop > .col-lg-3:has(img.footer-logo) {
	flex: 0 0 100%;
	max-width: 100%;
	display: flex;
	justify-content: center;
}

footer .footer-desktop img.footer-logo {
	margin-bottom: 2rem !important;
}

/* La columna del punto de venta también ocupa toda la fila */
footer .footer-desktop > .col-auto:has(.puntos-venta-footer) {
	flex: 0 0 100%;
	max-width: 100%;
}

/* Nombre del punto de venta como label dorado centrado */
footer .puntos-venta-footer h4.footer-titulo {
	font-family: var(--fogon-font-texto);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fogon-dorado);
	text-align: center;
	margin-bottom: 2rem !important;
}

/* Tres columnas: Ubicación / Teléfono y reservas / Horarios */
footer .footer-desktop .puntos-venta-footer {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: row dense;
	column-gap: 3rem;
	row-gap: 0.4rem;
	max-width: 920px;
	margin: 0 auto 2.5rem !important;
	padding-left: 0;
}

footer .footer-desktop .puntos-venta-footer h4.footer-titulo {
	grid-column: 1 / -1;
}

footer .footer-desktop .puntos-venta-footer li:has(a[href*="maps.google"]),
footer .footer-desktop .puntos-venta-footer li:not(:has(a)):not(:has(strong)) {
	grid-column: 1;
}

footer .footer-desktop .puntos-venta-footer li:has(a[href^="tel:"]),
footer .footer-desktop .puntos-venta-footer li:has(a[href^="mailto:"]) {
	grid-column: 2;
}

footer .footer-desktop .puntos-venta-footer li:not(:has(a)):has(strong) {
	grid-column: 3;
}

/* Cada ítem: ícono dorado arriba, título de columna, dato abajo */
footer .puntos-venta-footer li {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

footer .puntos-venta-footer li a {
	display: contents;
}

footer .puntos-venta-footer li i.uil {
	position: static !important;
	display: block;
	order: -1;
	color: var(--fogon-dorado);
	font-size: 1.75rem !important;
	margin: 0 auto 0.5rem;
}

/* Un solo ícono por columna: el del email se oculta */
footer .puntos-venta-footer li i.uil-envelope {
	display: none;
}

/* Títulos de columna */
footer .puntos-venta-footer li:has(a[href*="maps.google"])::before {
	content: "Ubicación";
}

footer .puntos-venta-footer li:has(a[href^="tel:"])::before {
	content: "Teléfono y reservas";
}

footer .puntos-venta-footer li:has(i.uil-clock)::before {
	content: "Horarios";
}

footer .puntos-venta-footer li::before {
	font-family: var(--fogon-font-texto);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: var(--fogon-crema);
	margin-bottom: 0.6rem;
}

/* Datos en crema apagado, sin negrita gritona */
footer .puntos-venta-footer li span.fs-15 {
	color: var(--fogon-muted-oscuro);
	font-size: 0.92rem !important;
	line-height: 1.6;
}

footer .puntos-venta-footer li span.fs-15 strong {
	font-weight: 500;
	color: var(--fogon-crema);
}

footer .puntos-venta-footer li a:hover span.fs-15,
footer .puntos-venta-footer li a:hover span.fs-15 strong {
	color: var(--fogon-dorado);
}

/* Redes e iconos del pie en dorado */
footer .social.social-white a,
footer .social.social-white a i {
	color: var(--fogon-dorado) !important;
}

footer .social.social-white a:hover,
footer .social.social-white a:hover i {
	color: var(--fogon-crema) !important;
}

/* Línea legal en tono apagado */
footer .core-devs,
footer .pie-pagina a.core-devs {
	color: var(--fogon-muted-oscuro-2);
}

footer .pie-pagina a.core-devs:hover {
	color: var(--fogon-crema);
}

/* Mobile: una sola columna centrada, mismos títulos e íconos */
@media (max-width: 767.98px) {
	footer .footer-mobile .puntos-venta-footer {
		padding-left: 0;
		margin-bottom: 2rem !important;
	}

	footer .footer-mobile .puntos-venta-footer li {
		margin-bottom: 1.1rem;
	}

	footer .footer-mobile img.footer-logo {
		margin: 0 auto;
		display: block;
	}

	footer .footer-mobile .d-block:has(img.footer-logo) {
		text-align: center;
	}

	footer .footer-mobile .widget {
		text-align: center;
	}

	footer .footer-mobile .widget .social {
		justify-content: center;
	}

	footer .footer-mobile h4.footer-titulo {
		font-family: var(--fogon-font-texto);
		font-size: 0.74rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.22em;
		color: var(--fogon-dorado);
	}
}

/* ============================================================
   Carta pública (carta.php) — overrides scopeados a body.carta-body.
   carta.css se carga DESPUÉS de este archivo: por eso todos los
   selectores van prefijados con body.carta-body (mayor especificidad).
   ============================================================ */

body.carta-body {
	--carta-fondo: #EDE9E3;
	--carta-tinta: #222222;
	--carta-tinta-suave: #666666;
	--carta-borde: #D9D5D0;
	--carta-card: #FFFFFF;
	background: var(--fogon-crema);
	font-family: var(--fogon-font-texto);
}

/* El tema pone body{display:flex}: como flex item, .carta-page crecería
   a max-content y desborda en móvil. Se fija al ancho del viewport. */
body.carta-body .carta-page {
	width: 100%;
}

/* ---------- Hero de la carta ---------- */

body.carta-body {
	--carta-dorado: #B59859;
}

/* Brasas de fondo del hero, con el velo que ya aplica carta.css.
   La URL va directa acá (no vía variable) porque url() dentro de var()
   se resuelve contra la hoja que la consume y rompe la ruta relativa. */
body.carta-body .carta-hero::before {
	background-image: url("../../../img/elfogon/bloques/nosotros-fuego.jpg");
}

body.carta-body .carta-hero-label::before {
	content: "Bodegón argentino · San Telmo";
}

body.carta-body .carta-hero-label {
	font-family: var(--fogon-font-texto);
	color: var(--fogon-dorado);
}

body.carta-body .carta-hero-titulo {
	font-family: var(--fogon-font-titulos);
	color: var(--fogon-lino);
}

body.carta-body .carta-hero-titulo::after {
	background: var(--fogon-dorado);
}

body.carta-body .carta-btn-reservar {
	background: var(--fogon-bordo);
	border: 1px solid var(--fogon-bordo);
	color: #ffffff;
	border-radius: 2px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	font-weight: 600;
	padding: 9px 18px;
}

body.carta-body .carta-btn-reservar:active,
body.carta-body .carta-btn-reservar:hover {
	background: var(--fogon-bordo-hover);
	border-color: var(--fogon-bordo-hover);
	color: #ffffff;
}

body.carta-body .carta-chip-mesa {
	background: rgba(163, 40, 52, 0.22);
	border: 1px solid rgba(163, 40, 52, 0.65);
	color: var(--fogon-crema);
}

body.carta-body .carta-chip-mesa .material-symbols-rounded {
	color: var(--fogon-dorado);
}

/* ---------- Nav de categorías (tabs editoriales) ---------- */

body.carta-body .carta-nav {
	background: var(--fogon-crema);
	border-bottom-color: var(--fogon-piedra);
}

body.carta-body .carta-nav-item {
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: var(--fogon-gris);
	font-family: var(--fogon-font-texto);
}

body.carta-body .carta-nav-item:hover {
	color: var(--fogon-tinta);
	border-bottom-color: var(--fogon-dorado);
	background: transparent;
}

body.carta-body .carta-nav-item.activa {
	background: transparent;
	border-bottom-color: var(--fogon-bordo);
	color: var(--fogon-tinta);
}

/* ---------- Secciones ---------- */

body.carta-body .carta-seccion-titulo {
	font-family: var(--fogon-font-titulos);
	font-weight: 500;
	color: var(--fogon-tinta);
	display: block;
	text-align: center;
}

body.carta-body .carta-seccion-titulo::before {
	content: none;
}

body.carta-body .carta-seccion-titulo::after {
	content: "";
	display: block;
	width: 40px;
	height: 2px;
	margin: 12px auto 0;
	background: var(--fogon-bordo);
}

body.carta-body .carta-pagina-subtitulo {
	color: var(--fogon-gris);
}

body.carta-body .carta-grupo-titulo {
	font-family: var(--fogon-font-titulos);
	font-weight: 500;
	color: var(--fogon-tinta);
}

body.carta-body .carta-texto-libre {
	color: var(--fogon-gris);
}

/* ---------- Platos (tarjetas blancas) ---------- */

body.carta-body .carta-plato {
	box-shadow: none;
}

/* Bebidas (última página, fotos verticales 3:4) a 4 columnas en desktop,
   para diferenciarla de Postres (fotos cuadradas a 3) */
@media (min-width: 992px) {
	body.carta-body .carta-seccion:last-of-type .carta-platos-grilla {
		grid-template-columns: repeat(4, 1fr);
	}
}

body.carta-body .carta-plato-precio {
	color: var(--fogon-gris);
}

body.carta-body .carta-badge {
	background: transparent;
	border: 1px solid var(--fogon-dorado);
	color: var(--fogon-gris);
}

body.carta-body .carta-pill-agotado {
	background: transparent;
	border: 1px solid var(--fogon-piedra);
	color: var(--fogon-gris);
}

body.carta-body .carta-btn-agregar {
	border-radius: 2px;
	font-family: var(--fogon-font-texto);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	font-weight: 600;
	border-width: 1px;
}

body.carta-body .carta-btn-agregar:active,
body.carta-body .carta-btn-agregar:hover {
	background: var(--fogon-bordo-hover);
	border-color: var(--fogon-bordo-hover);
	color: #ffffff;
}

/* ---------- Sheets / pedido / reserva ---------- */

body.carta-body .carta-sheet-encabezado h3 {
	font-family: var(--fogon-font-titulos);
	font-weight: 500;
}

body.carta-body .carta-variante-precio,
body.carta-body .carta-pedido-item-precio,
body.carta-body .carta-pedido-total,
body.carta-body .carta-cuenta-item-total {
	font-family: "Chivo Mono", monospace;
	font-weight: 600;
}

body.carta-body .carta-barra-pedido,
body.carta-body .carta-btn-enviar {
	border-radius: 2px;
}

body.carta-body .carta-btn-enviar:hover {
	background: var(--fogon-bordo-hover);
}

body.carta-body .carta-barra-cuenta {
	border-radius: 2px;
}

body.carta-body .carta-reserva-campo label {
	font-family: var(--fogon-font-texto);
	letter-spacing: 0.14em;
}

body.carta-body .carta-reserva-ok .material-symbols-rounded {
	color: var(--fogon-oliva);
}

/* ---------- Carta vacía y pie ---------- */

body.carta-body .carta-vacia .material-symbols-rounded {
	color: var(--fogon-piedra);
}

body.carta-body .carta-vacia h2 {
	font-family: var(--fogon-font-titulos);
	font-weight: 500;
	color: var(--fogon-tinta);
}

body.carta-body .carta-vacia p {
	color: var(--fogon-gris);
}

body.carta-body .carta-pie p {
	color: var(--fogon-dorado);
	letter-spacing: 0.2em;
}

/* ============================================================
   Home editorial — CSS scopeado por bloque (referencias:
   carta y experiencia de Estilo Campo). Labels dorados uppercase,
   títulos serif en tinta, cuadrado de acento bordó, banda
   full-bleed con velo carbón.
   ============================================================ */

/* ---------- Nuestra carta (modelo 3: foto + texto + botón) ---------- */

#divBloqueNuestraCarta {
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}

#divBloqueNuestraCarta h3.display-5 {
	font-size: clamp(2rem, 3.2vw, 2.75rem);
	color: var(--fogon-tinta);
	margin-bottom: 1rem;
}

#divBloqueNuestraCarta h3.display-5::before {
	content: "El Fogón";
	display: block;
	font-family: var(--fogon-font-texto);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fogon-dorado);
	margin-bottom: 0.9rem;
}

#divBloqueNuestraCarta p {
	color: var(--fogon-gris);
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 30em;
}

#divBloqueNuestraCarta figure {
	position: relative;
	z-index: 1;
	border-radius: 0 !important;
}

/* ---------- Banda CTA "La parrilla como protagonista" (parallax) ---------- */

/* Parallax con el MISMO mecanismo del tema que usan los heros de las
   secciones (.image-wrapper): el fondo fijo va EN LA SECCIÓN (sin
   ancestros animados que lo desanclen), background-attachment: fixed. */

#divBloqueBandaParrilla {
	padding-top: 4rem !important;
	padding-bottom: 4rem;
	background: url("../../../img/elfogon/bloques/banda-parrilla.jpg") no-repeat center center !important;
	background-size: cover !important;
	background-attachment: fixed !important;
	position: relative;
	z-index: 0;
}

/* Velo carbón sobre toda la sección (patrón .bg-overlay del tema) */
#divBloqueBandaParrilla::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(22, 18, 14, 0.55);
	pointer-events: none;
	z-index: 0;
}

/* En dispositivos móviles el tema pasa los fondos fijos a scroll
   (.image-wrapper.mobile): misma regla acá */
@media (max-width: 991.98px) {
	#divBloqueBandaParrilla {
		background-attachment: scroll !important;
	}
}

#divBloqueBandaParrilla .componente-content {
	padding: 0 !important;
	position: relative;
	min-height: clamp(380px, 30vw, 440px);
	z-index: 1;
}

#divBloqueBandaParrilla figure {
	display: none;
}

#divBloqueBandaParrilla .contenido-bloque {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	pointer-events: none;
	padding: 0 1.5rem;
}

#divBloqueBandaParrilla .contenido-bloque h4.display-6 {
	font-family: var(--fogon-font-titulos);
	font-size: clamp(1.6rem, 3vw, 2.5rem);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fogon-crema);
	text-align: center;
	max-width: 16em;
	margin: 0 auto;
	text-shadow: 0 2px 18px rgba(22, 18, 14, 0.7);
}

#divBloqueBandaParrilla .contenido-bloque h4.display-6::before {
	content: "El Fogón · San Telmo";
	display: block;
	font-family: var(--fogon-font-texto);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fogon-dorado);
	margin-bottom: 0.9rem;
	text-shadow: none;
}

#divBloqueBandaParrilla .contenido-bloque h5.display-7 {
	font-family: var(--fogon-font-texto);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(237, 233, 227, 0.85);
	text-align: center;
	max-width: 40em;
	margin: 0.9rem auto 0;
	text-shadow: 0 1px 12px rgba(22, 18, 14, 0.65);
}

#divBloqueBandaParrilla .contenido-bloque a.btn-primary {
	pointer-events: auto;
	margin-top: 1.6rem !important;
}


/* ---------- El lugar (modelo 3: alternancia foto / texto) ---------- */

/* El selector del tema section.wrapper:not(#divPortadas) + section.wrapper
   tiene un ID adentro del :not() — hay que superarlo en especificidad */
section.wrapper + section.wrapper#divBloqueElLugar {
	padding-top: 3rem !important;
}

#divBloqueElLugar h3.display-4 {
	color: var(--fogon-tinta);
	margin-bottom: 3.5rem !important;
}

#divBloqueElLugar h3.display-4::before {
	content: "San Telmo · Desde 1987";
	display: block;
	font-family: var(--fogon-font-texto);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fogon-dorado);
	margin-bottom: 0.9rem;
}

#divBloqueElLugar h3.display-5 {
	font-size: clamp(1.55rem, 2.4vw, 2.1rem);
	line-height: 1.25;
	color: var(--fogon-tinta);
}

#divBloqueElLugar p {
	color: var(--fogon-gris);
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 30em;
}

#divBloqueElLugar figure {
	position: relative;
	z-index: 1;
}

/* Las dos fotos del bloque vienen con proporciones distintas (panorámica
   y cuadrada): se igualan a 4:3 recortando con object-fit */
#divBloqueElLugar figure img {
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
}

/* ---------- Testimonios ---------- */

#divBloqueTestimonios .container {
	padding-top: 4rem !important;
}

#divBloqueTestimonios h2.display-4 {
	display: block;
	color: var(--fogon-tinta);
}

#divBloqueTestimonios h2.display-4::before {
	content: "Palabra de los que vuelven";
	display: block;
	font-family: var(--fogon-font-texto);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fogon-dorado);
	margin-bottom: 0.9rem;
}

#divBloqueTestimonios .card {
	border: 1px solid var(--fogon-borde);
	box-shadow: none;
}

#divBloqueTestimonios .testimonio-calificacion i {
	color: var(--fogon-dorado) !important;
}

#divBloqueTestimonios .card-body p {
	font-family: var(--fogon-font-titulos);
	font-style: italic;
	font-size: 1.08rem;
	line-height: 1.55;
	color: var(--fogon-tinta) !important;
}

#divBloqueTestimonios .card-body h6 {
	font-family: var(--fogon-font-texto);
	color: var(--fogon-tinta) !important;
}

#divBloqueTestimonios .card-body small {
	color: var(--fogon-gris) !important;
}

/* ---------- Dónde estamos ---------- */

#divBloqueDondeEstamos .container {
	padding-top: 4rem !important;
	padding-bottom: 4rem !important;
}

#divBloqueDondeEstamos h2.display-4 {
	display: block;
	color: var(--fogon-tinta);
}

#divBloqueDondeEstamos .accordion-item {
	border: 1px solid var(--fogon-borde);
}

#divBloqueDondeEstamos .card-header button {
	font-family: var(--fogon-font-titulos);
	font-size: 1.25rem;
	font-weight: 500;
	color: var(--fogon-tinta);
}

#divBloqueDondeEstamos .icon-list i {
	color: var(--fogon-dorado);
}

#divBloqueDondeEstamos .icon-list span,
#divBloqueDondeEstamos .icon-list a:not(.btn) {
	color: var(--fogon-tinta);
}

#divBloqueDondeEstamos .icon-list a:not(.btn):hover {
	color: var(--color-primario) !important;
}

#divBloqueDondeEstamos .gmap_canvas > a,
#divBloqueDondeEstamos .gmap_canvas script {
	display: none;
}

/* ---------- Newsletter ---------- */

#divBloqueNewsletter .card h3,
#divBloqueNewsletter .card h4 {
	font-family: var(--fogon-font-titulos);
	color: var(--fogon-tinta);
}

/* ============================================================
   Sección Nosotros — página de historia (estructura tipo La Brigada,
   estética El Fogón). El HTML vive en secciones.sec_descripcion
   (sec_id 2) con clases .fogon-nosotros-*.
   ============================================================ */

.img-logo-nosotros, .img-logo-contacto {
	width: 175px;
}

/* Hero de secciones con portada: título serif grande y el subtítulo
   pasa arriba como label dorado (vale para Nosotros y Contacto) */
.content-wrapper > section.image-wrapper .col-encabezado-seccion {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content-wrapper > section.image-wrapper .col-encabezado-seccion h3.fs-30 {
	font-family: var(--fogon-font-titulos);
	font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
	margin-bottom: 1.4rem !important;
}

.content-wrapper > section.image-wrapper .col-encabezado-seccion h3.fs-25 {
	order: -1;
	font-family: var(--fogon-font-texto);
	font-size: 0.78rem !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.25em;
	color: var(--fogon-dorado) !important;
	margin-bottom: 1.2rem !important;
}

.fogon-nosotros {
	max-width: 1080px;
	margin: 0 auto;
	padding: 2rem 0 1rem;
}

.fogon-nosotros-bloque {
	margin-bottom: 5rem;
	row-gap: 2rem;
}

@media (min-width: 991.98px) {
	.fogon-nosotros-bloque > [class*="col-"] {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.fogon-nosotros-label {
	display: block;
	font-family: var(--fogon-font-texto);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: var(--fogon-dorado);
	margin-bottom: 0.9rem;
}

.fogon-nosotros-titulo {
	font-family: var(--fogon-font-titulos);
	font-size: clamp(1.55rem, 2.4vw, 2.1rem);
	line-height: 1.25;
	color: var(--fogon-tinta);
	margin-bottom: 1.2rem;
}

.fogon-nosotros p {
	color: var(--fogon-gris);
	font-size: 1.02rem;
	line-height: 1.65;
	max-width: 30em;
}

.fogon-nosotros-foto {
	position: relative;
	z-index: 1;
	margin: 0;
}

.fogon-nosotros-foto img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: .4rem;
}

/* Cuadrados de acento asomando detrás de las fotos, como en la home */
/* Cita destacada */
.fogon-nosotros-cita {
	text-align: center;
	max-width: 24em;
	margin: 4.5rem auto;
}

.fogon-nosotros-cita::before {
	content: "";
	display: block;
	width: 9px;
	height: 9px;
	background: var(--fogon-bordo);
	margin: 0 auto 1.4rem;
}

.fogon-nosotros-cita p {
	font-family: var(--fogon-font-titulos);
	font-style: italic;
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	line-height: 1.3;
	color: var(--fogon-tinta);
	max-width: none;
	margin: 0;
}

/* Cierre con CTA */
.fogon-nosotros-cierre {
	text-align: center;
	padding: 1rem 0 4rem;
}

.fogon-nosotros-cierre .fogon-nosotros-titulo {
	margin-bottom: 1.8rem;
}

@media (max-width: 991.98px) {
	.fogon-nosotros-bloque {
		margin-bottom: 3.5rem;
	}

	.fogon-nosotros-cita {
		margin: 3rem auto;
	}
}

/* ---------- Mapa en el footer (param BLOQUES_MOSTRAR_PIE_PAGINA_PUNTOS_VENTA_MAPA) ---------- */

.puntos-venta-footer-mapa {
	width: 100%;
	height: 200px;
	margin: 1.25rem 0 1.5rem;
	border-radius: .4rem;
	overflow: hidden;
	filter: grayscale(35%) sepia(8%);
}

.puntos-venta-footer-mapa .gmap_canvas,
.puntos-venta-footer-mapa iframe {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}

/* ---------- Botón Reservar del menú (compacto para la barra) ---------- */

/* En móvil va a la izquierda del hamburger, más compacto todavía */
@media (max-width: 991.98px) {
	.boton-cta-menu {
		padding: 6px 12px !important;
		font-size: 11px !important;
		letter-spacing: 0.08em;
	}
}

.boton-cta-menu {
	padding: 8px 18px;
	font-size: 12px;
}

/* El video del hero no tiene audio: el botón de sonido no va */
.video-unmute-btn {
	display: none !important;
}

/* ---------- Tira de fotos (galería marquee CSS, full-bleed y pegada) ----------
   El marquee es CSS puro (pista duplicada + animación lineal infinita,
   estilos base en el template de galería). Acá solo el full-bleed. */

#divBloqueGaleria {
	padding: 0 !important;
}

#divBloqueGaleria .container {
	max-width: 100%;
	padding: 0 !important;
}