/* =========================================================================== ALVI · CABECERA, PIE Y MENÚ AQUÍ NO HAY NI UN COLOR ESCRITO. Todos salen de theme.css como var(--...). =========================================================================== */ /* PUNTOS DE RUPTURA ------------------ OJO con las unidades: dentro de una media query, 1rem son 16px SIEMPRE, sin importar que esté al 112,5 %. Esa regla solo afecta a las medidas de las propiedades, no a las consultas. Los anchos reales son: 30rem = 480px el botón de buscar pasa a ancho completo 48rem = 768px aparece la barra superior y el pie va a dos columnas 60rem = 960px las rejillas de contenido pasan a dos columnas 76rem = 1216px la navegación pasa de desplegable a barra completa */ /* =========================================================================== CABECERA =========================================================================== */ /* CABECERA PEGAJOSA. Medido: sin esto, el teléfono se quedaba fuera de pantalla entre el 57 % y el 91 % del recorrido de cada página en un móvil. El principio de la casa es que llamar esté siempre a mano, y llevaba roto desde el principio sin que se notara. No es una barra fija inferior —eso se descartó—: es la misma cabecera de siempre, que deja de irse. El teléfono sigue siendo contenido, no un botón flotante duplicado. */ .cabecera { position: sticky; top: 0; z-index: 100; } /* Los anclajes internos tienen que parar POR DEBAJO de la cabecera pegajosa, o el destino queda tapado. Se aplica a todo el documento para que valga también para el enlace de "Ir al contenido" del teclado. */ :target, [id] { scroll-margin-top: calc(var(--alto-cabecera, 4rem) + var(--sp-4)); } /* --- Barra superior: dónde está el taller y a qué horas abre -------------- Se oculta en móvil: ahí el espacio de arriba es oro y esta misma información está completa en el pie. */ .barra-super { display: none; background: var(--bg-inverse); color: var(--text-on-inverse); font-size: var(--fs-meta); } .barra-super__contenido { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; padding-block: var(--sp-2); } @media (min-width: 48rem) { .barra-super { display: block; } } /* --- Barra principal: marca, navegación y teléfono ------------------------ */ .barra-principal { background: var(--bg-inverse-soft); color: var(--text-on-inverse); /* La cabecera y el pie son ya el MISMO color base, así que este remapeo no hace falta para el contraste —crema encima da 16,9:1—. Se queda porque sigue siendo verdad lo que dice: el texto secundario de una zona oscura va en brand-100 y no en brand-300. */ --text-muted: var(--c-brand-100); --text-on-inverse-muted: var(--c-brand-100); } /* --- LA BARRA TRANSLÚCIDA SOBRE EL HERO ------------------------------------ Solo en la portada, y solo mientras no se ha desplazado: la barra va al 70 % y deja ver la fotografía por detrás. Al bajar, pasa a opaca. EL DESENFOQUE NO ES DECORACIÓN. Un texto blanco al 100 % sobre un velo del 70 % encima del cielo azul claro de la foto se queda corto de contraste. El backdrop-filter promedia lo que hay detrás antes de teñirlo, así que la zona clara deja de ser clara. Los ratios medidos están en el informe. La marca de "hay hero" la pone la plantilla y el estado lo cambia nav.js. Si el JavaScript no carga, la barra se queda TRANSLÚCIDA, que es el estado inicial: sigue leyéndose porque el desenfoque va en el CSS, no en el JS. */ /* LA CABECERA FLOTA SOBRE LA FOTO, y sin esto lo de arriba no sirve de nada. Con la cabecera en el flujo, la fotografía empieza JUSTO DEBAJO de ella: una barra translúcida sobre eso no deja ver la foto, deja ver el fondo crema de la página. Se vio midiendo el píxel de detrás, no leyendo el CSS. Sacándola del flujo, la foto sube y pasa por detrás. Y para que nada de lo que hay debajo se mueva, la foto CRECE exactamente lo que mide la barra. SOLO DE 80rem PARA ARRIBA, y el motivo es geométrico, no de gusto. Dos límites, los dos medidos: · Para que la foto pase por debajo de la barra tiene que CRECER lo que mide la barra. Por debajo de 60rem eso deja la caja más alta que la propia fotografía (a 768px: caja 0,71, foto 0,56) y el recorte pasa a ser horizontal, que es lo que se come el final del rótulo. · Entre 60 y 80rem cabe en anchura, pero no en altura: a 1024px la barra mide 125px y el rótulo empieza en el píxel 117 de la caja. No hay encuadre que lo saque de debajo de la barra, porque el tope de anchura impide que la caja crezca más. Así que de 1280px para arriba la barra flota; por debajo va opaca y en el flujo, como siempre. */ @media (min-width: 80rem) { [data-hero] .cabecera { position: fixed; inset-inline: 0; top: 0; } } @media (min-width: 80rem) { [data-hero] .barra-principal { background: var(--bg-barra-velo); -webkit-backdrop-filter: blur(14px) saturate(0.9); backdrop-filter: blur(14px) saturate(0.9); transition: background-color 180ms var(--ease); } [data-hero][data-desplazado] .barra-principal { background: var(--bg-inverse); } } /* Sin desenfoque disponible, opaca desde el principio: más vale perder el efecto que perder la legibilidad. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { [data-hero] .barra-principal { background: var(--bg-inverse); } } /* Sin solape no hay nada que ver detrás: barra opaca. */ @media (max-width: 79.99rem) { [data-hero] .barra-principal { background: var(--bg-inverse); } } @media (prefers-reduced-motion: reduce) { [data-hero] .barra-principal { transition: none; } } .barra-principal__contenido { display: flex; align-items: center; gap: var(--sp-4); min-height: calc(var(--touch) + var(--sp-4)); padding-block: var(--sp-3); } .marca { flex: 0 0 auto; min-width: 0; display: inline-flex; flex-direction: column; justify-content: center; text-decoration: none; color: inherit; line-height: 1; /* Medido en movil daba 56x24 de alto: se toca con el dedo, asi que sube al minimo de la casa. El logotipo se centra en vertical dentro. */ min-height: var(--touch); align-items: center; } /* EL LOGOTIPO, ajustado al alto de la barra y no al ancho. La proporción la mantiene el propio archivo (38,09 x 31,63): con la altura fijada y width auto, el ancho sale solo y no hace falta escribirlo. */ .marca__logo { /* 3,1rem = 56px. La barra mide 92 y el logotipo cabe con 18px de aire por arriba y por abajo, así que subirlo NO hace crecer la barra: medido. Y hace falta subirlo: dentro del archivo, la palabra "ALVI" ocupa solo el 18 % de abajo del dibujo. A 43px de alto la palabra quedaba en 8px y no se leía; a 56 pasa a 10,5 y ya se lee. Más no cabe sin engordar la barra, y la barra no se toca: es la que lleva el teléfono. */ height: 3.1rem; width: auto; display: block; } /* --- ESTADOS DEL LOGOTIPO ------------------------------------------------ Es una marca, no un botón: no se escala ni se desplaza. Lo único que hace es apagarse un poco, que es lo que dice "esto se puede pulsar" sin fingir que es una tecla. Al pulsar, la transición se quita: el cambio tiene que ser instantáneo o no se percibe como respuesta al dedo. */ .marca { transition: opacity 150ms var(--ease); } .marca:hover { opacity: 0.8; } .marca:active { opacity: 0.65; transition: none; } @media (prefers-reduced-motion: reduce) { .marca { transition: none; } } /* El anillo de foco lo pone la regla global de base.css con --focus-ring, que dentro de .on-dark ya vale la variante clara. Lo único que hace falta aquí es que el anillo NO se recorte contra el borde de la barra: con el logotipo pegado al borde superior, los 2px de separación se salían. */ .marca:focus-visible { outline-offset: 2px; position: relative; z-index: 1; } /* --- EL BLOQUE DE ACCIONES: teléfono y carrito --------------------------- Separado de la navegación por el margen automático. Los cuatro enlaces del menú son SITIOS adonde ir; esto son dos cosas que se HACEN. Que se lean como grupo aparte es el motivo de todo el bloque. El teléfono se queda SIEMPRE fuera del menú desplegable: es lo primero que busca quien entra desde la finca, y no puede depender de abrir un menú. */ .barra-acciones { margin-left: auto; flex: 0 1 auto; display: flex; align-items: center; gap: var(--sp-5); } .barra-principal__tel { flex: 0 1 auto; min-height: var(--touch); display: inline-flex; align-items: center; gap: var(--sp-2); } /* En escritorio el teléfono es el NÚMERO compuesto y el auricular sobra: el número ya se reconoce solo. En móvil pasa al revés y se cambian los dos. Ver el bloque de móvil más abajo. */ .barra-principal__tel svg { display: none; } /* --- El carrito ---------------------------------------------------------- Icono, palabra y contador. El icono se reconoce de un vistazo; la palabra es lo que hace que se entienda sin haber usado nunca una tienda. Los dos, no uno solo. */ .carrito { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding-inline: var(--sp-3); color: var(--text-on-inverse); font-family: var(--font-title); font-size: var(--fs-lead); font-weight: 600; text-decoration: none; border-bottom: 3px solid var(--border-none); transition: opacity 150ms var(--ease); } .carrito:hover { color: var(--text-on-inverse); border-bottom-color: var(--action-on-inverse-border); } .carrito:active { opacity: 0.65; transition: none; } .carrito[aria-current="page"] { border-bottom-color: var(--action-bg); } @media (prefers-reduced-motion: reduce) { .carrito { transition: none; } } .carrito svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; } /* El contador va pegado al icono y no al final: es un estado del carrito, no una tercera palabra. */ .carrito__contador { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; padding-inline: var(--sp-1); background: var(--action-bg); color: var(--action-text); border-radius: var(--r-pill); font-family: var(--font-body); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; font-weight: 700; line-height: 1; } /* --- Cabecera en pantalla estrecha: UNA SOLA FILA ------------------------- Antes se repartía en tres renglones —marca, botón de menú y teléfono, cada uno en el suyo— y medía 144px. Eso son 18 puntos de cada 100 de la pantalla de un móvil, y con la cabecera ya pegajosa habrían estado ahí SIEMPRE. Ahora va en una fila: ALVI · teléfono · Menú. Medido, ronda los 64px, así que se recuperan unos 80px sobre el pliegue. Para que quepa a 320px hay dos ajustes: el oficio bajo el logotipo desaparece (esa frase está en el título de la página y en el pie) y el teléfono baja de 24px a 20px. Sigue muy por encima del suelo de 16px y sigue siendo lo segundo más grande de la barra. */ @media (max-width: 47.99rem) { /* TRES ZONAS: menú a la izquierda, logotipo en el centro, acciones a la derecha. La posición del logotipo NO depende de lo que midan los bloques laterales, y eso es lo que hay que resolver: con el carrito puesto y sin él, el hueco central cambia de ancho, y un logotipo centrado en el hueco se movería. Va centrado respecto a la BARRA, con posición absoluta. */ .barra-principal__contenido { position: relative; flex-wrap: nowrap; gap: var(--sp-2); min-height: var(--alto-cabecera); padding-block: var(--sp-2); } .marca { position: absolute; left: 50%; transform: translateX(-50%); } .marca__logo { /* La barra mide 72: el logotipo a 2,4rem (43px) cabe en una sola fila. */ height: 2.4rem; } /* EL TELÉFONO ES UN BOTÓN CON AURICULAR, no el número compuesto. El número entero mide 115px de los 324 disponibles a 360, y con tres zonas no cabe sin comerse el sitio del logotipo. Sigue estando compuesto grande en el hero, en el pie y en el panel del menú: lo que se pierde es la repetición, no el dato. El aria-label lleva el número dicho entero, así que quien no ve el pictograma oye "Llamar a ALVI, 968 75 36 69" y no "enlace". */ .barra-principal__tel { min-width: var(--touch); justify-content: center; padding-inline: 0; } .barra-principal__tel svg { display: block; width: 1.5rem; height: 1.5rem; } .tel__numero { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .barra-acciones { /* Menos aire entre teléfono y carrito que en escritorio: aquí la fila va justa y el grupo ya se lee aparte porque el botón de menú está al otro lado. */ gap: var(--sp-2); } .barra-principal__tel { order: 0; flex: 0 1 auto; padding-bottom: 0; font-size: 1.1rem; white-space: nowrap; } /* EL CARRITO SE QUEDA EN LA BARRA, no se mete en el menú desplegable: un carrito que no se ve es un carrito que se olvida. Lo que pierde es la PALABRA, no el contador. A 360px la fila lleva ya logotipo, teléfono, carrito y botón de menú; la palabra "Carrito" no cabe y el icono con el número encima se entiende igual. La palabra sigue en el árbol de accesibilidad por el , que además dice cuántas piezas hay o que está vacío. */ .carrito { /* Sin relleno lateral: el área táctil la sostiene min-width, que sigue siendo los 48px de la casa. Son otros 18px de los 26 que faltaban. */ padding-inline: 0; min-width: var(--touch); justify-content: center; border-bottom: 0; } .carrito__texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Con la palabra fuera, el contador se monta sobre la esquina del icono en vez de ir al lado: así el conjunto ocupa lo que ocupa un icono. */ .carrito { position: relative; } .carrito__contador { position: absolute; top: var(--sp-1); right: 0; min-width: 1.4rem; height: 1.4rem; } /* El botón de menú pierde la palabra a partir de aquí para abajo: a 320px la fila no da para las tres cosas con texto, y entre quitarle la palabra al menú o al teléfono, se le quita al menú. Las tres rayas son el único pictograma que se puede dar por sabido, y conserva su etiqueta para el lector de pantalla. */ .menu-boton { flex: 0 0 auto; } } /* LA PALABRA DEL BOTÓN NO SALE EN MÓVIL, y ahora es por estructura y no por falta de sitio. Con la barra en tres zonas —menú, logotipo, acciones— el botón de la izquierda es un pictograma y punto: las tres rayas son el único que se puede dar por sabido. Antes se quitaba solo por debajo de 24rem porque era lo que no cabía; ahora se quita en toda la banda de móvil porque es la forma que tiene la barra. Aunque se oculte, la palabra sigue en el árbol de accesibilidad: se esconde con clip-path, no con display:none, así que el lector de pantalla la lee. */ @media (max-width: 47.99rem) { .menu-boton__abrir, .menu-boton__cerrar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* --- Botón del menú (solo móvil) ------------------------------------------ */ /* SIN margin-left: auto, y esto era un choque de cascada de los de siempre. Lo llevaba de cuando el botón era el último elemento de la fila y había que empujarlo a la derecha. Ahora va el PRIMERO, a la izquierda, y quien empuja a la derecha es .barra-acciones con su propio margen automático. Mientras estuvo aquí, el override del bloque de móvil no servía de nada: esta regla está más abajo en el archivo, misma especificidad, gana la última. El botón salía centrado en su hueco en vez de pegado al borde. Se vio midiendo el margen calculado, no leyendo el CSS. */ .menu-boton { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--touch); min-width: var(--touch); padding-inline: var(--sp-3); background: var(--border-none); color: var(--text-on-inverse); border: 2px solid var(--action-on-inverse-border); border-radius: var(--r-md); font-family: var(--font-title); font-size: var(--fs-body); font-weight: 600; cursor: pointer; } .menu-boton svg { width: 1.4em; height: 1.4em; } .menu-boton__cerrar { display: none; } .menu-boton[aria-expanded="true"] .menu-boton__abrir { display: none; } .menu-boton[aria-expanded="true"] .menu-boton__cerrar { display: inline; } /* --- Navegación ----------------------------------------------------------- */ .nav { display: none; } .nav__lista { list-style: none; margin: 0; padding: 0; } .nav__enlace { display: flex; align-items: center; min-height: var(--touch); padding: var(--sp-3) var(--sp-4); color: var(--text-on-inverse); font-family: var(--font-title); font-size: var(--fs-lead); font-weight: 600; text-decoration: none; border-bottom: 3px solid var(--border-none); } .nav__enlace:hover { color: var(--text-on-inverse); border-bottom-color: var(--action-on-inverse-border); } /* La página en la que estás, subrayada en rojo. Es el único rojo de la cabecera y no compite con ningún botón. */ .nav__enlace[aria-current="page"] { border-bottom-color: var(--action-bg); } /* --- Menú desplegable en móvil ------------------------------------------- A pantalla completa, con entradas grandes y separadas. Nada de un menú estrecho con enlaces pegados unos a otros. */ .nav[data-abierto="true"] { display: block; position: fixed; inset: 0; z-index: 150; background: var(--bg-inverse); overflow-y: auto; padding: var(--sp-6) 0 var(--sp-16); } .nav__cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); } .nav__titulo { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 600; margin: 0; } .nav[data-abierto="true"] .nav__enlace { font-size: var(--fs-h3); padding-block: var(--sp-4); border-bottom: 1px solid var(--border-on-inverse); } /* LA ÚLTIMA ENTRADA NO LLEVA RAYA. Con ella, entre el último enlace y el bloque de abajo quedaban DOS reglas seguidas con 36px de nada en medio: una fila vacía. La separación la pone el borde de .nav__extra y basta con una. */ .nav[data-abierto="true"] .nav__lista > li:last-child .nav__enlace { border-bottom: 0; } /* EL CARRITO DEL PANEL ES SOLO DEL PANEL. En escritorio el carrito ya está en el bloque de acciones, a la derecha del teléfono. Sin esta regla salía DOS VECES en la barra: una en la navegación y otra en las acciones. Lo cazó el barrido de anchos, que lo contó como una quinta entrada del menú; el test de cabecera no, porque mira otra cosa. */ .nav__enlace--carrito { display: none; gap: var(--sp-3); } @media (max-width: 47.99rem) { .nav[data-abierto="true"] .nav__enlace--carrito { display: flex; } } .nav__enlace--carrito svg { width: 1.4rem; height: 1.4rem; flex: 0 0 auto; } /* Contador de piezas en el pedido, dentro del menú. */ .nav__pedido { display: inline-flex; align-items: center; gap: var(--sp-2); } .nav__contador { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7rem; height: 1.7rem; padding-inline: var(--sp-1); background: var(--action-bg); color: var(--action-text); border-radius: var(--r-pill); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; } .nav__extra { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 2px solid var(--border-on-inverse); display: grid; gap: var(--sp-3); justify-items: start; } /* A ancho completo, y con su propio aire por encima: es un botón, no una línea más de la lista. */ .nav__wasap { margin-top: var(--sp-4); width: 100%; } .nav__donde { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--text-on-inverse-muted); line-height: var(--lh-body); max-width: none; } /* Con el menú abierto, el fondo no se desplaza. */ body[data-menu-abierto="true"] { overflow: hidden; } /* --- A partir de 76rem: barra completa, sin botón de menú ----------------- Antes estaba en 60rem (960px), pero con la entrada de "Pedido" la barra pasó a cinco enlaces y a 1024px el teléfono se salía de la pantalla: quedaba aplastado a 18px de ancho. Con 76rem (1216px) hay sitio para las seis entradas, la marca y el teléfono; por debajo se usa el botón de menú, que cabe siempre. */ /* MEDIDO, y es la segunda vez que pasa lo mismo: cada entrada nueva del menú empuja este punto hacia arriba. Con cinco entradas cabía a 68rem (1088px). Con la sexta —Maquinaria— no: entre 1088 y ~1250 la barra no daba de sí y el teléfono se partía en renglones. A 1088 llegaba a componerse en columna, una cifra por línea, y la cabecera pasaba de 136 a 355px. La suma real de la barra es 1127px de contenido más 96 de margen de página: 1223. Medido: a 1248px fallaba por DOS pixeles y el telefono volvia a partirse. Se pone en 80rem (1280px), que deja 30px de holgura. SI SE AÑADE OTRA ENTRADA AL MENÚ, hay que volver a medir esto. No es una constante estética, es la suma de lo que ocupan las cosas. */ @media (min-width: 76rem) { .menu-boton { display: none; } .nav, .nav[data-abierto="true"] { display: block; position: static; inset: auto; background: var(--border-none); padding: 0; overflow: visible; margin-left: var(--sp-6); } .nav__cabecera { display: none; } /* MEDIDO: con la sexta entrada del menú (Maquinaria) la barra pedía 1296px y el contenedor mide exactamente 1296px, así que envolvía a tres renglones y la cabecera pasaba de 65 a 197px. Se aprieta el espaciado justo aquí, que es donde hay sitio de sobra en vertical y falta en horizontal. */ .nav__lista { display: flex; gap: var(--sp-1); } .nav__enlace { white-space: nowrap; } .nav[data-abierto="true"] .nav__enlace { font-size: var(--fs-body); padding-block: var(--sp-2); border-bottom: 3px solid var(--border-none); } .nav__extra { display: none; } } /* =========================================================================== PIE Verde más oscuro, teléfono grande y el horario debajo. El relleno inferior deja sitio al botón flotante de WhatsApp para que no tape nada. =========================================================================== */ /* DOS BANDAS MUERTAS QUE LLEVABAN AQUÍ DESDE HACE FASES, y las dos se veían midiendo, no leyendo: · margin-top: 5rem eran 90px de crema vacía entre la franja de cierre y el pie. No es cero porque el cierre y el pie son ambos oscuros y, pegados, se funden; pero 90px es una banda, no una separación. Con --sp-8 (36px) se distinguen igual y se recuperan 54px en TODAS las páginas. · El relleno inferior reservaba 56px + separación para el botón flotante de WhatsApp. Ese botón NO EXISTE desde que se midió que tapaba contenido —está ahí arriba, en .wasap, con el porqué—. Se quedó el hueco de un botón que ya no está. */ .pie { background: var(--bg-inverse); color: var(--text-on-inverse); padding-block: var(--sp-16); margin-top: var(--sp-8); } .pie__principal { display: grid; gap: var(--sp-10); grid-template-columns: 1fr; } @media (min-width: 48rem) { .pie__principal { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--sp-12); } } .pie__llamada { min-width: 0; } .pie__accion { margin-top: var(--sp-6); } .pie__rotulo { display: block; color: var(--text-on-inverse-muted); font-size: var(--fs-meta); margin-bottom: var(--sp-2); } .pie__bloque { margin-bottom: var(--sp-6); } .pie__titulo { font-family: var(--font-title); font-size: var(--fs-h3); font-weight: 600; margin: 0 0 var(--sp-3); } .pie__lista { list-style: none; margin: 0; padding: 0; } .pie__lista li { margin-bottom: var(--sp-1); } .pie__lista a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--text-on-inverse); text-decoration: underline; text-underline-offset: 4px; } .pie__lista a:hover { color: var(--text-on-inverse-muted); } .pie__legal { margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border-on-inverse); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: center; font-size: var(--fs-meta); color: var(--text-on-inverse-muted); } .pie__legal a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--text-on-inverse-muted); } .pie__legal a:hover { color: var(--text-on-inverse); } /* =========================================================================== AVISO DE MAQUETA Marca visible de que esto es una demostración con datos inventados. =========================================================================== */ /* Aviso de servicio, no alarma. En rosa pálido y justo encima de la cabecera verde cantaba más que el propio contenido de la página. */ .aviso-maqueta { background: var(--aviso-bg); color: var(--aviso-text); border-bottom: 1px solid var(--aviso-linea); font-size: var(--fs-meta); } .aviso-maqueta__contenido { padding-block: var(--sp-2); } .aviso-maqueta p { margin: 0; max-width: none; } /* En el pie va arriba del todo, antes del contenido, y se separa del verde con su propia regla. */ .aviso-maqueta--pie { border-bottom: 0; border-top: 1px solid var(--aviso-linea); margin-top: calc(-1 * var(--sp-16)); margin-bottom: var(--sp-12); } /* La cuenta de piezas del pedido, junto al enlace del pie. Discreta: informa sin gritar, que quien viene a llamar por teléfono no la necesita. */ .pie__cuenta { margin-left: var(--sp-1); color: var(--text-on-inverse-muted); font-variant-numeric: tabular-nums; }