/* ============================================================
   DELITO — Wines Bar & Coffee · Villa Devoto
   "Una innovación en cada bocado"

   Tema base del sitio: NOCHE premium (blanco / gris / negro).
     Negro   #0F0F0F (fondo)      Panel  #1A1A1A
     Borde   #2E2E2E (filetes)    Gris   #9A9A9A (texto secundario)
     Hueso   #F5F3EF (texto)      Blanco #FFFFFF (acento)
   La carta tiene además un modo DÍA (paleta cálida) — ver final del archivo.

   Tipografía: Montserrat en todo. Títulos en MAYÚSCULAS, peso regular.
   El sistema inyecta --color-primario (#FFFFFF) y --color-secundario (#0F0F0F).
   ============================================================ */

:root {
	--delito-negro: #0F0F0F;
	--delito-panel: #1A1A1A;
	--delito-panel-2: #161616;
	--delito-borde: #2E2E2E;
	--delito-gris: #9A9A9A;
	--delito-hueso: #F5F3EF;
	--delito-blanco: #FFFFFF;

	/* Modo DÍA (carta) */
	--delito-dia-crema: #FFF8F0;
	--delito-dia-caramelo: #C08552;
	--delito-dia-cacao: #8C5A3C;
	--delito-dia-espresso: #4B2E2B;

	--delito-font: "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Tipografía: Montserrat en todo ---------- */

:root {
	--bs-font-sans-serif: "Montserrat", sans-serif;
	--bs-body-font-family: "Montserrat", sans-serif;
}

body, p, a, span, li, label, small, strong, em, blockquote, figcaption,
input, textarea, select, button, .btn, .nav-link, .lead, .form-control,
.dropdown-item, td, th,
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	font-family: var(--delito-font) !important;
}

/* NO tocamos las fuentes de íconos: los selectores de arriba apuntan a
   elementos/clases concretas (body, p, span, .btn, .nav-link, etc.) y NO
   incluyen <i> ni .uil/.material-symbols-*/.fa*, así que conservan su
   propia font de íconos. (No usar font-family:revert acá: rompe el
   ligature de Material Symbols.) */

/* Títulos: mayúsculas, peso regular, tracking sobrio */
h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.06em;
	color: var(--delito-hueso);
}

.lead { font-weight: 300; }

/* ---------- Cuerpo / superficies oscuras ---------- */

body {
	background-color: var(--delito-negro);
	color: var(--delito-hueso);
}

.bg-light, .bg-white, .bg-gray, .bg-soft-primary {
	background-color: var(--delito-negro) !important;
}

section, .wrapper {
	background-color: var(--delito-negro);
}

.text-dark, .link-dark { color: var(--delito-hueso) !important; }
.text-muted { color: var(--delito-gris) !important; }

p { color: var(--delito-hueso); }

/* Cards → paneles grafito con filete fino */
.card {
	background-color: var(--delito-panel);
	border: 1px solid var(--delito-borde);
	color: var(--delito-hueso);
	border-radius: 2px;
}
.card .text-muted { color: var(--delito-gris) !important; }

/* Divisores SVG: que el "papel" sea negro, no blanco */
.divider .text-white, .divider path,
.divider .text-light, .divider .text-gray { color: var(--delito-negro) !important; }

hr, .footer-hr { border-color: var(--delito-borde); }

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

a { color: var(--delito-hueso); text-decoration: none; }
a:hover { color: var(--delito-blanco); }
.follow-link:hover { color: var(--delito-blanco); }

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

/* Primario = blanco sobre negro (premium), texto negro */
.btn-primary {
	background: var(--delito-blanco);
	border: 1px solid var(--delito-blanco);
	border-radius: 2px;
	color: var(--delito-negro);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 13px 30px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
	background: var(--delito-hueso);
	border-color: var(--delito-hueso);
	color: var(--delito-negro);
}

.btn-outline-primary, .btn-secundario {
	background: transparent;
	border: 1px solid var(--delito-hueso);
	border-radius: 2px;
	color: var(--delito-hueso);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	padding: 13px 30px;
}
.btn-outline-primary:hover, .btn-secundario:hover {
	background: var(--delito-hueso);
	border-color: var(--delito-hueso);
	color: var(--delito-negro);
}

/* ---------- Inputs ---------- */

.form-control, .form-select, .input-group-text {
	background-color: var(--delito-panel);
	border: 1px solid var(--delito-borde);
	color: var(--delito-hueso);
	border-radius: 2px;
}
.form-control::placeholder { color: var(--delito-gris); }
.form-control:focus, .form-select:focus {
	background-color: var(--delito-panel);
	border-color: var(--delito-gris);
	color: var(--delito-hueso);
	box-shadow: none;
}
.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;
}

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

.navbar-brand img { width: 120px; }
.logo-menu-mobile { width: 120px; }
@media (max-width: 991.98px) {
	.navbar-brand img { padding: 12px 10px 12px 0 !important; }
}

/* Nav links: hueso, hover blanco, tracking fino */
.navbar .nav-link {
	color: var(--delito-hueso) !important;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	font-weight: 500;
}
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--delito-blanco) !important; }

/* ---------- Footer ---------- */

.pie-pagina, footer { background-color: var(--delito-negro) !important; color: var(--delito-gris); }
.pie-pagina a { color: var(--delito-gris); }
.pie-pagina a:hover { color: var(--delito-blanco); }

.delito-claim {
	display: block;
	font-size: 1.05rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--delito-hueso);
}
.delito-bajada {
	display: block;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--delito-gris);
	margin-top: 0.35rem;
}

/* ---------- Newsletter (card oscura, no blanca) ---------- */

#divBloqueNewsletter .card {
	background-image: none !important;
	background-color: var(--delito-panel) !important;
	border: 1px solid var(--delito-borde);
}
#divBloqueNewsletter .card :is(h1, h2, h3, h4),
#divBloqueNewsletter .card .text-white { color: var(--delito-hueso) !important; }
#divBloqueNewsletter .card p { color: var(--delito-gris); }

/* ============================================================
   Contraste tema oscuro (patrón 3dproductos): carrito + buscador
   ============================================================ */

#carritoMenu .text-white, #carritoMenu p { color: #ffffff !important; }
#carritoMenu i, #favoritosMenu i { color: #ffffff; }
.number-picker-cart .input-group input { color: #ffffff !important; }
#carritoMenu del span { color: #8a8a8a !important; }
.number-picker .input-group, .number-picker .btn-increment, .btn-decrement { border-radius: 2rem !important; }

.div-buscar-header .link-dark { color: #ffffff !important; }

#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]) {
	border-color: var(--delito-borde);
	background-color: var(--delito-panel);
	color: var(--delito-hueso);
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):hover {
	border-color: var(--delito-blanco) !important;
	color: var(--delito-blanco) !important;
}
#divSugerenciasBuscar .picker.picker-botones label:not([for*=radColor]):has(input:checked) {
	border-color: var(--delito-blanco) !important;
	background-color: var(--delito-blanco) !important;
	color: var(--delito-negro) !important;
}
.picker label[for*=radVariante] > input:checked ~ span { background-color: var(--delito-blanco); color: var(--delito-negro); }
.picker label[for*=radVariante] > span { padding: .3rem; }

