/**
 * Piel editorial de Dragón Chino sobre fse-public.css -- NO se toca ese
 * archivo. Misma estrategia de dos capas que lafragata-config/heladeria-config:
 * 1) Se REDECLARAN los custom properties --fse-* que fse-public.css ya usa
 *    en todos sus componentes (botones, precios, tarjetas…) -- heredan la
 *    paleta rojo imperial + dorado + crema y la tipografía nueva gratis.
 * 2) Overrides puntuales solo donde la estructura visual cambia de verdad
 *    (header propio, hero oscuro de foto, sidebar de categorías → fila de
 *    píldoras, catálogo numerado sobre fondo oscuro, combos, reseñas).
 *    La grilla de productos (.fse-product-grid) YA es 2 columnas con foto
 *    cuadrada por defecto -- coincide con la referencia sin tocar el layout,
 *    solo se repintan colores/tipografía.
 */

/* A propósito en :root, no en .dgc-page: el carrito flotante/drawer/sheet de
   FSE se incluyen como HERMANOS de .dgc-page en el DOM, no como
   descendientes -- si quedaran scopeados a .dgc-page, heredarían la paleta
   vieja de FSE en vez de la de Dragón Chino. */
:root {
	--fse-hot:      #7a1520;
	--fse-fire:     #4c0e15;
	--fse-ember:    #7a1520;
	--fse-gold:     #7a1520;
	--fse-gold-dim: #4c0e15;
	--fse-cream:    #f7f1e6;
	--fse-sand:     #f0e4d0;
	--fse-carbon:   #241512;
	--fse-smoke:    #2b1815;
	--fse-text:     #241512;
	--fse-muted:    #83726a;
	--fse-border:   rgba(122, 21, 32, 0.18);
	--fse-surface:  #ffffff;
	--fse-white:    #ffffff;
	--fse-font-display: "Playfair Display", Georgia, serif;
	--fse-font-body:    "Inter", -apple-system, sans-serif;

	--dgc-red:        #7a1520;
	--dgc-red-dark:   #4c0e15;
	--dgc-gold:       #c9a147;
	--dgc-gold-soft:  rgba(201, 161, 71, .16);
	--dgc-cream:      #f7f1e6;
	--dgc-cream-2:    #ffffff;
	--dgc-ink:        #241512;
	--dgc-muted:      #83726a;
	--dgc-border:     rgba(122, 21, 32, 0.18);
	--dgc-dark:       #170d0c;
	--dgc-dark-2:     #241412;
	--dgc-dark-border: rgba(201, 161, 71, .22);
}

body.fse-page-shell {
	background: var(--dgc-cream);
	color: var(--dgc-ink);
	font-family: var(--fse-font-body);
	margin: 0;
}

.dgc-display { font-family: var(--fse-font-display); font-weight: 700; }
.dgc-eyebrow {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dgc-red);
	margin-bottom: 8px;
}
.dgc-eyebrow--gold { color: var(--dgc-gold); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.dgc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: var(--dgc-cream);
	border-bottom: 1px solid var(--dgc-border);
}
.dgc-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--dgc-ink); }
.dgc-brand__badge {
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--dgc-red);
	border: 2px solid var(--dgc-gold);
	color: var(--dgc-gold);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.7rem;
	line-height: 1;
	font-weight: 700;
	flex: 0 0 auto;
}
.dgc-brand__word-wrap { display: flex; flex-direction: column; line-height: 1.15; }
.dgc-brand__word { font-family: var(--fse-font-display); font-weight: 700; font-size: 1.2rem; }
.dgc-brand__sub { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--dgc-muted); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.dgc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: .92rem;
	text-decoration: none;
	cursor: pointer;
	border: none;
	padding: 15px 30px;
	border-radius: 999px;
	transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.dgc-btn--sm { padding: 10px 20px; font-size: .84rem; }
