/* ============================================================================ TEMA demo-1 — "VEGAN" (RESTAURANTE DEMO 1) FUENTE DE VERDAD: https://demo-1.tucartadigital.com/assets/css/config-demo.php (valores exactos volcados en scratchpad/config-demo-1.css) + revisión visual con Playwright (390×844): home, principal, sección/listado, ficha de plato, filtro de alérgenos y contacto. Identidad de la demo: · VERDE corporativo rgb(0,174,83) = #00ae53 (bordes, modales, contacto, iconos de sección) · banda de cabecera de sección rgb(0,171,83) = #00ab53 · Títulos de producto / botones AZUL MARINO rgb(7,36,90) = #07245a · Precios NARANJA rgb(255,98,0) = #ff6200 · alérgeno activo rgb(255,121,0)=#ff7900 · Descripciones GRIS rgb(153,153,153) = #999999 · Fuente Montserrat (auto-hospedada; SIN @import de Google Fonts) Estructura propia (base.css no la hace por variable): · Botones de categoría en CAJA (borde verde completo + esquinas redondeadas), no en fila. · Pestañas de submenú con fondo oscuro translúcido en TODAS. · Textos del contacto en blanco sobre el verde (slots no cableados en base). Reglas de oro: los colores/fuentes/tamaños van como DEFAULTS en `:root{}` PLANO (para que el design.css de cada carta los pueda pisar); lo estructural va prefijado con `html[data-theme="demo-1"]`. ============================================================================ */ :root { /* ---- Paleta base (variables --carta-*) ---- */ --carta-bg: #ffffff; --carta-fg: #07245a; /* azul marino (títulos/cuerpo) */ --carta-primary: #00ae53; /* verde corporativo */ --carta-bar: #d5eedc; /* verde claro (barra de subsección) */ --carta-muted: #999999; /* gris descripciones */ --carta-line: #cccccc; /* separadores */ --carta-serif: 'Montserrat', Roboto, Helvetica, Arial, sans-serif; --carta-sans: 'Montserrat', Roboto, Helvetica, Arial, sans-serif; /* Colores del editor de Diseño (paleta principal del tenant) */ --d-colores-principal-1: #ffffff; --d-colores-principal-2: #07245a; --d-colores-principal-3: #00ae53; /* ===================== HOME (selector de idiomas) ===================== Fondo transparente (el verde lo aporta la foto fondo-home.jpg del tenant); tarjeta de idiomas BLANCA, texto navy MAYÚSCULAS 16, borde gris #bcbcbc. */ --d-home-fondo-pagina-color: rgba(255, 255, 255, 0); /* html.home rgba(255,255,255,0) */ --d-home-logo-bg-color: rgba(255, 255, 255, 0); /* .logo-home transparente */ --d-home-botones-idiomas-bg-color: #ffffff; /* .idiomas fondo blanco */ --d-home-botones-bg-color: rgba(255, 255, 255, 0); /* h2.boton sin fondo */ --d-home-botones-border-color: #bcbcbc; /* separador rgb(188,188,188) */ --d-home-botones-text-color: #07245a; /* div.title navy */ --d-home-botones-format: uppercase; --d-home-botones-font: 'Montserrat', Roboto, sans-serif; --d-home-botones-size: 16; /* div.title 16px */ /* ===================== PRINCIPAL ===================== Fondo blanco; cabecera con banda verde e iconos blancos; botón atrás verde sobre caja blanca; botones de categoría en caja con borde verde y texto navy. */ --d-principal-fondo-pagina-color: #ffffff; /* html.principal blanco */ --d-principal-cabecera-bg-color: #00ab53; /* banda verde de cabecera de sección */ --d-principal-cabecera-iconos-color: #ffffff; /* hamburguesa/filtro blancos */ --d-principal-cabecera-icono-atras-color: #00ae53; /* flecha atrás verde */ --d-principal-cabecera-icono-atras-bg-color: #ffffff; /* sobre caja blanca */ --d-principal-cabecera-alergenos-bg-color: #ff7900; /* filtro activo naranja rgb(255,121,0) */ --d-principal-cabecera-alergenos-text-color: #ffffff; /* Título grande sobre la imagen superior del principal (blanco) */ --d-principal-zona-superior-bg-color: transparent; --d-principal-zona-superior-text-color: #ffffff; /* Botones de categoría */ --d-principal-botones-bg-color: rgba(255, 255, 255, 0); --d-principal-botones-border-color: #00ae53; /* borde verde de la caja */ --d-principal-botones-text-color: #07245a; /* texto navy */ --d-principal-botones-format: uppercase; /* legacy Vegan: botones de categoría en MAYÚSCULAS */ --d-principal-botones-font: 'Montserrat', Roboto, sans-serif; --d-principal-botones-size: 16; --d-principal-botones-svg-color: #00ae53; /* icono de categoría verde */ /* ===================== CABECERA DE SECCIÓN ===================== Título blanco 22 sobre la banda verde. */ --d-secciones-seccion-cabecera-text-color: #ffffff; --d-secciones-seccion-cabecera-font: 'Montserrat', Roboto, sans-serif; --d-secciones-seccion-cabecera-size: 22; /* ===================== SECCIÓN / LISTADO ===================== Fondo blanco. Barra de subsección VERDE CLARO con texto verde. */ --d-listado-listado-texto-bg-color: #ffffff; /* html.seccion blanco */ --d-listado-sub-menus-listado-bg-color: #d5eedc; /* .content .seccion h2 bg rgb(213,238,220) */ --d-listado-sub-menus-listado-text-color: #00ae53; /* texto rgb(0,174,83) */ --d-listado-sub-menus-listado-font: 'Montserrat', Roboto, sans-serif; --d-listado-sub-menus-listado-size: 16; --d-listado-sub-menus-descripcion-text-color: #72877d; /* desc-seccion rgb(114,135,125) */ --d-listado-sub-menus-descripcion-bg-color: rgba(206, 224, 215, 1); /* banda gris-verde legacy */ --d-listado-sub-menus-descripcion-font: 'Montserrat', Roboto, sans-serif; --d-listado-sub-menus-descripcion-size: 12; /* Pestañas de submenú: fondo oscuro translúcido, texto blanco (activa igual) */ --d-listado-sub-menus-cabecera-text-color: #ffffff; --d-listado-sub-menus-cabecera-text-active-color: #ffffff; --d-listado-sub-menus-cabecera-bg-color: rgba(0, 0, 0, 0.7); --d-listado-sub-menus-cabecera-font: 'Montserrat', Roboto, sans-serif; --d-listado-sub-menus-cabecera-size: 16; /* Producto (nombre navy / descripción gris / precio naranja) */ --d-listado-producto-color: #07245a; /* rgb(7,36,90) */ --d-listado-producto-font: 'Montserrat', Roboto, sans-serif; --d-listado-producto-size: 15; --d-listado-descripcion-color: #999999; /* rgb(153,153,153) */ --d-listado-descripcion-font: 'Montserrat', Roboto, sans-serif; --d-listado-descripcion-size: 11; --d-listado-precio-color: #ff6200; /* rgb(255,98,0) */ --d-listado-precio-font: 'Montserrat', Roboto, sans-serif; --d-listado-precio-size: 16; --d-listado-separadores-color: #cccccc; /* precio-line rgb(204,204,204) */ --d-listado-texto-precio-color: #999999; --d-listado-texto-precio-font: 'Montserrat', Roboto, sans-serif; --d-listado-texto-precio-size: 12; /* Color de los alérgenos de trazo del listado (legacy: ul.alergenos svg fill rgb(0,0,0) = negro; los coloreados son assets del tenant) */ --d-secciones-alergenos-svg-color: #000000; --d-secciones-alergenos-tipo-icono: linea; /* iconos de alérgeno en TRAZO monocromo (como legacy) */ /* ===================== SECCIÓN MENÚ ===================== Precio del menú en naranja 20 (.header-content.menu h2). */ --d-secciones-menu-precio-color: #ff6200; --d-secciones-menu-precio-font: 'Montserrat', Roboto, sans-serif; --d-secciones-menu-precio-size: 20; /* ===================== FICHA DE PRODUCTO (modal) ===================== Fondo blanco; título navy 22; precio naranja 22; descripción #333 14; botón cerrar verde con icono blanco; separador gris. */ --d-ficha-producto-fondo-pagina-color: #ffffff; --d-ficha-producto-fondo-pagina-separator-color: #cccccc; --d-ficha-producto-titulo-color: #07245a; --d-ficha-producto-titulo-font: 'Montserrat', Roboto, sans-serif; --d-ficha-producto-titulo-size: 22; --d-ficha-producto-descripcion-color: #333333; --d-ficha-producto-descripcion-font: 'Montserrat', Roboto, sans-serif; --d-ficha-producto-descripcion-size: 14; --d-ficha-producto-precio-color: #ff6200; --d-ficha-producto-precio-font: 'Montserrat', Roboto, sans-serif; --d-ficha-producto-precio-size: 22; --d-ficha-producto-cabecera-icono-atras-color: #ffffff; --d-ficha-producto-cabecera-icono-atras-bg-color: #00ae53; --d-ficha-producto-zona-superior-bg-color: transparent; /* ===================== FILTRO DE ALÉRGENOS (modal) ===================== Fondo VERDE, título/texto blancos; casilla gris #d0d0d0, activa naranja #ff7900, check blanco. */ --d-ficha-alergenos-fondo-pagina-color: #00ae53; --d-ficha-alergenos-fondo-pagina-titulo-color: #ffffff; --d-ficha-alergenos-fondo-pagina-titulo-font: 'Montserrat', Roboto, sans-serif; --d-ficha-alergenos-fondo-pagina-titulo-size: 15; --d-ficha-alergenos-texto-color: #ffffff; --d-ficha-alergenos-texto-font: 'Montserrat', Roboto, sans-serif; --d-ficha-alergenos-texto-size: 15; --d-ficha-alergenos-iconos-checked-icono-bg-color: #d0d0d0; --d-ficha-alergenos-iconos-checked-icono-active-bg-color: #ff7900; --d-ficha-alergenos-iconos-checked-icono-color: #ffffff; /* ===================== MENÚ LATERAL (drawer) ===================== Panel verde (= --carta-primary) con texto e iconos blancos. */ --d-ficha-menu-texto-color: #ffffff; --d-ficha-menu-texto-font: 'Montserrat', Roboto, sans-serif; --d-ficha-menu-iconos-color: #ffffff; /* ===================== CONTACTO / VALÓRANOS ===================== Fondo VERDE; textos blancos; botones neutros BLANCOS con borde gris #707070 y texto gris oscuro #414141. */ --d-ficha-contacto-fondo-pagina-color: #00ae53; --d-ficha-contacto-texto-color: #ffffff; --d-ficha-contacto-texto-font: 'Montserrat', Roboto, sans-serif; --d-ficha-contacto-texto-size: 15; /* logo-contacto h1/h2/h3 15px */ --d-ficha-contacto-iconos-color: #ffffff; --d-ficha-contacto-botones-bg-color: #ffffff; --d-ficha-contacto-botones-border-color: #707070; --d-ficha-contacto-botones-text-color: #414141; --d-ficha-contacto-botones-font: 'Montserrat', Roboto, sans-serif; --d-ficha-contacto-botones-size: 15; /* .boton > a 15px */ /* ===================== PROMOCIONES (banners) ===================== */ --d-promociones-titulo-font: 'Montserrat', Roboto, sans-serif; } /* ============================================================================ ESTRUCTURA — reglas en crudo que base.css no puede hacer por variable. Prefijadas con html[data-theme="demo-1"] para ganar especificidad y quedar aisladas. El COLOR siempre va por variable para que la carta pueda recolorear. ============================================================================ */ /* ---------- PRINCIPAL: botones de categoría en CAJA ---------- base.css los pinta como FILA (border-bottom). Aquí: borde verde completo, esquinas redondeadas, separación entre cajas y texto centrado. */ html[data-theme="demo-1"] .pagecontent h2.boton { border: 1px solid var(--d-principal-botones-border-color, #00ae53); border-radius: 10px; /* legacy demo-1/base.css */ margin: 0.8rem 1.3125rem; /* legacy: 12.8px 21px (hueco igual arriba y abajo) */ padding: 0 1rem; /* SIN padding vertical: el alto lo fija min-height + flex */ background: var(--d-principal-botones-bg-color, transparent); min-height: 56px; /* TODOS los botones 56px exactos (border-box), como el legacy */ display: flex; /* centra el contenido verticalmente en esos 56px */ align-items: center; } /* El contenedor de botones va SIN padding lateral (legacy .pagecontent padding-x:0); el margen del botón (21px) es el único hueco a los lados. base.css mete 1.2rem. */ html[data-theme="demo-1"] .pagecontent { padding-left: 0; padding-right: 0; } /* El hereda min-height:58px de base.css, que descuadraba la altura de la caja. Se anula: la altura la manda SIEMPRE la caja (56px). Sin parches de padding por variante (subtítulo/icono): con el centrado flex, botón simple, con subtítulo (2 líneas) y con icono miden todos 56px. */ html[data-theme="demo-1"] .pagecontent h2.boton a { padding: 0; min-height: 0; /* anula el min-height:58px de base.css */ flex: 1; /* llena la caja flex para centrar el título */ justify-content: center; } /* Con icono: texto centrado y el icono verde a la derecha (categoría "con iconos"). */ html[data-theme="demo-1"] .pagecontent h2.boton.with-icon a { justify-content: space-between; } /* ---------- ANIMACIÓN DE ENTRADA (legacy: `fadeInUp animated slow`) ---------- Al cargar la página, los botones de categoría se deslizan de abajo hacia arriba con un fundido. Réplica de animate.css: keyframe fadeInUp + `animated slow` = 2s, fill-mode both. Escalonado suave por posición para que "caigan" en cascada como en el legacy. */ @keyframes demo1FadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } } html[data-theme="demo-1"] .pagecontent h2.boton { animation: demo1FadeInUp 2s both; } html[data-theme="demo-1"] .pagecontent h2.boton:nth-child(1) { animation-delay: 0s; } html[data-theme="demo-1"] .pagecontent h2.boton:nth-child(2) { animation-delay: .06s; } html[data-theme="demo-1"] .pagecontent h2.boton:nth-child(3) { animation-delay: .12s; } html[data-theme="demo-1"] .pagecontent h2.boton:nth-child(4) { animation-delay: .18s; } html[data-theme="demo-1"] .pagecontent h2.boton:nth-child(5) { animation-delay: .24s; } html[data-theme="demo-1"] .pagecontent h2.boton:nth-child(6) { animation-delay: .30s; } html[data-theme="demo-1"] .pagecontent h2.boton:nth-child(n+7) { animation-delay: .36s; } /* Respeta a quien pide menos movimiento. */ @media (prefers-reduced-motion: reduce) { html[data-theme="demo-1"] .pagecontent h2.boton { animation: none; } } /* ---------- SUBMENÚ: TODAS las pestañas con fondo oscuro translúcido ---------- base.css solo pone fondo en la pestaña activa; en demo-1 lo llevan todas. */ html[data-theme="demo-1"] .submenu ul li a { background: var(--d-listado-sub-menus-cabecera-bg-color, rgba(0, 0, 0, 0.7)); border-radius: 4px; } /* ---------- CABECERA DE SECCIÓN: banda verde a lo ancho ---------- Refuerza el color de la banda por si el tenant no aporta imagen de cabecera. */ html[data-theme="demo-1"] .header--section { /* Fondo del control «Color fondo sección cabecera» (opaco) — antes usaba el de PRINCIPAL, que en algunos tenants es transparente → el contenido se veía por detrás. + imagen de sección si hay. */ background-color: var(--d-secciones-seccion-cabecera-bg-color, var(--d-principal-cabecera-bg-color, #00ab53)); background-image: var(--d-secciones-seccion-cabecera-image, none); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ---------- FILTRO DE ALÉRGENOS: fondo VERDE (como el legacy) ---------- El contenedor del modal es `#modal > .active.modal-alergenos`. base.css pinta TODO `#modal > .active` con el fondo de la ficha (blanco) con especificidad (1,1,0), que gana a `.modal-alergenos` (0,1,0) → salía blanco y los nombres (blancos) invisibles. Se restituye el verde con una regla más específica. */ html[data-theme="demo-1"] #modal > .active.modal-alergenos { background: var(--d-ficha-alergenos-fondo-pagina-color, #00ae53); } /* Iconos de trazo (mask) en blanco sobre el verde; los coloreados son img del tenant. */ html[data-theme="demo-1"] .modal-alergenos .opcion .ale-ico--linea { background-color: #ffffff; } /* Iconos coloreados (img `.ale-ico`): en el legacy son monocromos blancos → se fuerzan a blanco con filtro para que casen con el fondo verde. */ html[data-theme="demo-1"] .modal-alergenos .opcion img.ale-ico { filter: brightness(0) invert(1); } html[data-theme="demo-1"] .modal-alergenos .opcion { border-bottom-color: rgba(255, 255, 255, 0.3); } /* Botón cerrar del modal de alérgenos: caja BLANCA con la X verde (legacy). El Sticky-header global es verde con X blanca (ficha); aquí se invierte. */ html[data-theme="demo-1"] .modal-alergenos .Sticky-header { background: #ffffff; color: var(--carta-primary, #00ae53); border-radius: 4px; } /* ---------- MODAL «MENÚ DEL DÍA» (modal-menu): textos legibles como el legacy ---------- El legacy muestra el Menú del día como una PÁGINA blanca: barras de grupo (Primeros/Segundos/Postres) en verde claro con texto VERDE y platos en AZUL MARINO. Pero base.css colorea TODO el contenido del modal-menu con --d-ficha-menu-texto-color (blanco, pensado para el DRAWER verde) → los platos salían blancos sobre blanco (invisibles) y las barras blancas sobre verde claro. Se restituyen los colores del listado SOLO dentro del modal-menu (sin tocar la var del drawer, que sigue en blanco sobre su panel verde). */ html[data-theme="demo-1"] .modal-menu .Modal-content .seccion > h2, html[data-theme="demo-1"] .seccion.menu .content .seccion > h2 { color: var(--d-listado-sub-menus-listado-text-color, #00ae53); /* barra de grupo: texto verde */ } html[data-theme="demo-1"] .modal-menu .Modal-content .title-elemento h3, html[data-theme="demo-1"] .seccion.menu .title-elemento h3 { color: var(--d-listado-producto-color, #07245a); /* nombre de plato: azul marino */ } html[data-theme="demo-1"] .modal-menu .Modal-content > h2 { color: var(--d-listado-producto-color, #07245a); /* título "Menú del día": azul marino */ } /* Botón cerrar del modal-menu: caja BLANCA con la X verde (legacy). */ html[data-theme="demo-1"] .modal-menu .Sticky-header { background: #ffffff; color: var(--carta-primary, #00ae53); border-radius: 4px; } /* ---------- FICHA DE MENÚ (.seccion.menu): cabecera + precio COMPACTOS como el legacy ---------- Medidas del legacy (enjoy, demo-1): título 22px, precio h2 20px/lh24px con «IVA incl.» al lado, y la banda «Plato a elegir» PEGADA al bloque verde (sin hueco blanco). Solo GEOMETRÍA (sin color). */ /* 1) Precio del menú: interlineado ceñido (legacy lh 24px sobre 20px = 1.2). Antes computaba 30px (line-height normal) → el bloque verde salía ~6px más alto de la cuenta. */ html[data-theme="demo-1"] .seccion.menu > .precio-menu h2 { line-height: 1.2; } /* 2) Título ↔ precio más juntos: se recorta el padding inferior de la barra verde de cabecera en la página de menú (el legacy deja el precio casi pegado al título). Se conserva min-height e iconos. */ /* Precio pegado al nombre del menú: se ACORTA la barra del título (menos hueco debajo del nombre) y se quita el padding superior del precio. NADA de margin negativo (metía el precio bajo el header sticky z-30 y lo recortaba). */ html[data-theme="demo-1"] .seccion.menu > .header--section .header__inner { padding-bottom: 0; min-height: 46px; } html[data-theme="demo-1"] .seccion.menu > .precio-menu { margin-top: 0; padding-top: 0; } /* 3) SIN hueco blanco: la primera banda de parte va pegada al bloque verde cabecera+precio. El hueco lo provocaba el margin-top: 1rem de `.content .seccion > h2` (regla general demo-1). */ html[data-theme="demo-1"] .seccion.menu .content > .seccion:first-child > h2 { margin-top: 0; } /* ---------- CONTACTO: textos/enlaces/tabla en blanco sobre el verde ---------- Estos elementos de base.css usan colores fijos (--carta-fg/-primary/-muted) no cableados a los slots de contacto; se fuerzan a blanco (por la var de contacto) sólo bajo este tema, sin tocar el color global del cuerpo. */ html[data-theme="demo-1"] .contacto-web a, html[data-theme="demo-1"] .contacto-social .social, html[data-theme="demo-1"] .contacto-horario td { color: var(--d-ficha-contacto-texto-color, #ffffff); } html[data-theme="demo-1"] .contacto-subtitulo, html[data-theme="demo-1"] .contacto-horario td:last-child { color: rgba(255, 255, 255, 0.85); } html[data-theme="demo-1"] .contacto-social .social { border-color: rgba(255, 255, 255, 0.5); } html[data-theme="demo-1"] .contacto-horario tr:nth-child(odd) td { background: rgba(0, 0, 0, 0.10); } /* ============================================================================ HOME — MEDIDAS estructurales (no editables desde el diseñador). El fondo (foto ya tintada de verde) lo pinta base.css con la imagen del tenant; la tarjeta blanca de idiomas la da --d-home-botones-idiomas-bg-color. ============================================================================ */ /* Logo = mitad superior de la pantalla; los idiomas caen hacia el centro. */ html[data-theme="demo-1"] .content-home .logo-home.varios-idiomas { min-height: 50vh; display: flex; align-items: center; justify-content: center; padding: 0 0 1rem; } html[data-theme="demo-1"] .content-home .logo-home img { max-width: 60%; } /* Card de idiomas: 90% de ancho, esquinas 10px, sin margen superior extra. */ html[data-theme="demo-1"] .content-home ul.idiomas { width: 90%; max-width: none; margin: 0 auto; border-radius: 10px; overflow: hidden; } /* Filas de idioma: inset lateral, separador gris (por var), última sin línea. */ html[data-theme="demo-1"] .content-home .idioma h2.boton { margin: 0 1.8125rem; } html[data-theme="demo-1"] .content-home .idioma:last-child h2.boton { border-bottom: none; } html[data-theme="demo-1"] .content-home .idioma h2.boton a { padding: 0.956rem 0; } html[data-theme="demo-1"] .content-home .idioma h2.boton .title { padding: 0.5rem 0; text-align: left; } html[data-theme="demo-1"] .content-home .idioma h2.boton .icono { padding-right: 0.8125rem; } html[data-theme="demo-1"] .content-home .idioma h2.boton .icono img { width: 24px; height: 24px; } /* ---------- LISTADO: identidad de la demo (pesos/mayúsculas) ---------- */ /* Título de plato: navy, peso 400 (legacy solo carga Montserrat 400). text-transform: none — el legacy computa `none`; las mayúsculas que se ven en la demo vienen del CONTENIDO (nombres escritos en mayúsculas), no de CSS. */ html[data-theme="demo-1"] .title-elemento h3 { text-transform: var(--d-listado-producto-format, none); font-weight: 400; } /* Barra de subsección: verde sobre verde claro, peso 400. transform por defecto none (legacy computa none), pero respeta el Formato elegido en el editor (--d-listado-sub-menus-listado-format). */ html[data-theme="demo-1"] .content .seccion > h2 { font-weight: 400; text-transform: var(--d-listado-sub-menus-listado-format, none); line-height: 1.15; /* título y subtítulo más juntos (como el legacy) */ margin: 1rem 0 0; /* hueco ARRIBA (antes de la sección) + sin hueco abajo con la banda */ min-height: 55.19px; /* misma altura que los botones (con o sin subtítulo) */ padding: 0.3rem 1rem; /* reducido para que título + subtítulo quepan en 55px */ display: flex; flex-direction: column; /* título + subtítulo apilados */ justify-content: center; /* centrados en los 55px */ } /* Cabecera: si la descripción va DENTRO del h2, el título arriba y la banda debajo (con hueco alrededor). */ html[data-theme="demo-1"] .content .seccion > h2:has(.desc-seccion) { justify-content: flex-start; } /* La PRIMERA barra de sección va pegada al submenú (sin hueco blanco debajo de la cabecera). */ html[data-theme="demo-1"] .content.hijos .seccion.desc:first-child > h2 { margin-top: 0; } /* Precio del LISTADO destacado en negrita (legacy: font-weight:bold, bold sintético). */ html[data-theme="demo-1"] .precio-holder h4 { font-weight: 700; } /* Precio de la FICHA en peso normal 400 (config-demo: .Modal-content .precio-holder h4 = font-weight:400; el base lo pone a 600 y la regla del listado a 700 → se restituye 400). */ html[data-theme="demo-1"] .Modal-content .precio-holder h4 { font-weight: 400; } /* Botones de CONTACTO en peso 400 (el base los pone a 500; legacy solo carga Montserrat 400). */ html[data-theme="demo-1"] .btn-contacto { font-weight: 400; } /* Botón de categoría: texto un punto más marcado. */ /* Título del botón: peso 400 (config-demo lo fija a 400, NO negrita) + padding del legacy. */ html[data-theme="demo-1"] .pagecontent h2.boton .title { font-weight: 400; padding: .5rem 0; line-height: 1.2; } html[data-theme="demo-1"] .pagecontent h2.boton .title span { font-weight: 300; text-transform: uppercase; } /* ---------- LISTADO: medidas exactas del legacy demo-1/base.css ---------- */ /* Imagen de plato 91×91, radio 13px (base.css la deja en 88/10). */ html[data-theme="demo-1"] .imagen-elemento { flex-basis: 91px; width: 91px; height: 91px; border-radius: 13px; background-size: cover; background-position: center; background-repeat: no-repeat; } /* Iconos de alérgeno del listado a 32×28 (legacy). */ html[data-theme="demo-1"] ul.alergenos .svg-alergeno { width: 24px; height: 24px; } /* ---------- CABECERA DEL PRINCIPAL (como el legacy) ---------- La «Imagen superior» rellena TODA la cabecera a ancho completo y los iconos van SUPERPUESTOS encima (blancos), no en una barra aparte. base.css apila barra-de-iconos + imagen; aquí la imagen es el fondo de la cabecera y .header__inner se posiciona absoluto encima. Solo principal (no toca .header--section de las secciones). */ /* IMPORTANTE: solo el header de la LANDING principal (con imagen superior) va transparente y con los iconos superpuestos. El header de las páginas de SECCIÓN (.header--section) es la banda verde compacta con el título → se EXCLUYE con :not(.header--section), si no esta regla (más específica) lo dejaría transparente. */ html[data-theme="demo-1"] .principal > .header:not(.header--section) { background: transparent; box-shadow: none; } html[data-theme="demo-1"] .principal > .header:not(.header--section) > .header__inner { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: transparent; } html[data-theme="demo-1"] .principal .imagen-principal { background-size: cover; background-position: center; } html[data-theme="demo-1"] .principal .imagen-principal-content { justify-content: center; }