/* ============================================================
   CARTA — tema dual DÍA / NOCHE
   carta.css define las variables --carta-*; acá las repintamos.
   Default = NOCHE (premium B/N). Modo DÍA = paleta cálida.
   El toggle agrega data-modo al <body class="carta-body">.
   ============================================================ */

/* NOCHE (por defecto) */
.carta-body {
	--carta-fondo: #0F0F0F;
	--carta-tinta: #F5F3EF;
	--carta-tinta-suave: #9A9A9A;
	--carta-borde: #2E2E2E;
	--carta-card: #1A1A1A;
	--carta-acento: #FFFFFF;
	--carta-header-bg: #0F0F0F;
}

/* DÍA (toggle) — cálida: crema / caramelo / cacao / espresso */
.carta-body[data-modo="dia"] {
	--carta-fondo: #FFF8F0;
	--carta-tinta: #4B2E2B;
	--carta-tinta-suave: #8C5A3C;
	--carta-borde: #E7D6C4;
	--carta-card: #FFFFFF;
	--carta-acento: #8C5A3C;
	--carta-header-bg: #4B2E2B;
}

/* La carta maneja su propio fondo (día/noche): que NO herede el negro
   global de `section` del tema del sitio (si no, en modo Día quedan
   bandas negras detrás de las tarjetas). El fondo lo da .carta-body. */
.carta-body section,
.carta-body .carta-seccion,
.carta-body .carta-main,
.carta-body .carta-page {
	background-color: transparent !important;
}

/* Transición suave al cambiar de modo */
.carta-body, .carta-body .carta-hero, .carta-body .carta-nav,
.carta-body .carta-plato, .carta-body .carta-nav-item {
	transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* Mostrar sólo las páginas del modo activo */
.carta-body[data-modo="dia"] .carta-nav-item[data-modo="noche"],
.carta-body[data-modo="dia"] .carta-seccion[data-modo="noche"] { display: none; }
.carta-body:not([data-modo="dia"]) .carta-nav-item[data-modo="dia"],
.carta-body:not([data-modo="dia"]) .carta-seccion[data-modo="dia"] { display: none; }

/* Toggle Día | Noche */
.carta-modos {
	display: flex;
	gap: 0;
	justify-content: center;
	padding: 14px 16px 0;
	background: var(--carta-fondo);
}
.carta-modo-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--carta-borde);
	background: var(--carta-card);
	color: var(--carta-tinta-suave);
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: 9px 22px;
	cursor: pointer;
}
.carta-modo-btn:first-child { border-radius: 2px 0 0 2px; border-right: none; }
.carta-modo-btn:last-child { border-radius: 0 2px 2px 0; }
.carta-modo-btn .material-symbols-rounded { font-size: 18px; }
.carta-modo-btn.activa {
	background: var(--carta-acento);
	border-color: var(--carta-acento);
	color: var(--carta-fondo);
}

/* Títulos de la carta en Montserrat mayúsculas */
.carta-hero-titulo, .carta-seccion-titulo, .carta-plato-titulo, .carta-grupo-titulo {
	font-family: "Montserrat", sans-serif !important;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.05em;
}
.carta-plato-precio { font-weight: 600; }

/* ============================================================
   HERO (portadas): scrim para legibilidad + titular grande centrado
   ============================================================ */
#divPortadas .swiper-slide { position: relative; }
#divPortadas .swiper-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.15) 38%, rgba(15,15,15,0.65) 100%);
	pointer-events: none;
}
#divPortadas .swiper-content {
	position: relative;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
#divPortadas .swiper-content p {
	font-family: "Montserrat", sans-serif !important;
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: 0.12em;
	font-size: clamp(1.6rem, 3.6vw, 3.1rem) !important;
	line-height: 1.18;
	max-width: 16ch;
	margin: 0 auto;
	color: #F5F3EF;
	text-shadow: 0 2px 26px rgba(0,0,0,0.65);
}

/* ============================================================
   HOME — Rediseño editorial (inspirado en holier.framer.website)
   Fotografía protagonista, tipografía gigante, mucho aire.
   Sólo afecta el home/secciones (la carta usa .carta-body).
   ============================================================ */

/* ---------- Hero a pantalla completa, cinematográfico ---------- */
.container:has(#divPortadas) { padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
#divPortadas,
#divPortadas .swiper-hero,
#divPortadas .swiper-container,
#divPortadas .swiper-wrapper,
#divPortadas .swiper-hero .swiper-slide,
#divPortadas .swiper-slide {
	height: 100vh !important;
	min-height: 640px;
	max-height: 1100px;
}
#divPortadas .swiper-slide img,
#divPortadas .portada-efecto-image,
#divPortadas .portada-efecto-canvas {
	height: 100vh !important;
	min-height: 640px;
	max-height: 1100px;
	width: 100%;
	object-fit: cover;
}
#divPortadas .swiper-slide::after {
	background: linear-gradient(180deg, rgba(15,15,15,0.50) 0%, rgba(15,15,15,0.20) 42%, rgba(15,15,15,0.72) 100%);
}
/* Titular gigante del hero */
#divPortadas .swiper-content p {
	font-size: clamp(1.9rem, 5vw, 3.3rem) !important;
	line-height: 1.08;
	letter-spacing: 0.01em;
	font-style: italic;
	max-width: 18ch;
	text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
}

/* Botones del hero (Reservar primario + Ver la carta secundario) */
#divPortadas .swiper-content p:has(.hero-acciones) {
	font-size: 1rem !important;
	font-style: normal;
	max-width: none;
	margin-top: 1.8rem !important;
}
#divPortadas .swiper-content .hero-acciones {
	display: inline-flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
#divPortadas .swiper-content .hero-btn {
	display: inline-block;
	font-family: "Montserrat", sans-serif !important;
	font-style: normal !important;
	font-size: 12px !important;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 15px 34px;
	border-radius: 2px;
	line-height: 1;
	text-shadow: none;
	transition: background-color .2s ease, color .2s ease;
}
#divPortadas .swiper-content .hero-btn-pri { background: #ffffff; color: #0F0F0F; border: 1px solid #ffffff; }
#divPortadas .swiper-content .hero-btn-pri:hover { background: transparent; color: #ffffff; }
#divPortadas .swiper-content .hero-btn-sec { background: transparent; color: #ffffff; border: 1px solid rgba(255,255,255,0.65); }
#divPortadas .swiper-content .hero-btn-sec:hover { background: #ffffff; color: #0F0F0F; border-color: #ffffff; }

/* ---------- Ritmo: mucho aire entre secciones ---------- */
[id^="divBloque"].wrapper {
	padding-top: clamp(5rem, 11vw, 11rem) !important;
	padding-bottom: clamp(5rem, 11vw, 11rem) !important;
}

/* ---------- Títulos editoriales gigantes ---------- */
[id^="divBloque"] .display-4,
[id^="divBloque"] .display-5,
[id^="divBloque"] .display-6,
[id^="divBloque"] h2,
[id^="divBloque"] h3 {
	font-size: clamp(2.1rem, 5vw, 3rem) !important;
	line-height: 1.04;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 300 !important;
	margin-bottom: 1.4rem;
}
[id^="divBloque"] .lead,
[id^="divBloque"] .display-7,
[id^="divBloque"] h5 {
	font-size: clamp(0.98rem, 1.3vw, 1.12rem) !important;
	font-weight: 300 !important;
	letter-spacing: 0.03em;
	color: var(--delito-gris);
	line-height: 1.85;
	text-transform: none;
}
[id^="divBloque"] p:not(.lead):not(.display-7) {
	font-size: 1.02rem;
	line-height: 1.95;
	color: var(--delito-gris);
	font-weight: 300;
	max-width: 48ch;
}