.dgc-btn--solid { background: var(--dgc-red); color: #fff; }
.dgc-btn--solid:hover { background: var(--dgc-red-dark); transform: translateY(-1px); }
.dgc-btn--outline-gold { background: transparent; color: var(--dgc-gold); border: 1px solid var(--dgc-gold); }
.dgc-btn--outline-gold:hover { background: var(--dgc-gold-soft); transform: translateY(-1px); }

/* ── Hero (home) ─────────────────────────────────────────────────────────── */
.dgc-hero {
	position: relative;
	min-height: 66vh;
	display: flex;
	align-items: center;
	background: radial-gradient(120% 100% at 20% 0%, #35181a 0%, #1c0f0d 55%, #120909 100%);
	background-size: cover;
	background-position: center;
	padding: 60px 24px;
	overflow: hidden;
}
.dgc-hero::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(18,9,9,.94) 0%, rgba(18,9,9,.72) 42%, rgba(18,9,9,.35) 100%);
	pointer-events: none;
}
.dgc-hero__content { position: relative; z-index: 1; max-width: 620px; }
.dgc-hero__badge {
	display: inline-flex; align-items: center; gap: 8px;
	background: transparent;
	color: var(--dgc-gold);
	font-family: "Inter", sans-serif;
	font-size: .78rem; font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 9px 18px;
	border: 1px solid var(--dgc-dark-border);
	border-radius: 999px;
	margin-bottom: 22px;
}
.dgc-hero__title {
	font-size: clamp(2.1rem, 7vw, 3.1rem);
	line-height: 1.14;
	margin: 0 0 20px;
	color: #fbf5ea;
}
.dgc-hero__rule { display: block; width: 70px; height: 2px; background: var(--dgc-gold); margin: 0 0 22px; }
.dgc-hero__lead { color: rgba(251,245,234,.78); font-size: 1.04rem; line-height: 1.65; margin: 0 0 30px; max-width: 480px; }
.dgc-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Secciones genéricas (claras) ────────────────────────────────────────── */
.dgc-section { padding: 56px 20px; max-width: 980px; margin: 0 auto; text-align: center; }
.dgc-section__title { font-size: clamp(1.7rem, 5vw, 2.2rem); margin: 0 0 34px; }