/* ---------- Imágenes cinematográficas (grandes, sin redondeo) ---------- */
[id^="divBloque"] figure,
[id^="divBloque"] figure img,
[id^="divBloque"] .card-img-top,
[id^="divBloque"] .card-img-top img {
	border-radius: 0 !important;
}
#divBloqueNuestraCarta figure img,
#divBloqueElLugar figure img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	filter: brightness(0.96) saturate(1.03);
}

/* Banda de ambiente: full-bleed con velo y titular centrado grande */
#divBloqueBandaAmbiente .card-img-top img {
	width: 100%;
	aspect-ratio: 21 / 9;
	max-height: 86vh;
	object-fit: cover;
	filter: brightness(0.5);
}
#divBloqueBandaAmbiente .contenido-bloque .display-6 {
	font-size: clamp(2.4rem, 6vw, 5.2rem) !important;
	color: var(--delito-hueso) !important;
}
#divBloqueBandaAmbiente .contenido-bloque .display-7 {
	max-width: 40ch;
	margin-left: auto;
	margin-right: auto;
}

/* ---------- CTA editorial: outline fino, muy espaciado ---------- */
[id^="divBloque"] .btn-primary {
	background: transparent;
	color: var(--delito-hueso);
	border: 1px solid var(--delito-hueso);
	letter-spacing: 0.24em;
	padding: 15px 42px;
	font-size: 11px;
}
[id^="divBloque"] .btn-primary:hover {
	background: var(--delito-hueso);
	color: var(--delito-negro);
}

/* Testimonios: tarjetas sobrias, sin recuadro pesado */
#divBloqueTestimonios .card {
	background: transparent;
	border: none;
	border-top: 1px solid var(--delito-borde);
	border-radius: 0;
}
#divBloqueTestimonios .display-4 { margin-bottom: 3rem !important; }

/* Galería: imágenes sin gap excesivo, look editorial */
#divBloqueGaleria img { border-radius: 0 !important; filter: brightness(0.95); }

/* ============================================================
   CARTA — fotos de plato protagonistas (ahora son fotos reales)
   ============================================================ */
.carta-body .carta-plato-imagen {
	width: 132px;
	height: 132px;
	border-radius: 10px;
}
@media (min-width: 992px) {
	.carta-body .carta-plato:not(.carta-plato-agotado) .carta-plato-imagen,
	.carta-body .carta-plato-imagen { width: 150px; height: 150px; }
}
.carta-body .carta-platos-grilla .carta-plato-imagen {
	width: 100%;
	height: 210px;
}

/* Ajuste: títulos inline de las secciones "historia" un poco más chicos
   para que no se encimen con las fotos (el hero y la banda siguen grandes). */
#divBloqueNuestraCarta .display-5,
#divBloqueElLugar .display-5 {
	font-size: clamp(1.7rem, 3.2vw, 3rem) !important;
	overflow-wrap: break-word;
}
#divBloqueElLugar .display-4 { margin-bottom: 0.4rem !important; }

/* ============================================================
   CORRECCIONES DE CONTRASTE Y LEGIBILIDAD (revisión)
   - Mata el gradiente de texto del theme (titulares de bloque + nav)
   - Botones legibles (blanco con texto negro)
   - Paddings consistentes y moderados
   - Galería en grilla pareja
   ============================================================ */

/* --- Titulares de bloque: BLANCO sólido, no gris/gradiente --- */
[id^="divBloque"] h1, [id^="divBloque"] h2, [id^="divBloque"] h3, [id^="divBloque"] h4,
[id^="divBloque"] .display-1, [id^="divBloque"] .display-2, [id^="divBloque"] .display-3,
[id^="divBloque"] .display-4, [id^="divBloque"] .display-5, [id^="divBloque"] .display-6 {
	background: none !important;
	background-image: none !important;
	-webkit-text-fill-color: var(--delito-hueso) !important;
	color: var(--delito-hueso) !important;
	font-weight: 500 !important;
	font-style: italic;
}

/* --- Nav links: blanco sólido (no multicolor) --- */
.navbar .nav-link {
	background: none !important;
	background-image: none !important;
	-webkit-text-fill-color: var(--delito-hueso) !important;
	color: var(--delito-hueso) !important;
}
.navbar .nav-link:hover, .navbar .nav-link.active {
	-webkit-text-fill-color: #ffffff !important;
	color: #ffffff !important;
}

/* --- Texto de cuerpo: gris legible --- */
[id^="divBloque"] p:not(.lead):not(.display-7),
[id^="divBloque"] .lead, [id^="divBloque"] .display-7 {
	color: #C2C2C2 !important;
	font-weight: 400 !important;
}

/* --- BOTONES: blanco con texto NEGRO (máxima legibilidad) --- */
.btn-primary, .btn-primary span, .btn-primary label,
[id^="divBloque"] .btn-primary, [id^="divBloque"] .btn-primary span, [id^="divBloque"] .btn-primary label {
	background: #ffffff !important;
	background-image: none !important;
	border-color: #ffffff !important;
	color: #0F0F0F !important;
	-webkit-text-fill-color: #0F0F0F !important;
}
.btn-primary:hover, [id^="divBloque"] .btn-primary:hover,
.btn-primary:hover span, .btn-primary:hover label {
	background: #0F0F0F !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* --- Paddings de sección: moderados y consistentes --- */
[id^="divBloque"].wrapper {
	padding-top: clamp(3.5rem, 6vw, 6.5rem) !important;
	padding-bottom: clamp(3.5rem, 6vw, 6.5rem) !important;
}

/* --- Galería: grilla pareja, imágenes mismo alto --- */
#divBloqueGaleria .container { max-width: 1320px; }
#divBloqueGaleria .swiper-slide { margin-bottom: 0 !important; height: auto !important; }
#divBloqueGaleria figure { margin: 0 !important; }
#divBloqueGaleria figure img,
#divBloqueGaleria .swiper-slide img {
	width: 100% !important;
	aspect-ratio: 3 / 4;
	object-fit: cover !important;
	border-radius: 0 !important;
	display: block;
	filter: brightness(0.96);
}

/* --- Testimonios: estrellas y nombres legibles --- */
#divBloqueTestimonios .testimonio-calificacion i { color: var(--delito-hueso) !important; }
#divBloqueTestimonios .card-body p { color: #D6D6D6 !important; }

/* --- Footer: que respire y se lea --- */
.pie-pagina .footer-logo, .pie-pagina .footer-logo img { max-width: 150px; }

/* --- Galería: tira full-bleed de imágenes parejas, sin vacíos --- */
#divBloqueGaleria.wrapper { padding-top: 1.5rem !important; padding-bottom: 0 !important; }
#divBloqueGaleria .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
#divBloqueGaleria .container.pt-8 { padding-top: 0 !important; }
#divBloqueGaleria .swiper-container { margin-bottom: 0 !important; }
#divBloqueGaleria .swiper-slide { padding: 0 !important; margin: 0 !important; }
#divBloqueGaleria figure { margin: 0 !important; }
#divBloqueGaleria figure img, #divBloqueGaleria .swiper-slide img {
	aspect-ratio: 4 / 5 !important;
	width: 100% !important;
	height: auto !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}
#divBloqueGaleria .swiper-pagination, #divBloqueGaleria .swiper-controls { display: none !important; }
/* menos vacío entre testimonios y galería */
#divBloqueTestimonios.wrapper { padding-bottom: 2.5rem !important; }

/* Galería: forzar 4 imágenes a lo ancho completo */
#divBloqueGaleria .swiper-slide { width: 25% !important; flex: 0 0 25% !important; }
@media (max-width: 768px){ #divBloqueGaleria .swiper-slide { width: 50% !important; flex: 0 0 50% !important; } }

/* ============================================================
   FIX 2: hover de botones, banda con contenido, footer estilo elfogon
   ============================================================ */

/* --- Botones: el TEXTO no debe tener fondo propio (causaba el lag de hover) --- */
.btn-primary span, .btn-primary label,
[id^="divBloque"] .btn-primary span, [id^="divBloque"] .btn-primary label {
	background: transparent !important;
	background-image: none !important;
	color: #0F0F0F !important;
	-webkit-text-fill-color: #0F0F0F !important;
	transition: color .15s ease !important;
}
.btn-primary, [id^="divBloque"] .btn-primary { transition: background-color .15s ease, border-color .15s ease !important; }
.btn-primary:hover span, .btn-primary:hover label,
[id^="divBloque"] .btn-primary:hover span, [id^="divBloque"] .btn-primary:hover label {
	background: transparent !important;
	color: #ffffff !important;
	-webkit-text-fill-color: #ffffff !important;
}

/* --- Banda Ambiente: el contenido va ENCIMA de la imagen (no debajo) --- */
#divBloqueBandaAmbiente .componente-content,
#divBloqueBandaAmbiente .card-img-top.overlay { position: relative; }
#divBloqueBandaAmbiente .contenido-bloque {
	position: absolute !important;
	inset: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem 1.5rem;
}
#divBloqueBandaAmbiente .card-img-top img { filter: brightness(0.45); }
#divBloqueBandaAmbiente .contenido-bloque .display-7 { color: #E8E8E8 !important; max-width: 42ch; }


/* ============================================================
   FOOTER — réplica exacta del de elfogon (La Cabrera), adaptado a
   la paleta Delito. Logo centrado + 3 columnas (Ubicación / Teléfono
   y reservas / Horarios) con label + ícono caramelo, y mapa abajo.
   ============================================================ */
footer hr.footer-hr { border-top: 1px solid rgba(245,243,239,0.12); opacity: 1; }

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; max-width: 165px; }

footer .footer-desktop > .col-auto:has(.puntos-venta-footer) { flex: 0 0 100%; max-width: 100%; }

footer .puntos-venta-footer h4.footer-titulo {
	font-family: "Montserrat", sans-serif; font-size: 0.74rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.22em; color: #C08552;
	text-align: center; margin-bottom: 2rem !important;
}

footer .footer-desktop .puntos-venta-footer {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense;
	align-items: start; column-gap: 3rem; row-gap: 0.1rem; 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:has(i.uil-clock) { grid-column: 3; }

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: #C08552;
	font-size: 1.75rem !important; margin: 0 auto 0.35rem;
}
footer .puntos-venta-footer li i.uil-envelope { display: none; }

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: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.2em; color: var(--delito-hueso); margin-bottom: 0.35rem;
}