/* ── Catálogo numerado (fondo oscuro) ────────────────────────────────────── */
.dgc-catalogo-dark {
	background: linear-gradient(180deg, #1c0f0d 0%, #120909 100%);
	padding: 56px 20px 60px;
	text-align: left;
}
.dgc-catalogo-dark .dgc-eyebrow { text-align: left; }
.dgc-catalogo-dark__title { color: #fbf5ea; font-size: clamp(1.8rem, 6vw, 2.4rem); margin: 0 0 12px; max-width: 720px; margin-left: auto; margin-right: auto; }
.dgc-catalogo-dark__sub { color: rgba(251,245,234,.62); max-width: 640px; margin: 0 auto 36px; line-height: 1.6; }
.dgc-catalogo-grid { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 720px; margin: 0 auto; }
@media (min-width: 640px) { .dgc-catalogo-grid { grid-template-columns: repeat(2, 1fr); } }
.dgc-catalogo-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: rgba(201, 161, 71, .06);
	border: 1px solid var(--dgc-dark-border);
	border-radius: 18px;
	padding: 26px 24px;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}
.dgc-catalogo-card:hover { background: rgba(201, 161, 71, .12); transform: translateY(-2px); }
.dgc-catalogo-card__num { font-family: var(--fse-font-display); font-size: 1.5rem; color: var(--dgc-gold); }
.dgc-catalogo-card__nombre { font-family: var(--fse-font-display); font-size: 1.15rem; font-weight: 700; color: #fbf5ea; }
.dgc-catalogo-card__link { font-size: .84rem; color: rgba(251,245,234,.65); }

/* ── Combos ──────────────────────────────────────────────────────────────── */
.dgc-combos-grid { display: grid; grid-template-columns: 1fr; gap: 18px; text-align: left; margin-top: 8px; }
@media (min-width: 640px) { .dgc-combos-grid { grid-template-columns: repeat(2, 1fr); } }
.dgc-combo-card {
	background: var(--dgc-cream-2);
	border: 1px solid var(--dgc-border);
	border-radius: 20px;
	padding: 28px 26px;
	box-shadow: 0 2px 14px rgba(36, 21, 18, .06);
}
.dgc-combo-card__nombre { font-size: 1.3rem; margin: 0 0 14px; }
.dgc-combo-card__items { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dgc-combo-card__items li { position: relative; padding-left: 18px; color: var(--dgc-muted); font-size: .94rem; }
.dgc-combo-card__items li::before { content: "•"; position: absolute; left: 0; color: var(--dgc-gold); font-weight: 700; }
.dgc-combo-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dgc-combo-card__precio { font-family: var(--fse-font-display); font-size: 1.5rem; color: var(--dgc-red); font-variant-numeric: tabular-nums; }

/* ── Reseñas ─────────────────────────────────────────────────────────────── */
.dgc-resenas-grid { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; margin-top: 8px; }
@media (min-width: 640px) { .dgc-resenas-grid { grid-template-columns: repeat(3, 1fr); } }
.dgc-resena-card {
	background: var(--dgc-cream-2);
	border: 1px solid var(--dgc-border);
	border-radius: 18px;
	padding: 24px;
	box-shadow: 0 2px 10px rgba(36, 21, 18, .06);
}
.dgc-resena-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.dgc-resena-card__avatar {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--dgc-red);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: .88rem;
	flex: 0 0 auto;
}
.dgc-resena-card__nombre { display: block; font-size: .96rem; }
.dgc-resena-card__estrellas { color: var(--dgc-gold); font-size: .82rem; letter-spacing: .05em; }
.dgc-resena-card__texto { margin: 0; line-height: 1.6; color: var(--dgc-ink); font-size: .94rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.dgc-footer { background: var(--dgc-dark); color: rgba(251,245,234,.85); padding: 50px 20px 30px; }
.dgc-footer__inner { max-width: 640px; margin: 0 auto; text-align: left; }
.dgc-footer__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.dgc-footer__badge {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--dgc-red);
	border: 2px solid var(--dgc-gold);
	color: var(--dgc-gold);
	display: flex; align-items: center; justify-content: center;
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 700;
	flex: 0 0 auto;
}
.dgc-footer__word { color: #fbf5ea; font-size: 1.25rem; }
.dgc-footer__desc { line-height: 1.65; max-width: 460px; margin: 0 0 22px; font-size: .92rem; }
.dgc-footer__social { display: flex; gap: 10px; margin-bottom: 30px; }
.dgc-footer__social-btn {
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--dgc-dark-border);
	display: flex; align-items: center; justify-content: center;
	text-decoration: none;
	font-size: 1rem;
}
.dgc-footer__links { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }
.dgc-footer__links a { color: rgba(251,245,234,.78); text-decoration: none; font-size: .92rem; }
.dgc-footer__links a:hover { color: var(--dgc-gold); }
.dgc-footer__copy { margin: 0; opacity: .55; font-size: .82rem; border-top: 1px solid var(--dgc-dark-border); padding-top: 22px; }

/* ── Encabezado editorial del catálogo (menu.php) ────────────────────────── */
.dgc-catalogo-head { padding: 32px 20px 4px; max-width: 720px; }
.dgc-catalogo-head .dgc-display { font-size: clamp(1.9rem, 6vw, 2.5rem); margin: 0 0 10px; line-height: 1.15; }
.dgc-catalogo-head__sub { color: var(--dgc-muted); margin: 0; line-height: 1.55; }

/* ── Buscador visible ─────────────────────────────────────────────────────
   Distinto del real (#fse-menu-buscar, oculto en el drawer) -- ver
   dgc-public.js, que le reenvía el valor. */
.dgc-buscador {
	position: relative;
	max-width: 720px;
	margin: 22px auto 0;
	padding: 0 12px;
}
.dgc-buscador__icono { position: absolute; left: 30px; top: 50%; transform: translateY(-50%); opacity: .55; font-size: .95rem; }
.dgc-buscador__input {
	width: 100%;
	box-sizing: border-box;
	font-family: "Inter", sans-serif;
	font-size: .96rem;
	background: #fff;
	border: 1px solid var(--dgc-border);
	border-radius: 999px;
	padding: 15px 20px 15px 46px;
	color: var(--dgc-ink);
}
.dgc-buscador__input::placeholder { color: var(--dgc-muted); }
.dgc-buscador__input:focus { outline: none; border-color: var(--dgc-red); }

/* ── Contenedor sticky de buscador + dos filas de filtro ──────────────────
   A pedido explícito del usuario (mismo criterio ya aplicado en
   heladeria-config): queda FIJO arriba mientras se hace scroll por la
   grilla de productos, cada fila con su PROPIO scroll horizontal si no
   entran todas las píldoras. */
.dgc-filtros-sticky {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--dgc-cream);
	padding-top: 6px;
	padding-bottom: 6px;
	box-shadow: 0 4px 10px rgba(36, 21, 18, .06);
	/* Bug real de Safari/iOS: mientras se desliza con el dedo la fila
	   horizontal de subcategorías (adentro de este sticky), el motor pierde
	   por un instante el alto reservado y la tapa el contenido de abajo --
	   parpadeo confirmado con video real del usuario. Forzar una capa de
	   composición propia (GPU) para este contenedor evita que el scroll
	   interno de la fila interfiera con el cálculo de altura del sticky. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
}

/* ── Filtro nivel 1: secciones ───────────────────────────────────────────── */
.dgc-secciones {
	display: flex;
	gap: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
	touch-action: pan-x;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 14px 12px 0;
	max-width: 720px;
	margin: 0 auto;
	box-sizing: border-box;
}
.dgc-secciones::-webkit-scrollbar { display: none; }
/* !important en los colores -- el tema de este sitio (Hello Elementor +
   Elementor Pro, ver el kit global de colores) trae su propio estilo por
   defecto para CUALQUIER <button> (acento rosa/magenta del kit), que le
   ganaba a esta regla por orden de carga aunque la especificidad fuera la
   misma -- bug real reportado por el usuario ("la barra de categorías está
   sin estilos"), confirmado en vivo: el botón activo se pintaba
   rgb(204,51,102) en vez del rojo de la paleta. Estos botones son
   contenido propio del plugin (no del builder de la página), así que
   ganarle al tema acá es correcto, no un parche frágil. */
.dgc-seccion-tab {
	flex: 0 0 auto;
	font-family: "Inter", sans-serif;
	font-size: .86rem;
	font-weight: 600;
	white-space: nowrap;
	background: #fff !important;
	border: 1px solid var(--dgc-border) !important;
	color: var(--dgc-ink) !important;
	padding: 10px 18px;
	border-radius: 999px;
	cursor: pointer;
}
.dgc-seccion-tab--active {
	background: var(--dgc-red) !important;
	border-color: var(--dgc-red) !important;
	color: #fff !important;
}

/* ── Filtro nivel 2: subcategorías -- sidebar del motor → fila de píldoras
   fse-public.css deja #fse-cat-nav como riel VERTICAL FIJO (position:fixed;
   left:0) para convivir con .fse-products, que le reserva ese ancho con
   margin-left. Se saca del flujo fijo -- position: static + reset de los
   ejes que fixed dejaba activos -- y se compensa el margin-left que ya no
   hace falta (mismo criterio que heladeria-config/lafragata-config).
   !important en las propiedades de geometría porque `position:fixed` de la
   regla base viene con varias propiedades juntas (top/left/bottom/width) y
   una fila horizontal contenida necesita ganarlas TODAS a la vez, sin
   depender de que el orden de carga de las hojas alcance por sí solo. */
.dgc-page .fse-menu-body,
#fse-menu-app.fse-menu-page { display: block; }
.dgc-page .fse-cat-nav,
#fse-menu-app .fse-cat-nav {
	position: static !important;
	top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
	z-index: auto !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
	touch-action: pan-x !important;
	transform: translateZ(0) !important;
	-webkit-transform: translateZ(0) !important;
	width: 100% !important;
	max-width: 720px !important;
	margin: 0 auto !important;
	height: auto !important;
	padding: 10px 12px 0 !important;
	box-sizing: border-box !important;
	gap: 8px;
	background: transparent;
	border-right: none;
	box-shadow: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.dgc-page .fse-cat-nav::-webkit-scrollbar,
#fse-menu-app .fse-cat-nav::-webkit-scrollbar { display: none; }
.dgc-page .fse-products,
#fse-menu-app .fse-products { margin-left: 0; max-width: 720px; padding: 0 20px 40px; margin-right: auto; margin-left: auto; }
/* Recorte cuadrado + borde con anillo dorado giratorio en el activo, igual
   criterio que lafragata-config (ver lfc-public.css) -- a pedido explícito
   del usuario, que mandó captura comparando las dos. El anillo en sí
   (`.btn-shine`, conic-gradient animado) ya lo agrega fse-public.js en TODA
   tab activa -- acá antes quedaba invisible porque el fondo activo era
   dorado sólido (el anillo dorado se perdía contra un fondo del mismo
   color); con fondo claro + solo borde, se ve. */
.dgc-page .fse-cat-tab,
#fse-menu-app .fse-cat-tab {
	flex-direction: row;
	flex-shrink: 0;
	width: auto;
	white-space: nowrap;
	background: transparent;
	border: 1px solid var(--dgc-border);
	border-radius: 4px;
	padding: 10px 16px;
	color: var(--dgc-ink);
	gap: 6px;
}
.dgc-page .fse-cat-tab__label,
#fse-menu-app .fse-cat-tab__label {
	font-family: "Inter", sans-serif;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.dgc-page .fse-cat-tab__emoji,
#fse-menu-app .fse-cat-tab__emoji { display: none; }
.dgc-page .fse-cat-tab--active,
#fse-menu-app .fse-cat-tab--active { background: var(--dgc-cream-2); border-color: var(--dgc-gold); color: var(--dgc-ink); }
.dgc-page .fse-cat-tab[hidden],
#fse-menu-app .fse-cat-tab[hidden] { display: none; }

.dgc-contador { max-width: 720px; margin: 14px auto 0; padding: 0 12px; color: var(--dgc-muted); font-size: .86rem; }

/* ── Grilla de productos -- ya es 2 columnas/foto cuadrada por defecto en
   fse-public.css, solo se ajustan radios/tarjeta al look redondeado. ───── */
.dgc-page .fse-product-grid,
#fse-menu-app .fse-product-grid { max-width: 720px; margin: 14px auto 0; padding: 0 12px 60px; gap: 10px; }
.dgc-page .fse-card,
#fse-menu-app .fse-card { border-radius: 18px; }
.dgc-page .fse-card__img-wrap,
#fse-menu-app .fse-card__img-wrap { border-radius: 18px 18px 0 0; }

/* ── Carrito -- legibilidad, mismo criterio que heladeria-config/
   lafragata-config (el carrito es HERMANO de .dgc-page en el DOM, sin
   scope). ───────────────────────────────────────────────────────────────── */
.fse-cart-item__precio,
.fse-cart-total__amount { color: var(--dgc-ink); }
.fse-cart-item__nombre { font-size: 1rem; }