footer .puntos-venta-footer li span.fs-15 { color: var(--delito-gris); font-size: 0.92rem !important; line-height: 1.35; }
footer .puntos-venta-footer li span.fs-15 strong { font-weight: 500; color: var(--delito-hueso); }
footer .puntos-venta-footer li a:hover span.fs-15, footer .puntos-venta-footer li a:hover span.fs-15 strong { color: #C08552; }

/* mapa: full-width abajo (como elfogon), no se oculta */
footer .puntos-venta-footer-mapa, footer .mapouter { display: block !important; max-width: 100%; margin: 0 auto; }
footer .puntos-venta-footer-mapa iframe, footer .gmap_canvas iframe { width: 100%; border: 0; border-radius: 2px; }

footer .social.social-white a, footer .social.social-white a i { color: #C08552 !important; }
footer .social.social-white a:hover, footer .social.social-white a:hover i { color: var(--delito-hueso) !important; }
footer .widget .footer-titulo { color: #C08552 !important; }
footer .core-devs, footer .pie-pagina a.core-devs { color: #777; }
footer .pie-pagina a.core-devs:hover { color: var(--delito-hueso); }

/* ============================================================
   FIX 3: correcciones de la carta (botones, nav activa, footer día)
   ============================================================ */

/* 1) Botón "Agregar": en hover el texto va en --carta-card (no blanco sobre blanco) */
.carta-body .carta-btn-agregar:hover,
.carta-body .carta-btn-agregar:active {
	color: var(--carta-card) !important;
}

/* 2) Botón "Reservar" del sheet (.carta-btn-enviar): texto en --carta-card */
.carta-body .carta-btn-enviar,
.carta-body .carta-btn-enviar .material-symbols-rounded {
	color: var(--carta-card) !important;
}

/* 3) Ícono del input de fecha de la reserva: blanco para que se vea */
.carta-body #cartaReservaFecha::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(1.6);
	cursor: pointer;
}

/* 4) Nav: la categoría activa NO debe forzar texto blanco (en día queda
      blanco sobre casi blanco). Usa --carta-tinta: claro en noche, oscuro en día. */
.carta-body .carta-nav-item.activa {
	color: var(--carta-tinta) !important;
}

/* 5) Footer de la carta (.carta-pie): seguir día/noche.
      En NOCHE oscuro; en DÍA crema con logo negro y claim oscuro. */
.carta-body footer.carta-pie { background: var(--carta-header-bg) !important; }
.carta-body[data-modo="dia"] footer.carta-pie {
	background: #FFF8F0 !important;
	color: #4B2E2B !important;
}
.carta-body[data-modo="dia"] footer.carta-pie .carta-pie-logo { filter: invert(1); }
.carta-body[data-modo="dia"] footer.carta-pie .carta-pie-claim,
.carta-body[data-modo="dia"] footer.carta-pie .carta-pie-claim *,
.carta-body[data-modo="dia"] footer.carta-pie .carta-pie-direccion,
.carta-body[data-modo="dia"] footer.carta-pie p,
.carta-body[data-modo="dia"] footer.carta-pie .delito-claim,
.carta-body[data-modo="dia"] footer.carta-pie .delito-bajada {
	color: #4B2E2B !important;
}

/* ============================================================
   FIX 4: botón "Agregar" más compacto/cuadrado (ambos modos) +
   borde del plato en día
   ============================================================ */
.carta-body .carta-btn-agregar {
	padding: 5px 8px !important;
	border-radius: 2px !important;
	line-height: 28px !important;
}
.carta-body[data-modo="dia"] .carta-plato {
	border: 1px solid var(--carta-borde) !important;
}

/* ============================================================
   FIX 5: imágenes de plato ENTERAS (sin recorte) en lista y grilla
   ============================================================ */
.carta-body .carta-plato-imagen {
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
}
.carta-body .carta-platos-grilla .carta-plato-imagen {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
}
.carta-body .carta-plato-imagen img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* ============================================================
   FIX 6: jerarquía de títulos — secciones secundarias más chicas
   (Testimonios, Galería, Dónde estamos, Newsletter) que las
   principales (Nuestra carta, El ambiente).
   ============================================================ */
#divBloqueTestimonios .display-4, #divBloqueTestimonios h2,
#divBloqueGaleria .display-4, #divBloqueGaleria h2,
#divBloqueNewsletter .display-4, #divBloqueNewsletter h2,
[id*="DondeEstamos"] .display-4, [id*="DondeEstamos"] h2,
[id*="PuntosVenta"] .display-4, [id*="PuntosVenta"] h2 {
	font-size: clamp(1.4rem, 2.3vw, 2.1rem) !important;
	letter-spacing: 0.1em;
	margin-bottom: 2rem !important;
}

/* ============================================================
   CARTA TRADICIONAL (menú impreso): acento de marca + toggle día/noche
   ============================================================ */
.ct-body { --ct-acento: #4B2E2B; }  /* espresso: legible sobre el papel claro */

.ct-body .ct-modos { display: flex; justify-content: center; gap: 0; max-width: 1040px; margin: 0 auto 1.8rem; }
.ct-body .ct-modo-btn {
	display: inline-flex; align-items: center; gap: 6px;
	border: 1px solid #d8c6b0; background: transparent; color: #8C5A3C;
	font-family: "Montserrat", sans-serif; font-size: 12px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.12em; padding: 9px 22px; cursor: pointer;
}
.ct-body .ct-modo-btn:first-child { border-radius: 2px 0 0 2px; border-right: none; }
.ct-body .ct-modo-btn:last-child { border-radius: 0 2px 2px 0; }
.ct-body .ct-modo-btn .material-symbols-rounded { font-size: 17px; }
.ct-body .ct-modo-btn.activa { background: #4B2E2B; border-color: #4B2E2B; color: #FFF8F0; }

/* sólo el modo activo */
.ct-body[data-modo="dia"] .ct-seccion[data-modo="noche"] { display: none; }
.ct-body:not([data-modo="dia"]) .ct-seccion[data-modo="dia"] { display: none; }

/* link a la carta interactiva */
.ct-body .ct-link-interactiva {
	display: block; text-align: center; margin: 0.5rem auto 2.5rem;
	font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.16em; color: #8C5A3C;
}
.ct-body .ct-link-interactiva:hover { color: #4B2E2B; }

/* link a la carta impresa desde la interactiva */
.carta-body .carta-link-impresa {
	display: block; text-align: center; margin: 4px auto 0;
	font-family: "Montserrat", sans-serif; font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: 0.16em; color: var(--carta-tinta-suave);
}
.carta-body .carta-link-impresa:hover { color: var(--carta-acento); }

/* La carta TRADICIONAL es papel claro: NO debe heredar el tema oscuro del
   sitio (section{bg:negro}, p{color:hueso}, h*{uppercase}). Lo neutralizo. */
.ct-body section, .ct-body .ct-seccion { background: transparent !important; }
.ct-body h1, .ct-body h2, .ct-body h3, .ct-body h4 {
	color: var(--ct-tinta);
	text-transform: none;
	letter-spacing: normal;
}
.ct-body p { color: var(--ct-tinta); }
.ct-body .ct-plato-desc, .ct-body .ct-seccion-sub, .ct-body .ct-texto { color: var(--ct-gris) !important; }

/* Título del hero de la carta: blanco en día y noche (el hero siempre es oscuro/espresso) */
.carta-body .carta-hero-titulo { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; }

/* ============================================================
   BLOQUES estilo Holier: Intro (statement) + Ticker (marquee) + sombras
   ============================================================ */

/* --- Intro / statement editorial centrado --- */
#divBloqueIntro.wrapper { padding-top: clamp(4.5rem, 9vw, 9rem) !important; padding-bottom: clamp(4.5rem, 9vw, 9rem) !important; }
.delito-intro { max-width: 760px; margin: 0 auto; text-align: center; }
.delito-intro-eyebrow {
	display: block; font-family: "Montserrat", sans-serif; font-size: 0.72rem;
	letter-spacing: 0.28em; text-transform: uppercase; color: #C08552; margin-bottom: 1.6rem;
}
.delito-intro-titulo {
	font-family: "Montserrat", sans-serif; font-size: clamp(1.9rem, 4.4vw, 3.4rem);
	font-style: italic; font-weight: 400; line-height: 1.18; color: var(--delito-hueso); margin: 0 0 1.8rem;
}
.delito-intro-texto { font-size: 1.05rem; line-height: 1.9; color: #C2C2C2; font-weight: 300; margin: 0 auto 2.4rem; max-width: 620px; }
.delito-intro-cta {
	display: inline-block; border: 1px solid var(--delito-hueso); color: var(--delito-hueso);
	padding: 14px 40px; font-family: "Montserrat", sans-serif; font-size: 11px; letter-spacing: 0.22em;
	text-transform: uppercase; font-weight: 600; transition: background-color .2s ease, color .2s ease;
}
.delito-intro-cta:hover { background: var(--delito-hueso); color: var(--delito-negro); }

/* --- Sombras suaves en las imágenes de las secciones (look Holier) --- */
#divBloqueNuestraCarta figure img { box-shadow: 0 40px 80px -24px rgba(0,0,0,0.7); }
#divBloqueBandaAmbiente .card-img-top img { box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6); }

/* ============================================================
   HEADER tipo Holier: logo + tagline, fondo transparente, sin reveal
   (reemplaza al Intro anterior). #divBloqueHeader = nuevo id del bloque.
   ============================================================ */
#divBloqueHeader.wrapper, #divBloqueIntro.wrapper {
	background: transparent !important;
	padding-top: clamp(4rem, 8vw, 7rem) !important;
	padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}
/* que NO reaparezca/animar al scrollear */
#divBloqueHeader, #divBloqueHeader *, #divBloqueIntro, #divBloqueIntro * {
	animation: none !important;
	transition: none !important;
	opacity: 1 !important;
	transform: none !important;
}
.delito-header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.delito-header-logo { width: clamp(170px, 21vw, 260px); height: auto; display: block; }
.delito-header-tag {
	font-family: "Montserrat", sans-serif; font-size: 0.76rem; letter-spacing: 0.34em;
	text-transform: uppercase; color: #C08552; font-weight: 600;
}

/* ============================================================
   NAVBAR transparente sobre el hero (estilo Holier/elfogon).
   El <header> se superpone al hero; al scrollear, .navbar-stick
   le devuelve el fondo sólido.
   ============================================================ */
/* Solo en el HOME (tiene #divPortadas): header overlay transparente sobre
   el hero. En páginas internas (tienda/secciones) queda sólido. */
body:has(#divPortadas) header.wrapper.bg-color-secundario {
	background: transparent !important;
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 1020;
}
/* SOLO el navbar original (dentro de header.wrapper) es transparente; el
   clon (.navbar-clone, fixed) queda excluido para no perder el fondo. */
body:has(#divPortadas) header.wrapper .navbar.navbar-bg-color-secundario { background: transparent !important; }
@media (min-width: 991.98px) { body:has(#divPortadas) #mobileMenu { background: transparent; } }
@media (max-width: 991.98px) { .navbar-dark .navbar-nav .nav-link { color: #ffffff; } }

/* El navbar clonado (sticky que baja al scrollear) SIEMPRE con fondo sólido.
   Está oculto arriba (translateY(-100%)); al stickear baja ya con fondo. */
.navbar-clone, .navbar-clone.navbar-bg-color-secundario, .navbar-stick { background: var(--delito-negro) !important; }
.navbar-unstick + div nav { box-shadow: none; }

/* ============================================================
   TICKERS estilo Holier: mosaico de DOS filas que scrollean en
   sentido opuesto, fotos de ancho variado pegadas (llenan la celda),
   con un pill "Ver la carta" centrado y superpuesto.
   ============================================================ */
#divBloqueTicker.wrapper {
	padding: clamp(1.5rem, 3vw, 3rem) 0 !important;
	overflow: hidden; background: var(--delito-negro) !important;
}
#divBloqueTicker .container, #divBloqueTicker .row, #divBloqueTicker .col-12 {
	max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}

.delito-mosaic {
	--mh: clamp(290px, 36vw, 480px);   /* alto de cada fila */
	position: relative;
	display: flex; flex-direction: column; gap: 16px;
	overflow: hidden; width: 100%;
}
.delito-mrow { overflow: hidden; width: 100%; }
.delito-mtrack { display: flex; gap: 16px; width: max-content; will-change: transform; }
.delito-mrow-a .delito-mtrack { animation: delitoMosaicL 140s linear infinite; }
.delito-mrow-b .delito-mtrack { animation: delitoMosaicR 140s linear infinite; }
/* las filas NO se detienen en hover (sin animation-play-state: paused) */
/* la fila de arriba se funde con el fondo por su borde SUPERIOR; la de
   abajo, por su borde INFERIOR (máscara de gradiente vertical) */
.delito-mrow-a {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
	        mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
}
.delito-mrow-b {
	-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%);
	        mask-image: linear-gradient(to top, transparent 0%, #000 45%);
}

.delito-mosaic .mi {
	position: relative;
	flex: 0 0 auto; height: var(--mh); margin: 0;
	aspect-ratio: 3 / 4;          /* verticales pero más anchas */
	border-radius: 24px; overflow: hidden;
	box-shadow: none !important;
	background: var(--delito-panel);
}
/* velo oscuro uniforme: apaga las fotos incluso en las zonas claras */
.delito-mosaic .mi::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: rgba(10, 10, 10, 0.30); pointer-events: none;
}
/* el tema redondea/recuadra figuras dentro de [id^=divBloque]: forzamos
   el radius del mosaico también sobre la <figure> y el <img> internos */
.delito-mosaic .mi, .delito-mosaic .mi img { border-radius: 24px !important; }
/* (todas las celdas comparten el aspect-ratio 2/3 definido en .mi) */
.delito-mosaic .mi img {
	width: 100% !important; height: 100% !important;
	object-fit: cover !important; display: block;
	box-shadow: none !important; filter: none;
}

/* CTA central: usa el look estándar .btn.btn-primary de la home;
   acá solo lo centramos (posicionamiento absoluto) y le damos relieve */
.delito-mosaic-cta {
	/* centrado SIN transform (inset+margin auto) para no pelear con el
	   transform propio del .btn en hover -> sin flick de posición */
	position: absolute; inset: 0; margin: auto;
	width: fit-content; height: fit-content;
	z-index: 5; white-space: nowrap;
	box-shadow: 0 18px 45px -10px rgba(0,0,0,0.75);
}

@keyframes delitoMosaicL { from { transform: translateX(0); }        to { transform: translateX(-50%); } }
@keyframes delitoMosaicR { from { transform: translateX(-50%); }     to { transform: translateX(0); } }

/* ============================================================
   BLOQUES estilo Holier (réplica fiel):
   · "Menu"  (arriba del ticker): flores + titular display + bajada.
     Junto al ticker (galería) reproduce la sección "Menu" de Holier.
   · "About" (abajo del ticker): foto full-bleed + overlay centrado
     (titular + bajada + pill caramelo).
   Tipografía display: Forum (serif). Acento crema #FFEDD8.
   ============================================================ */

/* --- Titular display serif (Forum), compartido por Menu y About --- */
#divBloqueMenu .delito-holier-title,
#divBloqueAbout .delito-holier-title {
	font-family: "Forum", "Cormorant Garamond", Georgia, serif !important;
	font-weight: 400 !important;
	font-size: clamp(2.7rem, 7.2vw, 5.25rem) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.02em !important;
	text-transform: uppercase !important;
	color: #FFEDD8 !important;
	margin: 0 !important;
}

/* --- Pill caramelo cuadrado (idéntico al botón Holier) --- */
.delito-holier-btn {
	display: inline-block;
	background: #F1C287;
	color: #0F0F0F !important;
	padding: 16px 40px;
	border: 0; border-radius: 0;
	font-family: "Montserrat", sans-serif;
	font-size: 0.8rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	white-space: nowrap;
}
.delito-holier-btn:hover { background: #F6D3A2; color: #0F0F0F !important; }

/* --- Bajada (texto de apoyo) de ambos bloques --- */
.delito-menu-text, .delito-about-text {
	font-size: clamp(1rem, 1.5vw, 1.375rem);
	line-height: 1.55; font-weight: 400; margin: 0;
}
.delito-menu-text  { color: #E7DECF; max-width: 620px; }
.delito-about-text { color: #EDE5D7; max-width: 600px; }

/* ============================================================
   "Menu" — cabecera arriba del ticker (flores + título + bajada)
   ============================================================ */
/* El theme zerea el padding-top de un .wrapper que sigue a otro .wrapper
   (section.wrapper:not(#divPortadas) + section.wrapper, esp. 1,2,2). Para
   ganarle subimos especificidad con las clases que el bloque siempre trae
   en el home (.bg-gray.pt-6). */
#divBloqueMenu.wrapper.bg-gray.pt-6 {
	background: var(--delito-negro) !important;
	padding-top: clamp(3.5rem, 6vw, 5.5rem) !important;
	padding-bottom: clamp(1.5rem, 2.5vw, 2.5rem) !important;
}
#divBloqueMenu, #divBloqueMenu * {
	animation: none !important; transition: none !important;
	opacity: 1 !important; transform: none !important;
}
.delito-menu-head {
	max-width: 840px; margin: 0 auto; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 1.7rem;
}
.delito-menu-stars { display: flex; gap: 0.65rem; }
.delito-menu-stars span {
	width: 22px; height: 25px; display: block; background-color: #FFEDD8;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2027%27%3E%3Cpath%20d%3D%27M%2016.349%205.84%20L%2016.349%204.533%20C%2016.349%203.218%2015.939%202.133%2015.118%201.28%20C%2014.297%200.427%2013.258%200%2012%200%20C%2010.638%200%209.572%200.436%208.803%201.307%20C%208.035%202.178%207.651%203.342%207.651%204.8%20L%207.651%205.2%20C%207.651%205.271%207.659%205.333%207.677%205.387%20L%207.703%205.84%20C%206.41%204.898%205.249%204.427%204.218%204.427%20C%203.415%204.427%202.646%204.702%201.913%205.253%20C%201.214%205.769%200.699%206.444%200.367%207.28%20C%200.122%207.867%200%208.453%200%209.04%20C%200%2010.836%201.013%2012.204%203.039%2013.147%20L%203.432%2013.333%20C%201.144%2014.4%200%2015.84%200%2017.653%20C%200%2018.88%200.419%2019.956%201.258%2020.88%20C%202.096%2021.804%203.092%2022.267%204.245%2022.267%20C%205.293%2022.267%206.332%2021.884%207.362%2021.12%20L%207.703%2020.853%20C%207.668%2021.209%207.651%2021.636%207.651%2022.133%20C%207.651%2023.467%208.061%2024.556%208.882%2025.4%20C%209.703%2026.244%2010.742%2026.667%2012%2026.667%20C%2013.38%2026.667%2014.45%2026.227%2015.21%2025.347%20C%2015.969%2024.467%2016.349%2023.316%2016.349%2021.893%20L%2016.349%2020.853%20C%2017.642%2021.796%2018.795%2022.267%2019.808%2022.267%20C%2020.943%2022.267%2021.926%2021.8%2022.755%2020.867%20C%2023.585%2019.933%2024%2018.862%2024%2017.653%20C%2024%2015.84%2022.987%2014.462%2020.961%2013.52%20L%2020.568%2013.333%20C%2022.856%2012.267%2024%2010.836%2024%209.04%20C%2024%207.884%2023.59%206.827%2022.769%205.867%20C%2021.948%204.907%2020.956%204.427%2019.795%204.427%20C%2018.633%204.427%2017.607%204.8%2016.716%205.547%20Z%20M%2014.148%2010.347%20C%2016.175%207.342%2018.052%205.84%2019.782%205.84%20C%2020.498%205.84%2021.148%206.169%2021.734%206.827%20C%2022.319%207.484%2022.611%208.222%2022.611%209.04%20C%2022.611%2011.244%2020.271%2012.551%2015.589%2012.96%20L%2015.589%2013.733%20C%2017.913%2013.929%2019.664%2014.356%2020.843%2015.013%20C%2022.022%2015.671%2022.611%2016.551%2022.611%2017.653%20C%2022.611%2018.453%2022.328%2019.187%2021.76%2019.853%20C%2021.192%2020.52%2020.533%2020.853%2019.782%2020.853%20C%2018.017%2020.853%2016.14%2019.342%2014.148%2016.32%20L%2013.467%2016.72%20C%2014.463%2018.782%2014.961%2020.524%2014.961%2021.947%20C%2014.961%2024.151%2013.974%2025.253%2012%2025.253%20C%2011.057%2025.253%2010.323%2024.96%209.799%2024.373%20C%209.293%2023.751%209.039%2022.969%209.039%2022.027%20C%209.039%2020.604%209.537%2018.836%2010.533%2016.72%20L%209.851%2016.32%20C%207.86%2019.342%205.982%2020.853%204.218%2020.853%20C%203.502%2020.853%202.851%2020.538%202.266%2019.907%20C%201.681%2019.276%201.389%2018.524%201.389%2017.653%20C%201.389%2015.449%203.72%2014.142%208.384%2013.733%20L%208.384%2012.96%20C%203.72%2012.569%201.389%2011.262%201.389%209.04%20C%201.389%208.258%201.668%207.529%202.227%206.853%20C%202.786%206.178%203.45%205.84%204.218%205.84%20C%205.948%205.84%207.825%207.342%209.851%2010.347%20L%2010.533%209.973%20C%209.537%207.893%209.039%206.116%209.039%204.64%20C%209.039%203.698%209.293%202.916%209.799%202.293%20C%2010.323%201.707%2011.057%201.413%2012%201.413%20C%2013.974%201.413%2014.961%202.507%2014.961%204.693%20C%2014.961%206.133%2014.463%207.893%2013.467%209.973%20Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2027%27%3E%3Cpath%20d%3D%27M%2016.349%205.84%20L%2016.349%204.533%20C%2016.349%203.218%2015.939%202.133%2015.118%201.28%20C%2014.297%200.427%2013.258%200%2012%200%20C%2010.638%200%209.572%200.436%208.803%201.307%20C%208.035%202.178%207.651%203.342%207.651%204.8%20L%207.651%205.2%20C%207.651%205.271%207.659%205.333%207.677%205.387%20L%207.703%205.84%20C%206.41%204.898%205.249%204.427%204.218%204.427%20C%203.415%204.427%202.646%204.702%201.913%205.253%20C%201.214%205.769%200.699%206.444%200.367%207.28%20C%200.122%207.867%200%208.453%200%209.04%20C%200%2010.836%201.013%2012.204%203.039%2013.147%20L%203.432%2013.333%20C%201.144%2014.4%200%2015.84%200%2017.653%20C%200%2018.88%200.419%2019.956%201.258%2020.88%20C%202.096%2021.804%203.092%2022.267%204.245%2022.267%20C%205.293%2022.267%206.332%2021.884%207.362%2021.12%20L%207.703%2020.853%20C%207.668%2021.209%207.651%2021.636%207.651%2022.133%20C%207.651%2023.467%208.061%2024.556%208.882%2025.4%20C%209.703%2026.244%2010.742%2026.667%2012%2026.667%20C%2013.38%2026.667%2014.45%2026.227%2015.21%2025.347%20C%2015.969%2024.467%2016.349%2023.316%2016.349%2021.893%20L%2016.349%2020.853%20C%2017.642%2021.796%2018.795%2022.267%2019.808%2022.267%20C%2020.943%2022.267%2021.926%2021.8%2022.755%2020.867%20C%2023.585%2019.933%2024%2018.862%2024%2017.653%20C%2024%2015.84%2022.987%2014.462%2020.961%2013.52%20L%2020.568%2013.333%20C%2022.856%2012.267%2024%2010.836%2024%209.04%20C%2024%207.884%2023.59%206.827%2022.769%205.867%20C%2021.948%204.907%2020.956%204.427%2019.795%204.427%20C%2018.633%204.427%2017.607%204.8%2016.716%205.547%20Z%20M%2014.148%2010.347%20C%2016.175%207.342%2018.052%205.84%2019.782%205.84%20C%2020.498%205.84%2021.148%206.169%2021.734%206.827%20C%2022.319%207.484%2022.611%208.222%2022.611%209.04%20C%2022.611%2011.244%2020.271%2012.551%2015.589%2012.96%20L%2015.589%2013.733%20C%2017.913%2013.929%2019.664%2014.356%2020.843%2015.013%20C%2022.022%2015.671%2022.611%2016.551%2022.611%2017.653%20C%2022.611%2018.453%2022.328%2019.187%2021.76%2019.853%20C%2021.192%2020.52%2020.533%2020.853%2019.782%2020.853%20C%2018.017%2020.853%2016.14%2019.342%2014.148%2016.32%20L%2013.467%2016.72%20C%2014.463%2018.782%2014.961%2020.524%2014.961%2021.947%20C%2014.961%2024.151%2013.974%2025.253%2012%2025.253%20C%2011.057%2025.253%2010.323%2024.96%209.799%2024.373%20C%209.293%2023.751%209.039%2022.969%209.039%2022.027%20C%209.039%2020.604%209.537%2018.836%2010.533%2016.72%20L%209.851%2016.32%20C%207.86%2019.342%205.982%2020.853%204.218%2020.853%20C%203.502%2020.853%202.851%2020.538%202.266%2019.907%20C%201.681%2019.276%201.389%2018.524%201.389%2017.653%20C%201.389%2015.449%203.72%2014.142%208.384%2013.733%20L%208.384%2012.96%20C%203.72%2012.569%201.389%2011.262%201.389%209.04%20C%201.389%208.258%201.668%207.529%202.227%206.853%20C%202.786%206.178%203.45%205.84%204.218%205.84%20C%205.948%205.84%207.825%207.342%209.851%2010.347%20L%2010.533%209.973%20C%209.537%207.893%209.039%206.116%209.039%204.64%20C%209.039%203.698%209.293%202.916%209.799%202.293%20C%2010.323%201.707%2011.057%201.413%2012%201.413%20C%2013.974%201.413%2014.961%202.507%2014.961%204.693%20C%2014.961%206.133%2014.463%207.893%2013.467%209.973%20Z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ============================================================
   "About" — banda full-bleed abajo del ticker (foto + overlay)
   ============================================================ */
#divBloqueAbout.wrapper { background: var(--delito-negro) !important; padding: 0 !important; }
#divBloqueAbout .container, #divBloqueAbout .row, #divBloqueAbout .col-12 {
	max-width: 100% !important; padding: 0 !important; margin: 0 !important;
}
#divBloqueAbout, #divBloqueAbout * {
	animation: none !important; transition: none !important;
	opacity: 1 !important; transform: none !important;
}
.delito-about {
	position: relative; width: 100%;
	min-height: clamp(540px, 78vh, 820px);
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.delito-about-bg {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important;
	object-fit: cover; display: block; z-index: 0;
	box-shadow: none !important; border-radius: 0 !important;
}
.delito-about::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(15,15,15,0.55) 0%, rgba(15,15,15,0.35) 45%, rgba(15,15,15,0.65) 100%),
		radial-gradient(ellipse 70% 60% at 50% 45%, rgba(15,15,15,0.10) 0%, rgba(15,15,15,0.55) 100%);
}
.delito-about-inner {
	position: relative; z-index: 2; text-align: center;
	display: flex; flex-direction: column; align-items: center; gap: 1.7rem;
	max-width: 760px; padding: 4rem 1.5rem;
}

/* ============================================================
   HERO: esfumado vertical hacia el negro (como Holier). Se aplica a la
   CAPA DE LA IMAGEN/VIDEO (.swiper-overlay, z-index 1), que está por
   DEBAJO del contenido (.swiper-content, z-index 3) → así oscurece solo
   la foto/video y NO el texto ni los botones. Muy sutil arriba, sólido
   abajo para fundirse sin costura con el bloque "Menu".
   ============================================================ */
/* El theme ya pinta el velo de la imagen en `.swiper-slide.bg-image::after`
   (absolute, inset:0, z-index:1, pointer-events:none) POR DEBAJO del
   contenido (.swiper-content, z-index:3). Sólo pisamos su gradient: velo
   parejo y suave arriba (legibilidad del título) y NEGRO sólido abajo para
   fundirse con el bloque "Menu". Los botones/texto quedan intactos. */
body:has(#divPortadas) #divPortadas .swiper-slide.bg-image::after {
	background: linear-gradient(to bottom,
		rgba(15,15,15,0.45) 0%,
		rgba(15,15,15,0.28) 38%,
		rgba(15,15,15,0.45) 58%,
		rgba(15,15,15,0.82) 76%,
		#0F0F0F 90%,
		#0F0F0F 100%) !important;
}

/* ============================================================
   "Experiencias" — Degustaciones + Eventos privados.
   Mismo ADN (negro, Forum, crema, acento caramelo) pero con un layout
   DISTINTIVO: dúo de paneles fotográficos con filete caramelo, ícono,
   contenido anclado abajo-izquierda y micro-interacciones en hover
   (zoom + brillo de la foto, filete encendido, flecha que avanza).
   ============================================================ */
/* Idem Menu: gano especificidad para que el theme no le ponga padding-top:0
   (Experiencias sigue al About, que es .wrapper) */
#divBloqueExperiencias.wrapper.bg-gray.pt-6 {
	background: var(--delito-negro) !important;
	padding-top: clamp(4rem, 7vw, 6.5rem) !important;
	padding-bottom: clamp(4rem, 7vw, 6.5rem) !important;
}
.delito-duo { width: 100%; }
.delito-duo-eyebrow {
	display: block; font-family: "Montserrat", sans-serif; font-size: 0.72rem;
	letter-spacing: 0.28em; text-transform: uppercase; color: #C08552; margin-bottom: 1.3rem;
}
.delito-duo-h2 {
	font-size: clamp(2.1rem, 5vw, 3.9rem) !important;
	margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem) !important;
}
.delito-duo-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2vw, 1.75rem); text-align: left;
}
.delito-duo-card {
	position: relative; display: block; overflow: hidden; isolation: isolate;
	min-height: clamp(380px, 46vh, 520px);
	border-radius: 16px; background: #0F0F0F;
}
.delito-duo-bg {
	position: absolute; inset: 0; width: 100% !important; height: 100% !important;
	object-fit: cover; display: block; z-index: 0;
	filter: brightness(0.6) saturate(0.95);
	transition: transform .6s ease, filter .6s ease;
	box-shadow: none !important; border-radius: 0 !important;
}
.delito-duo-card::after {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(to top, rgba(10,10,10,0.93) 0%, rgba(10,10,10,0.5) 42%, rgba(10,10,10,0.12) 100%);
}
/* La tarjeta en hover hace zoom IN; la otra NO se achica (perdería el
   border-radius al verse los bordes rectos de la foto), solo se atenúa
   para que la del hover resalte. */
.delito-duo-card:hover .delito-duo-bg { transform: scale(1.06); filter: brightness(0.74) saturate(1); }
.delito-duo-grid:hover .delito-duo-card:not(:hover) .delito-duo-bg { filter: brightness(0.42) saturate(0.9); }
.delito-duo-body {
	position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
	padding: clamp(1.5rem, 3vw, 2.6rem);
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.65rem;
}
.delito-duo-title {
	font-family: "Forum", "Cormorant Garamond", Georgia, serif !important;
	font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important;
	font-size: clamp(1.7rem, 2.8vw, 2.4rem) !important; line-height: 1.04 !important;
	color: #FFEDD8 !important; margin: 0 !important;
}
.delito-duo-text {
	font-size: 0.98rem; line-height: 1.6; color: #D8CFC1; font-weight: 400;
	margin: 0; max-width: 44ch;
}
.delito-duo-cta {
	display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem;
	font-family: "Montserrat", sans-serif; font-size: 0.72rem; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase; color: #F1C287;
	transition: color .2s ease;
}
.delito-duo-card:hover .delito-duo-cta { color: #F6D3A2; }
.delito-duo-link { position: absolute; inset: 0; z-index: 3; }

@media (max-width: 767.98px) {
	.delito-duo-grid { grid-template-columns: 1fr; }
	/* en mobile el contenido va en flujo (no anclado abajo) para que NUNCA
	   se recorte el ícono/título; la foto sigue de fondo (absolute inset:0) */
	.delito-duo-card { min-height: clamp(300px, 62vw, 400px); display: flex; flex-direction: column; justify-content: flex-end; }
	.delito-duo-body { position: relative; }
}

/* ============================================================
   FIX flicker del botón CTA del navbar: el theme aplica
   `.btn:hover { transform: translateY(-0.15rem) }`, así que al acercarse
   lento al borde inferior el botón "salta" y el cursor entra/sale en loop.
   Anulamos el desplazamiento (mantiene el feedback de color/sombra).
   ============================================================ */
.boton-cta-menu:hover, .navbar-clone .boton-cta-menu:hover { transform: none !important; }