/* ============ MURO · Web pública del tenant ============ Usa el contrato de tokens (tokens.css); la paleta y las fuentes del tenant se inyectan como overrides inline. */ /* Los valores por defecto del sistema de secciones viven en el : las mismas piezas (tarjetas de producto, galerías) también se usan en páginas de módulos, fuera de una .sec, y necesitan resolverlos. */ body.site { font-size: 1.125rem; --sec-cols: 3; --sec-cols-sm: 2; --sec-radius: var(--radius-lg); --sec-gap: var(--space-5); /* Las fotos que salen a lo ancho se miden con `100vw`, que en el escritorio incluye la barra de desplazamiento: sin este recorte asomaban unos píxeles y aparecía scroll horizontal. `clip` —y no `hidden`— no crea contenedor de scroll, así el menú pegajoso y el visor de fotos siguen funcionando igual. */ overflow-x: clip; } .site .wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--content-pad); } /* `:not(.sec)`: las secciones del sistema traen su propio respiro y cada diseño puede ajustarlo (una cinta o una portada no llevan el mismo). Sin esta exclusión, esta regla —más específica— les quitaba el de abajo. */ .site section:not(.sec) { padding: var(--section-y) 0 0; } .site section:not(.sec):last-of-type { padding-bottom: var(--section-y); } /* ================== Sistema de secciones (.sec--*) ================== Cada opción de estilo elegida en el panel se traduce a una clase. Los modificadores de fondo redefinen los tokens de texto y superficie dentro de la sección, así que todo lo que va dentro (títulos, botones, tarjetas) se adapta solo. Ver src/Service/SectionStyle.php. */ .sec { position: relative; padding: var(--section-y) 0; --sec-max: var(--content-max); } .site .sec > .wrap { position: relative; z-index: 1; max-width: var(--sec-max); } /* ---- Fondo ---- */ .site .sec--bg-card { background: var(--surface-card); } .site .sec--bg-raised { background: var(--surface-raised); } .site .sec--bg-accent { background: var(--accent); } .site .sec--bg-band { background: var(--surface-band); } /* La foto de fondo se pinta en una capa propia (::before), un poco más alta que la sección: así puede desplazarse con el scroll —efecto parallax, lo mueve site.js— sin descubrir el borde. */ .site .sec--bg-image { background: var(--surface-raised); overflow: hidden; --sec-scrim: linear-gradient(180deg, rgba(12,10,9,0.35) 0%, rgba(12,10,9,0.72) 100%); } /* ---- Tono: fondos oscuros invierten los tokens dentro de la sección ---- */ .site .sec--bg-band, .site .sec--bg-image, .site .sec--tone-dark, .site .sec--bg-accent { --text-heading: var(--on-band); --text-body: color-mix(in srgb, var(--on-band) 88%, transparent); --text-muted: color-mix(in srgb, var(--on-band) 64%, transparent); --surface-card: color-mix(in srgb, var(--on-band) 8%, transparent); --surface-raised: color-mix(in srgb, var(--on-band) 14%, transparent); --border-subtle: color-mix(in srgb, var(--on-band) 18%, transparent); --border-strong: color-mix(in srgb, var(--on-band) 36%, transparent); color: var(--text-body); } .site .sec--bg-accent { --on-band: var(--on-accent); } .site .sec--bg-band .s-btn-primary, .site .sec--bg-image .s-btn-primary, .site .sec--tone-dark .s-btn-primary { background: var(--accent); color: var(--on-accent) !important; } .site .sec--bg-accent .s-btn-primary { background: var(--on-accent); color: var(--accent) !important; } .site .sec--bg-accent .s-btn-primary:hover { filter: brightness(0.94); } .site .sec--bg-band .s-overline, .site .sec--bg-image .s-overline, .site .sec--tone-dark .s-overline { color: color-mix(in srgb, var(--detail) 70%, #FFFFFF); } /* ---- Foto de fondo + velo (una sola capa, la que hace parallax) ---- */ .site .sec--bg-image::before { content: ""; position: absolute; inset: -8% 0; z-index: 0; background: var(--sec-scrim), var(--sec-bg-image, var(--sec-bg-preset, none)) center / cover no-repeat; transform: translate3d(0, var(--sec-shift, 0px), 0); } .site .sec--overlay-soft { --sec-scrim: linear-gradient(180deg, rgba(12,10,9,0.18) 0%, rgba(12,10,9,0.48) 100%); } .site .sec--overlay-strong { --sec-scrim: linear-gradient(180deg, rgba(12,10,9,0.62) 0%, rgba(12,10,9,0.88) 100%); } /* ---- Textura ---- Una sola regla para todas: el SVG, su tamaño de mosaico, su intensidad y su mezcla viajan en variables que pone App\Service\TextureLibrary. Añadir una textura no toca este CSS. */ .site .sec--has-texture::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--sec-texture); background-size: var(--sec-texture-size, auto); /* Parallax: la textura sube mientras el fondo baja, y esa diferencia es la que se lee como profundidad. Como el mosaico se repite, mover su posición no descubre ningún borde —a diferencia de la foto de fondo, que necesita sobresalir de la sección para poder moverse. `--sec-shift` lo escribe site.js; sin JS o sin movimiento vale 0. */ background-position: 0 calc(var(--sec-shift, 0px) * -0.7); opacity: var(--sec-texture-opacity, 0.3); mix-blend-mode: var(--sec-texture-blend, normal); } /* ---- Alineación, alto, ancho, columnas, esquinas, separación ---- */ .site .sec--align-center { text-align: center; } .site .sec--align-center :is(.s-head, .sec-copy, .copy) { margin-left: auto; margin-right: auto; justify-items: center; } .site .sec--align-center .sec-ctas { justify-content: center; } .site .sec--align-right { text-align: right; } .site .sec--align-right :is(.s-head, .sec-copy, .copy) { margin-left: auto; justify-items: end; } .site .sec--align-right .sec-ctas { justify-content: flex-end; } .site .sec--align-right .sec-copy > :is(.sec-chip, .lt-badge) { justify-self: end; } .site .sec--height-sm { padding: clamp(36px, 4vw, 56px) 0; } .site .sec--height-lg { min-height: min(92dvh, 900px); display: grid; align-items: center; } .site .sec--width-narrow { --sec-max: 780px; } .site .sec--width-wide { --sec-max: 1400px; } .site .sec--width-full { --sec-max: none; } .site .sec--width-full > .wrap { padding: 0; } /* Cada opción trae su valor de escritorio y el de móvil: cuatro columnas en un teléfono son miniaturas ilegibles, pero «1 columna» sí se respeta. */ .site .sec--cols-1 { --sec-cols: 1; --sec-cols-sm: 1; } .site .sec--cols-2 { --sec-cols: 2; --sec-cols-sm: 2; } .site .sec--cols-3 { --sec-cols: 3; --sec-cols-sm: 2; } .site .sec--cols-4 { --sec-cols: 4; --sec-cols-sm: 2; } /* En el móvil el tope automático son dos —cuatro miniaturas en un teléfono no se leen—, pero eso es una opinión, no una ley: un mosaico de fotos sí luce de tres en tres. Va después de las columnas para poder ganarles. */ .site .sec--cols-sm-1 { --sec-cols-sm: 1; } .site .sec--cols-sm-2 { --sec-cols-sm: 2; } .site .sec--cols-sm-3 { --sec-cols-sm: 3; } /* ---- Colocación: la misma lista, en cuadrícula o en carrusel ---- Se declara una sola vez sobre `.sec-items`, la clase que comparten todos los contenedores de lista (galería, mosaico, servicios, catálogo, marcas, blog…). Una sección nueva la hereda con solo ponerse esa clase: la variante define la pieza, la opción decide la formación. Sin esto, cada colocación acababa siendo una variante gemela con el mismo contenido y otro contenedor. */ .site .sec--flow-carousel .sec-items { grid-template-columns: none; grid-auto-flow: column; /* Ancho fijo, no `minmax(0, …)`: con un mínimo de cero las piezas se encogen hasta caber todas y el carrusel deja de deslizarse. */ grid-auto-columns: calc((100% - (var(--sec-cols-sm) - 1) * var(--sec-gap)) / var(--sec-cols-sm)); overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; /* Sitio para el foco y para la sombra de las tarjetas al pasar. */ padding-bottom: 6px; } .site .sec--flow-carousel .sec-items::-webkit-scrollbar { display: none; } .site .sec--flow-carousel .sec-items > * { scroll-snap-align: start; } /* Flechas y arrastre: los añade site.js. Sin él la sección se sigue deslizando con el dedo, que es lo que hace el navegador por su cuenta. */ .sec-carousel { position: relative; } .sec-carousel .sec-items { scroll-behavior: smooth; } .sec-carousel .sec-items.is-dragging { /* Con el imán puesto, arrastrar da tirones: se suelta mientras dura. */ scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; } .sec-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); cursor: pointer; background: var(--surface-card); color: var(--text-heading); box-shadow: var(--shadow-md); transition: opacity var(--dur-fast) var(--ease-out); } .sec-arrow[data-dir="-1"] { left: 0; translate: -50% -50%; } .sec-arrow[data-dir="1"] { right: 0; translate: 50% -50%; } .sec-arrow:disabled { opacity: 0; pointer-events: none; } /* Solo donde hay ratón: con el dedo se desliza y las flechas estorban. */ @media (hover: none) { .sec-arrow { display: none; } } .sec-carousel.is-static .sec-arrow { display: none; } /* En pantalla estrecha las flechas se meten dentro para no salirse. */ @media (max-width: 1400px) { .sec-arrow[data-dir="-1"] { translate: 25% -50%; } .sec-arrow[data-dir="1"] { translate: -25% -50%; } } @media (min-width: 760px) { .site .sec--flow-carousel .sec-items { grid-auto-columns: calc((100% - (var(--sec-cols) - 1) * var(--sec-gap)) / var(--sec-cols)); } } .site .sec--radius-none { --sec-radius: 0; } .site .sec--radius-md { --sec-radius: var(--radius-md); } .site .sec--radius-lg { --sec-radius: var(--radius-lg); } .site .sec--radius-xl { --sec-radius: var(--radius-2xl); } /* Las esquinas se aplican al fondo de la sección (color o foto), no solo a sus fotos: en las secciones sin foto la opción no hacía nada. */ .site :is(.sec--bg-card, .sec--bg-raised, .sec--bg-accent, .sec--bg-band, .sec--bg-image, .has-image):is(.sec--radius-md, .sec--radius-lg, .sec--radius-xl) { border-radius: var(--sec-radius); overflow: hidden; } /* «Juntas» es cero de verdad: las fotos de una galería o un mosaico quedan pegadas, sin una línea de fondo entre ellas. Con 12px la opción se elegía y el resultado seguía viéndose separado. */ /* Con «Juntas» las fotos quedan pegadas, pero el texto que va suelto en la columna no puede tocar al del vecino: recupera por dentro lo que el mosaico quita por fuera y se anula solo en cuanto hay separación de verdad. Va en la propia sección, no en `body.site`: ahí `--sec-gap` todavía vale la separación normal y la cuenta daría siempre cero. */ .site .sec { --sec-inset: max(0px, var(--space-4) - var(--sec-gap)); } .site .sec--gap-sm { --sec-gap: 0px; } .site .sec--gap-lg { --sec-gap: var(--space-7); } /* Pegadas, el mosaico es una sola pieza: el redondeo se va al borde de fuera. Dejándolo en cada foto se veían muescas del color del fondo justo donde se tocan las cuatro esquinas. */ .site .sec--gap-sm :is(.gallery-grid, .mosaic-grid, .feat-photos-grid) { border-radius: var(--sec-radius); overflow: hidden; } .site .sec--gap-sm :is(.gallery-grid figure, .mosaic-cell, .feat-photo) { border-radius: 0; } /* ---- Composición: dónde va la foto de la sección ---- Las secciones que reparten foto y texto usan `.sec-split` con dos hijos (`.sec-media` y el bloque de texto). La opción decide el reparto, así un mismo diseño sirve para media docena de composiciones. El orden lo manda la opción, no el orden del HTML: cada diseño escribe sus bloques como le conviene. */ .sec-split { display: grid; gap: var(--space-6); align-items: center; } .site .sec--layout-hidden .sec-split > .sec-media { display: none; } .site .sec--layout-left .sec-split > .sec-media, .site .sec--layout-top .sec-split > .sec-media { order: -1; } .site .sec--layout-right .sec-split > .sec-media, .site .sec--layout-bottom .sec-split > .sec-media { order: 1; } @media (min-width: 900px) { .site :is(.sec--layout-left, .sec--layout-right) .sec-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); } } /* Arriba o abajo: la foto sale del ancho del contenido (el truco clásico de `50% - 50vw`) y llega al borde de la sección. */ .site :is(.sec--layout-top, .sec--layout-bottom) .sec-split > .sec-media { width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; } .site .sec--layout-top .sec-split > .sec-media { margin-top: calc(var(--section-y) * -1); } .site .sec--layout-bottom .sec-split > .sec-media { margin-bottom: calc(var(--section-y) * -1); } .site :is(.sec--layout-top, .sec--layout-bottom) .sec-split > .sec-media img { aspect-ratio: 16 / 9; max-height: 62dvh; } @media (min-width: 900px) { .site :is(.sec--layout-top, .sec--layout-bottom) .sec-split { grid-template-columns: minmax(0, 1fr); } .site .sec--layout-top .sec-split > :not(.sec-media) { margin-top: clamp(-160px, -12vw, -48px); position: relative; } .site .sec--layout-bottom .sec-split > :not(.sec-media) { margin-bottom: clamp(-160px, -12vw, -48px); position: relative; } } /* ---- Recuadro del texto (lo pide el diseño con `.sec-panel`) ---- */ .site :is(.sec--panel-card, .sec--panel-dark, .sec--panel-accent, .sec--panel-glass) .sec-panel { padding: clamp(22px, 3.4vw, 40px); border-radius: var(--sec-radius); } /* La tarjeta se apoya sobre fotos y bandas oscuras: recupera los colores de página para no volverse translúcida ni perder el contraste. */ .site .sec--panel-card .sec-panel { background: var(--surface-card-solid); --text-heading: var(--text-heading-page); --text-body: var(--text-body-page); --text-muted: var(--text-muted-page); --border-subtle: rgba(36, 32, 28, 0.10); --border-strong: rgba(36, 32, 28, 0.28); color: var(--text-body); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } .site .sec--panel-dark .sec-panel, .site .sec--panel-glass .sec-panel { --text-heading: var(--on-band); --text-body: color-mix(in srgb, var(--on-band) 88%, transparent); --text-muted: color-mix(in srgb, var(--on-band) 70%, transparent); color: var(--text-body); } .site .sec--panel-dark .sec-panel { background: color-mix(in srgb, var(--surface-band) 88%, transparent); } .site .sec--panel-accent .sec-panel { background: var(--accent); color: var(--on-accent); --text-heading: var(--on-accent); --text-body: var(--on-accent); --text-muted: color-mix(in srgb, var(--on-accent) 78%, transparent); } /* Con recuadro y la foto a lo ancho, el texto se monta encima de la foto: comparten celda y la opción «Dónde cae el texto» (más la alineación) deciden en qué punto de los nueve se apoya. */ .site :is(.sec--layout-top, .sec--layout-bottom):is(.sec--panel-card, .sec--panel-dark, .sec--panel-accent, .sec--panel-glass) .sec-split { grid-template-columns: minmax(0, 1fr); } /* Comparten celda para encimarse; la foto conserva su salida a lo ancho. */ .site :is(.sec--layout-top, .sec--layout-bottom):is(.sec--panel-card, .sec--panel-dark, .sec--panel-accent, .sec--panel-glass) .sec-split > * { grid-area: 1 / 1; } .site :is(.sec--layout-top, .sec--layout-bottom):is(.sec--panel-card, .sec--panel-dark, .sec--panel-accent, .sec--panel-glass) .sec-split > :not(.sec-media) { z-index: 1; margin: clamp(14px, 4vw, 56px); max-width: min(620px, 92%); align-self: var(--spot-y, center); justify-self: var(--spot-x, start); } .site .sec--spot-top { --spot-y: start; } .site .sec--spot-center { --spot-y: center; } .site .sec--spot-bottom { --spot-y: end; } .site .sec--align-left { --spot-x: start; } .site .sec--align-center { --spot-x: center; } .site .sec--align-right { --spot-x: end; } /* Cristal: el desenfoque lleva prefijo por Safari/iOS y, donde no exista, queda un fondo más sólido para que el texto siga legible. */ .site .sec--panel-glass .sec-panel { background: rgba(20, 17, 15, 0.42); border: 1px solid rgba(255, 255, 255, 0.18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site .sec--panel-glass .sec-panel { background: rgba(20, 17, 15, 0.82); } } /* ---- Piezas reutilizables dentro de una sección ---- */ .sec-grid { display: grid; gap: var(--sec-gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } @media (min-width: 900px) { .sec-grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); } } /* ---- Títulos de display: nunca se salen de su columna ---- Un titular a 67px con una palabra de catorce letras es más ancho que media pantalla, y en un diseño a dos columnas acababa montado encima de lo de al lado. Dos capas lo evitan sin pedirle nada al cliente: 1. El tamaño se mide contra la columna donde vive (`cqi`), no contra la ventana, así en una columna estrecha el título encoge solo. El máximo sigue siendo el de la escala, de modo que en pantalla ancha nada cambia. 2. Y si aun así una palabra no cabe, se parte dentro de su caja en vez de desbordar, con guion donde el navegador sabe ponerlo. Aquí tiene que ser `break-word` y **nunca** `anywhere`, ni tampoco `min-width: 0` en los hijos de la columna: los dos reducen el ancho mínimo del titular a una sola letra, y una columna `1fr` —que se apoya en ese mínimo para no encogerse— se queda en nada. Le pasó a «Marca asociada»: su columna de texto colapsó a 0 px y el título se leía en vertical, letra por letra. */ .site :is(h1, h2, h3, .lede) { overflow-wrap: break-word; hyphens: auto; } .site :is(.feat-panel-title, .feature-title, .about-ed-title) { font-size: min(var(--text-4xl), 11cqi); } .sec-copy { display: grid; gap: var(--space-4); align-content: center; max-width: 62ch; } /* La columna contra la que se miden los títulos de arriba. Va solo donde la caja la mide su rejilla, nunca en general: `container-type` hace que deje de medirse por su contenido, y donde se coloca con `justify-self`/`justify-items: start` eso la deja en nada —le pasó a «Marca asociada», que colapsó a 0 px—. Por eso en `.sec-split` se pide nieto y no hijo: el hijo directo es el que el recuadro sobre la foto coloca con `justify-self: start`, y en «Contacto con foto» ese hijo es la propia `.sec-copy`. */ .site :is(.feat-panel-in, .feature-in) > .sec-copy, .site .sec-split > * > .sec-copy { container-type: inline-size; } .sec-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .sec-media { border-radius: var(--sec-radius); overflow: hidden; } .sec-media img { object-position: var(--focus, 50% 50%); } .sec-media img { width: 100%; height: 100%; object-fit: cover; } .sec-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-card) 88%, transparent); border: 1px solid var(--border-subtle); font: 600 0.9rem var(--font-body); color: var(--text-heading); backdrop-filter: blur(8px); } .sec-ellipse { display: grid; place-items: center; text-align: center; padding: clamp(24px, 4vw, 40px); border: 1px solid color-mix(in srgb, var(--on-band) 45%, transparent); border-radius: 50%; aspect-ratio: 1.35; max-width: 320px; font-size: 0.95rem; color: var(--text-body); } /* ---- Botones ---- */ .s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px; border-radius: var(--radius-pill); font: 600 1rem var(--font-body); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .s-btn:active { transform: scale(0.98); } .s-btn-primary { background: var(--accent); color: var(--on-accent) !important; } .s-btn-primary:hover { background: var(--accent-strong); } .s-btn-outline { border-color: var(--accent); color: var(--accent) !important; } .s-btn-outline:hover { background: var(--accent-soft); } .s-btn-lg { min-height: 56px; padding: 0 32px; font-size: 1.125rem; } /* ---- Nav ---- Un solo menú para las dos barras. Los enlaces se pintan en la fila y `site.js` manda al panel flotante los que no caben; el panel es el mismo en escritorio (cuelga de «Más») y en móvil (cuelga del botón de menú), así que su piel y sus transiciones se declaran una sola vez. */ .s-nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--surface-page) 78%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .s-nav-in { display: flex; align-items: center; gap: 16px; min-height: 76px; } .s-wordmark { text-decoration: none; display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .s-wordmark img { height: 36px; width: auto; border-radius: 10px; } /* El nombre no parte en dos líneas: partido, la barra crecía a lo alto y el menú se quedaba sin sitio a lo ancho. Se ajusta a la pantalla, que es lo que de verdad decide cuántas secciones caben al lado. */ .s-wordmark b { font: 600 clamp(1.05rem, 0.85rem + 0.55vw, 1.35rem) var(--font-display); color: var(--text-heading); white-space: nowrap; } /* `flex: 1 1 0` y no `auto`: así la fila mide siempre el hueco libre entre el logotipo y los botones —da igual cuántos enlaces lleve dentro— y ese es justo el ancho contra el que JS decide cuántos caben. Nunca envuelve: lo que sobra se va al panel, no a una segunda línea. */ .s-links { display: none; flex: 1 1 0; min-width: 0; overflow: hidden; gap: 4px; flex-wrap: nowrap; align-items: center; margin-left: clamp(6px, 1.6vw, 24px); } .s-link { flex: 0 0 auto; white-space: nowrap; font: 600 1rem var(--font-body); color: var(--text-body); text-decoration: none; padding: 10px clamp(11px, 1vw, 14px); border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .s-link:hover { background: var(--surface-raised); color: var(--text-heading); } .s-more { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; font: 600 1rem var(--font-body); color: var(--text-body); padding: 10px clamp(11px, 1vw, 14px); border-radius: var(--radius-pill); background: var(--surface-raised); border: 1.5px solid var(--border-subtle); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .s-more:hover { color: var(--text-heading); border-color: var(--border-strong); } .s-more-chevron { transition: transform var(--dur-base) var(--ease-out); } .s-nav.is-menu-open .s-more-chevron { transform: rotate(180deg); } .s-actions { display: flex; gap: 10px; margin-left: auto; align-items: center; } .s-icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; background: var(--surface-raised); color: var(--text-heading); border: 1.5px solid var(--border-subtle); transition: background var(--dur-fast) var(--ease-out); } .s-icon-btn:hover { background: var(--accent-soft); } /* El botón dice qué hace solo cuando vive dentro del panel. */ .s-btn-label { display: none; } /* Tres barras que se cruzan al abrir: el mismo botón cierra el menú y se ve que es el mismo, sin cambiar el icono por otro. */ .s-burger { display: grid; gap: 4px; width: 20px; } .s-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .s-nav.is-menu-open .s-burger i:first-child { transform: translateY(6px) rotate(45deg); } .s-nav.is-menu-open .s-burger i:nth-child(2) { opacity: 0; } .s-nav.is-menu-open .s-burger i:last-child { transform: translateY(-6px) rotate(-45deg); } /* ---- Panel flotante del menú ---- Cuelga del botón que lo abrió (`--drop-x`, que escribe el JS) sin salirse nunca por la derecha. Entra creciendo desde arriba y sus entradas aparecen escalonadas; al cerrar se va por el mismo camino. */ .s-drop { --drop-w: min(300px, calc(100vw - 32px)); position: absolute; top: calc(100% + 10px); z-index: 60; width: var(--drop-w); left: clamp(16px, var(--drop-x, 16px), max(16px, 100% - var(--drop-w) - 16px)); padding: 10px; border-radius: var(--radius-lg); background: var(--surface-card); border: 1.5px solid var(--border-subtle); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-10px) scale(0.97); transform-origin: top center; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); } .s-drop.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .s-drop-in { display: grid; gap: 2px; } .s-drop-links { display: grid; gap: 2px; } .s-drop .s-link { display: block; padding: 14px 16px; border-radius: var(--radius-md); font-size: 1.05rem; color: var(--text-heading); opacity: 0; transform: translateY(-8px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .s-drop.is-open .s-link { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 35ms + 40ms); } .s-drop-extra:not(:empty) { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--border-subtle); } /* El botón de color de la web, dentro del panel, es una entrada más. */ .s-icon-btn.s-drop-action { width: 100%; height: auto; border-radius: var(--radius-md); border: 0; background: transparent; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font: 600 1.05rem var(--font-body); color: var(--text-heading); } .s-icon-btn.s-drop-action:hover { background: var(--surface-raised); } .s-drop-action .s-btn-label { display: block; } /* Móvil: la barra deja sitio al logotipo y al botón principal. Un nombre largo se recorta antes que empujar fuera al botón de menú —el nombre completo sigue en la portada, el menú no tiene otro sitio—. */ .s-nav-cta { padding: 0 20px; min-height: 44px; font-size: 0.95rem; } @media (max-width: 767px) { .s-wordmark { flex: 0 1 auto; min-width: 0; } .s-wordmark b { overflow: hidden; text-overflow: ellipsis; } } @media (max-width: 400px) { .s-nav-cta { display: none; } } /* Desde tablet vertical el menú se lee en la propia barra, de izquierda a derecha; lo que no cabe pasa a «Más». En una pantalla ancha caben todos y el botón ni aparece. */ @media (min-width: 768px) { .s-links { display: flex; } .s-menu-btn { display: none; } .s-nav-cta { padding: 0 clamp(18px, 1.6vw, 26px); min-height: 48px; font-size: 1rem; } .s-drop { --drop-w: 280px; } } /* En una pantalla muy ancha el menú entero cabe en la barra y no hace falta abrir nada: la barra —solo la barra— se estira más allá del ancho del contenido para dárselo. */ @media (min-width: 1440px) { .site .s-nav .wrap { max-width: min(1560px, 100%); } } @media (prefers-reduced-motion: reduce) { .s-drop, .s-drop .s-link, .s-burger i, .s-more-chevron { transition-duration: 1ms; transition-delay: 0s; } } /* ---- Texto común ---- */ .s-overline { font: 600 0.85rem var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--detail); } .s-head { display: grid; gap: 10px; max-width: 640px; margin-bottom: clamp(28px, 4vw, 48px); } .s-head h2 { font-size: var(--text-3xl); } .s-head p { margin: 0; font-size: var(--text-lg); color: var(--text-muted); text-wrap: pretty; } /* ---- Hero centrado ---- */ .hero-c { position: relative; display: grid; place-items: center; min-height: min(88dvh, 760px); overflow: hidden; padding: 0; } .hero-c .bg { position: absolute; inset: 0; overflow: hidden; } .hero-c .bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); /* La mitad que el resto: aquí el margen es el 4% del escalado. */ transform: translate3d(0, calc(var(--sec-shift, 0px) * 0.5), 0) scale(1.08); } .hero-c .bg::after { content: ""; position: absolute; inset: 0; background: var(--scrim); } .hero-c .inner { position: relative; z-index: 1; display: grid; gap: 20px; justify-items: center; text-align: center; padding: clamp(64px, 10vw, 128px) var(--content-pad); max-width: 820px; } .hero-c.has-image h1, .hero-c.has-image .lede, .hero-c.has-image .s-overline { color: #FFF8F5; } .hero-c h1 { font-size: var(--text-4xl); font-weight: 600; } .hero-c .lede { font-size: var(--text-lg); max-width: 52ch; color: var(--text-muted); text-wrap: pretty; margin: 0; } .hero-c.has-image .lede { color: rgba(255,248,245,0.85); } /* ---- Hero split ---- */ .hero-s { padding: 0; border-bottom: 1px solid var(--border-subtle); } .hero-s .inner { display: grid; gap: 40px; padding: clamp(48px, 7vw, 96px) 0; } .hero-s .copy { display: grid; gap: 20px; align-content: center; justify-items: start; } .hero-s h1 { font-size: var(--text-4xl); font-weight: 600; } .hero-s .lede { font-size: var(--text-lg); color: var(--text-muted); max-width: 46ch; margin: 0; text-wrap: pretty; } .hero-s .media { border-radius: var(--sec-radius); overflow: hidden; } .hero-s .media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); aspect-ratio: 4 / 3; } @media (min-width: 900px) { .hero-s .inner { grid-template-columns: 1fr 1fr; } .hero-s .media img { aspect-ratio: auto; min-height: 480px; } } /* ---- Sobre mí ---- */ .about { } .about .cols { display: grid; gap: 40px; } .about .media { max-width: 460px; } .about .media img { aspect-ratio: 3 / 4; object-fit: cover; object-position: var(--focus, 50% 50%); width: 100%; border-radius: var(--sec-radius); } .about .copy { display: grid; gap: 18px; align-content: center; } .about .copy p { margin: 0; max-width: 58ch; white-space: pre-line; } .about .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; max-width: 560px; } .about .stat b { display: block; font: 600 clamp(30px, 4vw, 42px) var(--font-display); color: var(--accent); line-height: 1.1; } .about .stat span { font: 400 0.9rem var(--font-body); color: var(--text-muted); } @media (min-width: 900px) { .about .cols { grid-template-columns: minmax(0, 460px) 1fr; } } /* ---- Galería ---- */ .gallery-grid { display: grid; grid-template-columns: repeat(var(--sec-cols-sm), minmax(0, 1fr)); gap: var(--sec-gap); } .gallery-grid figure { margin: 0; border-radius: var(--sec-radius); overflow: hidden; aspect-ratio: 1; background: var(--surface-raised); position: relative; } .gallery-grid figure.wide { grid-column: span 2; aspect-ratio: 2 / 1; } /* Con una sola columna nada se estira al doble. */ .site .sec--cols-1 .gallery-grid figure.wide { grid-column: auto; aspect-ratio: 3 / 2; } .gallery-grid img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform var(--dur-slow) var(--ease-out); } .gallery-grid figure:hover img { transform: scale(1.03); } .gallery-grid figcaption { position: absolute; inset: auto 0 0 0; padding: 26px 14px 12px; background: linear-gradient(180deg, rgba(12,10,9,0) 0%, rgba(12,10,9,0.72) 100%); color: #FFF8F5; font: 500 0.92rem var(--font-body); text-align: left; } @media (min-width: 760px) { .gallery-grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); } } /* ---- Franja CTA ---- */ .cta-band { padding: 0; } .cta-band .inner { display: grid; gap: 18px; justify-items: center; text-align: center; background: linear-gradient(120deg, var(--accent) 0%, var(--accent-strong) 100%); border-radius: var(--sec-radius); padding: clamp(40px, 6vw, 72px) var(--content-pad); margin-top: var(--section-y); } .cta-band h2 { color: var(--on-accent); font-size: var(--text-3xl); } .cta-band p { margin: 0; color: color-mix(in srgb, var(--on-accent) 82%, transparent); font-size: var(--text-lg); max-width: 52ch; } .cta-band .s-btn { background: var(--on-accent); color: var(--accent) !important; } .cta-band .s-btn:hover { filter: brightness(0.95); } /* ---- Contacto ---- */ .contact .cols { display: grid; gap: 40px; } .contact .info { display: grid; gap: 14px; align-content: start; } .contact .info a { font-weight: 600; } @media (min-width: 900px) { .contact .cols { grid-template-columns: 1fr 1.4fr; } } /* ---- Formularios de la web pública ---- Los mismos campos en todos los formularios del muro, se pinten en la página (contacto, consulta, citas) o dentro del modal. Se declaran una sola vez; `:is()` no sube la especificidad, así que un formulario nuevo solo tiene que entrar en esta lista. */ :is(.contact, .s-modal) form { display: grid; gap: 16px; } :is(.contact, .s-modal) .field { display: grid; gap: 7px; } :is(.contact, .s-modal) label { font: 600 0.95rem var(--font-body); color: var(--text-heading); } :is(.contact, .s-modal) .input { width: 100%; min-height: 52px; padding: 12px 16px; font: 400 1.05rem var(--font-body); color: var(--text-heading); background: var(--surface-card); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); } :is(.contact, .s-modal) textarea.input { min-height: 130px; resize: vertical; } :is(.contact, .s-modal) .input:focus { border-color: var(--accent); outline: none; } :is(.contact, .s-modal) .error-message { font-size: 0.85rem; color: var(--danger); font-weight: 600; } /* La web pública no carga `ui.css`: los dos apoyos de texto que usan sus formularios y sus páginas se declaran aquí. */ .muted { color: var(--text-muted); } .help { margin: 0; font-size: 0.9rem; color: var(--text-muted); } /* ---- Formulario en modal ---- El mismo formulario de siempre, encima de la página: se pide un producto, una cita o una consulta sin perder de vista dónde se estaba. Abajo en el móvil (donde llega el pulgar) y centrado en el escritorio, como la hoja de edición del panel. */ .s-modal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; } .s-modal::backdrop { background: rgba(23, 20, 18, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .s-modal[open] { display: grid; align-items: end; justify-items: center; position: fixed; inset: 0; } .s-modal-box { width: 100%; max-height: 92dvh; overflow-y: auto; background: var(--surface-page); color: var(--text-body); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); padding: 0 var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom)); transform: translateY(24px); opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .s-modal.is-open .s-modal-box { transform: none; opacity: 1; } /* La cabecera se queda arriba y trae el hueco superior: si el hueco fuera del recuadro, el formulario se vería pasar por encima al hacer scroll. */ .s-modal-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: start; gap: var(--space-4); background: var(--surface-page); padding: var(--space-5) 0 var(--space-4); } .s-modal-head > div { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; } .s-modal-head h2 { font-size: var(--text-xl); margin: 0; } .s-modal-head .s-overline:empty { display: none; } .s-modal-note { margin: 0; color: var(--text-muted); font-size: 0.95rem; text-wrap: pretty; } .s-modal-note:empty { display: none; } .s-modal-head .s-icon-btn { flex: 0 0 auto; } @media (min-width: 640px) { .s-modal[open] { align-items: center; } .s-modal-box { width: min(94vw, 520px); border-radius: var(--radius-xl); max-height: 88dvh; padding: 0 var(--space-6) var(--space-6); } .s-modal-head { padding-top: var(--space-6); } } @media (prefers-reduced-motion: reduce) { .s-modal-box { transition-duration: 1ms; } } /* ---- Footer ---- */ /* Lo mismo en todos los muros, así que tiene que verse bien con cualquier paleta: la marca del negocio con su descripción y sus redes a un lado, el menú completo en dos columnas al otro. El resplandor de arriba sale del acento del cliente, no de un color escrito a mano. */ .site-footer { position: relative; margin-top: var(--section-y); padding: clamp(40px, 5vw, 64px) 0 0; border-top: 1px solid var(--border-subtle); background: var(--surface-raised); font-size: 0.95rem; color: var(--text-muted); } .site-footer::before { content: ''; position: absolute; inset: 0 0 auto; height: 220px; pointer-events: none; background: radial-gradient(60% 100% at 50% 0, var(--accent-soft), transparent 70%); } .site-footer .wrap { position: relative; } .foot-top { display: grid; gap: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 4vw, 48px); } .foot-brand { display: grid; gap: var(--space-4); justify-items: start; align-content: start; } .foot-mark { display: flex; align-items: center; gap: 12px; text-decoration: none; } .foot-mark img { height: 48px; width: auto; border-radius: 12px; } .foot-mark b { font: 600 clamp(1.2rem, 1rem + 0.6vw, 1.5rem) var(--font-display); color: var(--text-heading); } .foot-about { margin: 0; max-width: 46ch; font-size: 1rem; line-height: var(--leading-body); text-wrap: pretty; } .foot-social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .foot-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--text-heading); background: var(--surface-card); border: 1.5px solid var(--border-subtle); transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .foot-social a:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; transform: translateY(-3px); } .foot-nav { display: grid; gap: var(--space-4); align-content: start; } /* Dos columnas de verdad: la lista se llena hacia abajo y sigue al lado, que es como se lee un pie. Una entrada nunca se parte entre columnas. */ .foot-links { columns: 2; column-gap: clamp(24px, 3vw, 48px); list-style: none; margin: 0; padding: 0; } .foot-links li { break-inside: avoid; margin-bottom: 4px; } .foot-links a { display: block; padding: 8px 0; text-decoration: none; color: var(--text-body); transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out); } .foot-links a:hover { color: var(--accent); padding-left: 6px; } .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) 0 calc(var(--space-5) + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-subtle); font-size: 0.9rem; } /* La entrada al panel es para el dueño del muro: está, pero no compite con nada de lo que el visitante vino a ver. */ .foot-panel { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; padding: 8px 16px; border-radius: var(--radius-pill); color: var(--text-muted); border: 1.5px solid var(--border-subtle); transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .foot-panel:hover { color: var(--text-heading); border-color: var(--border-strong); } @media (min-width: 860px) { .foot-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } } /* ---- Página no publicada ---- */ .unpublished { min-height: 100dvh; display: grid; place-items: center; text-align: center; padding: var(--space-6); } .unpublished .box { display: grid; gap: 12px; max-width: 46ch; } /* ---- Animación de entrada ---- */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.in { opacity: 1; transform: none; } } /* ================== Fase 2 · Páginas de módulos ================== */ .subpage { padding-top: clamp(40px, 6vw, 80px); } /* ---- Página de enlaces (link-tree) ---- */ .lt { display: grid; place-items: center; min-height: 100dvh; padding: max(40px, env(safe-area-inset-top)) var(--content-pad) calc(40px + env(safe-area-inset-bottom)); } /* `100%`, no `94vw`: el ancho de la pantalla ignora el padding de `.lt` y en un móvil la columna se pasaba por la derecha. */ .lt-in { width: min(100%, 480px); display: grid; justify-items: center; text-align: center; gap: var(--space-3); position: relative; z-index: 1; } .lt h1 { font-size: var(--text-2xl); margin: 0; } .lt-bio { margin: 0; color: var(--text-muted); max-width: 34ch; text-wrap: pretty; } .lt-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-md); } .lt-ring { display: grid; place-items: center; width: 124px; height: 124px; border-radius: 50%; padding: 4px; background: linear-gradient(140deg, var(--detail), var(--accent)); box-shadow: var(--shadow-lg); } .lt-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .lt-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font: 600 0.85rem var(--font-body); } .lt-links { display: grid; gap: 12px; width: 100%; margin-top: var(--space-3); } .lt-tile { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px 20px; box-sizing: border-box; border-radius: var(--radius-pill); text-decoration: none; color: var(--text-heading); background: var(--surface-card); border: 1.5px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .lt-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--text-heading); } .lt-tile:active { transform: scale(0.98); } .lt-tile .ic { display: grid; place-items: center; width: 28px; flex: none; } .lt-tile .lbl { flex: 1; display: grid; gap: 1px; text-align: center; } .lt-tile .lbl b { font: 600 1.05rem var(--font-body); } .lt-tile .lbl small { font: 400 0.8rem var(--font-body); opacity: 0.72; } .lt-tile .arr { width: 28px; flex: none; text-align: right; opacity: 0.5; } .lt-tile-web { background: var(--accent); color: var(--on-accent) !important; border-color: transparent; } .lt-tile-web:hover { background: var(--accent-strong); color: var(--on-accent) !important; } .lt-socials { display: flex; gap: 14px; margin-top: var(--space-4); } .lt-socials a { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; color: var(--text-heading); background: var(--surface-card); border: 1px solid var(--border-subtle); transition: background var(--dur-fast) var(--ease-out); } .lt-socials a:hover { background: var(--accent-soft); color: var(--accent); } .lt-fineprint { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-4); } /* Variante con foto de fondo: botones de cristal sobre la imagen. */ .lt-glass { position: relative; overflow: hidden; background: var(--surface-band); } /* Igual que en las secciones: la foto va en su capa para el parallax. */ .lt-glass::before { content: ""; position: absolute; inset: -8% 0; z-index: 0; background: linear-gradient(180deg, rgba(12,10,9,0.35) 0%, rgba(12,10,9,0.55) 45%, rgba(12,10,9,0.85) 100%), var(--sec-bg-image, var(--sec-bg-preset, none)) center / cover no-repeat; transform: translate3d(0, var(--sec-shift, 0px), 0); } .lt-glass, .site .lt-glass { --text-heading: var(--on-band); --text-body: color-mix(in srgb, var(--on-band) 88%, transparent); --text-muted: color-mix(in srgb, var(--on-band) 70%, transparent); color: var(--text-body); } .lt-glass .lt-tile { background: rgba(20,17,15,0.52); border-color: rgba(255,255,255,0.22); color: var(--on-band); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none; } .lt-glass .lt-tile:hover { background: rgba(20,17,15,0.72); color: var(--on-band); } .lt-glass .lt-badge { background: rgba(20,17,15,0.5); color: var(--detail); border: 1px solid color-mix(in srgb, var(--detail) 55%, transparent); backdrop-filter: blur(8px); } .lt-glass .lt-socials a { background: rgba(20,17,15,0.42); border-color: rgba(255,255,255,0.16); color: var(--on-band); } .lt-glass .lt-socials a:hover { background: var(--accent); } /* ---- Tarjeta-resumen de enlaces (home) ---- */ .link-profile .wrap { display: flex; justify-content: center; } .lp-card { width: min(100%, 480px); display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding: clamp(32px, 5vw, 48px) var(--content-pad); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .lp-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-md); } .lp-card h2 { font-size: var(--text-2xl); margin: 0; } .lp-card p { margin: 0; color: var(--text-muted); max-width: 46ch; } .lp-badge { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font: 600 0.85rem var(--font-body); } /* ---- Servicios ---- */ .svc-grid { display: grid; gap: var(--sec-gap); grid-template-columns: repeat(var(--sec-cols-sm), minmax(0, 1fr)); } @media (max-width: 559px) { .svc-grid { grid-template-columns: 1fr; } } @media (min-width: 760px) { .svc-grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); } } .svc-card { display: flex; flex-direction: column; gap: 10px; padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--sec-radius); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .svc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .svc-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent); } .svc-card h3 { font-size: var(--text-xl); } .svc-card p { margin: 0; font-size: 1rem; color: var(--text-muted); } .svc-meta { font: 600 0.9rem var(--font-body); color: var(--detail); } /* ---- Productos: cards y carrusel ---- */ .carousel { display: flex; gap: var(--sec-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 6px 22px; margin: 0 -6px; scrollbar-width: none; } .carousel::-webkit-scrollbar { display: none; } .carousel .p-card { flex: 0 0 min(82vw, 330px); scroll-snap-align: start; } .p-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--sec-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .p-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .p-media { position: relative; aspect-ratio: 4 / 3; background: var(--surface-raised); } .p-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); } .p-cat { position: absolute; top: 14px; left: 14px; padding: 6px 14px; border-radius: var(--radius-pill); background: rgba(23,20,18,0.55); color: #FFF8F5; font: 600 0.8rem var(--font-body); backdrop-filter: blur(8px); } .p-body { padding: var(--space-5); display: flex; flex-direction: column; gap: 10px; flex: 1; } .p-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .p-title h3 { font-size: var(--text-xl); } .p-title .price { font: 600 1rem var(--font-body); color: var(--detail); white-space: nowrap; } .p-body p { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--text-muted); } .car-dots { display: flex; gap: 8px; justify-content: center; } .car-dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: var(--border-strong); } .car-dots button[aria-current="true"] { background: var(--accent); width: 26px; border-radius: 999px; } /* ---- Catálogo ---- */ .cat-filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: var(--space-5); } .chip { min-height: 42px; padding: 0 18px; border-radius: var(--radius-pill); cursor: pointer; background: var(--surface-card); color: var(--text-body); border: 1.5px solid var(--border-strong); font: 600 0.95rem var(--font-body); transition: all var(--dur-fast) var(--ease-out); } .chip[aria-selected="true"] { background: var(--accent); color: var(--on-accent); border-color: transparent; } .cat-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } /* ---- Blog ---- */ .blog-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .blog-card { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--text-body); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); color: var(--text-body); } .blog-media { aspect-ratio: 16 / 9; background: var(--surface-raised); } .blog-media img { width: 100%; height: 100%; object-fit: cover; } .blog-body { padding: var(--space-5); display: grid; gap: 8px; } .blog-body h2 { font-size: var(--text-xl); } .blog-body p { margin: 0; font-size: 0.95rem; color: var(--text-muted); } .blog-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: var(--space-5); } .prose { display: grid; gap: 1em; font-size: 1.125rem; line-height: 1.75; } .prose h2 { font-size: var(--text-2xl); margin-top: 0.6em; } .prose h3 { font-size: var(--text-xl); } .prose blockquote { margin: 0; padding: 12px 24px; border-left: 3px solid var(--accent); background: var(--surface-card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-muted); } .prose ul, .prose ol { margin: 0; padding-left: 26px; display: grid; gap: 6px; } /* ================== Secciones editoriales (Fase 3) ================== */ /* ---- Portada editorial ---- */ .hero-ed { display: grid; align-items: end; min-height: min(88dvh, 860px); } .hero-ed-in { display: grid; gap: var(--space-6); align-items: end; } .hero-ed h1 { font-size: var(--text-5xl); font-weight: 500; line-height: 1.02; letter-spacing: -0.015em; } .hero-ed .lede { font-size: var(--text-lg); max-width: 46ch; color: var(--text-muted); margin: 0; text-wrap: pretty; } @media (min-width: 900px) { /* Dos columnas solo si hay nota en elipse: si no, el texto ocupa todo. */ .hero-ed-in:has(.sec-ellipse) { grid-template-columns: minmax(0, 1.6fr) minmax(0, 320px); } .hero-ed .sec-ellipse { justify-self: end; } } /* ---- Bloques de contenido ---- */ .feature-in { display: grid; gap: var(--space-7); align-items: start; } .feature-title { font-size: var(--text-4xl); font-weight: 500; line-height: 1.05; } .feature-items { display: grid; gap: var(--space-6); } .feature-items article { display: grid; gap: 8px; } .feature-items p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.6; max-width: 56ch; } .feature-items h3 { font: 600 0.95rem var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-heading); } @media (min-width: 900px) { .feature-in:has(.feature-items > *) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } /* ---- Mosaico ---- */ .mosaic-grid { display: grid; gap: var(--sec-gap); grid-template-columns: repeat(var(--sec-cols-sm), minmax(0, 1fr)); } .mosaic-cell { position: relative; display: block; overflow: hidden; margin: 0; aspect-ratio: 1; border-radius: var(--sec-radius); background: var(--surface-raised); } .mosaic-cell img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform var(--dur-slow) var(--ease-out); } .mosaic-cell:hover img { transform: scale(1.04); } .mosaic-label { position: absolute; inset: auto 12px 12px 12px; display: grid; place-items: center; text-align: center; padding: 12px 18px; border-radius: var(--radius-pill); color: #FFF8F5; background: rgba(12,10,9,0.42); border: 1px solid rgba(255,248,245,0.5); font: 600 0.95rem var(--font-body); backdrop-filter: blur(6px); } @media (min-width: 760px) { .mosaic-grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); } .mosaic-cell.is-wide { grid-column: span 2; aspect-ratio: 2 / 1.05; } .site .sec--cols-1 .mosaic-cell.is-wide { grid-column: auto; aspect-ratio: 3 / 2; } .mosaic-label { inset: auto 18px 18px 18px; } } /* ---- Historia en banda ---- */ .about-band-in { display: grid; gap: var(--space-6); align-items: center; } .about-band-media img { aspect-ratio: 4 / 5; width: 100%; } .about-band-body { margin: 0; white-space: pre-line; font-size: 1.05rem; line-height: 1.7; } @media (min-width: 900px) { .about-band-in:has(.about-band-media) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-7); } } /* ---- Marca asociada ---- */ .logo-band-in { display: grid; gap: var(--space-5); align-items: center; justify-items: start; } .logo-band h2 { font-size: var(--text-2xl); font-weight: 500; } .logo-band-mark { display: grid; place-items: center; padding: var(--space-5) var(--space-6); width: 100%; background: #FFFFFF; border-radius: var(--sec-radius); box-shadow: var(--shadow-sm); } .logo-band-mark img { max-height: 120px; width: auto; object-fit: contain; } @media (min-width: 760px) { .logo-band-in:has(.logo-band-mark) { grid-template-columns: 1fr minmax(0, 420px); } } /* ---- Invitación sobre foto ---- */ .cta-image-in { display: grid; gap: var(--space-4); justify-items: center; text-align: center; padding: var(--space-6) 0; } .cta-image h2 { font-size: var(--text-3xl); max-width: 22ch; } .cta-image p { margin: 0; font-size: var(--text-lg); max-width: 48ch; color: var(--text-muted); } /* ---- Cierre de contacto ---- */ .contact-band-in { display: grid; gap: var(--space-6); justify-items: center; text-align: center; } .contact-band h2 { font-size: var(--text-3xl); max-width: 24ch; font-weight: 500; } .contact-band-data { display: grid; gap: 4px; font-size: 1rem; color: var(--text-muted); } .contact-band-data p { margin: 0; } .contact-band-data a { color: inherit; text-decoration: none; } .contact-band-data a:hover { color: var(--text-heading); } .contact-band-cta { display: grid; place-items: center; width: 148px; height: 148px; border-radius: 50%; text-align: center; border: 1.5px solid var(--border-strong); color: var(--text-heading); text-decoration: none; font: 600 0.9rem var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .contact-band-cta:hover { background: var(--accent); color: var(--on-accent); border-color: transparent; transform: translateY(-2px); } /* Chips y elipses dentro de una columna de texto no se estiran. */ .sec-copy > .sec-chip, .sec-copy > .lt-badge { justify-self: start; } .sec--align-center .sec-copy > .sec-chip { justify-self: center; } /* ================== Movimiento de la web pública ================== Entradas y salidas suaves de cada pieza (título, texto, foto…) y parallax de las fotos de fondo. Las clases las reparte site.js y todo se apaga con `prefers-reduced-motion`. */ @media (prefers-reduced-motion: no-preference) { .site .rv { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); /* El escalonado se corta a la 6ª pieza: en una galería larga nadie espera dos segundos a que aparezca la última. */ transition-delay: calc(min(var(--rv-i, 0), 6) * 70ms); } .site .rv.in { opacity: 1; transform: none; } /* Al salir por arriba no hay escalonado: la sección se va de una pieza. */ .site .rv:not(.in) { transition-delay: 0ms; } /* Solo se promociona lo que de verdad se mueve con un transform: la textura viaja en su `background-position` y una capa propia por sección sería memoria regalada en el móvil. */ .site [data-parallax]:is(.sec--bg-image, .lt-glass, .hero-c) { will-change: transform; } } /* Al imprimir no hay scroll que dispare las entradas: todo visible. */ @media print { .site .rv { opacity: 1 !important; transform: none !important; } } /* ---- Foto a pantalla completa (se abre al tocarla) ---- */ .site .zoomable { cursor: zoom-in; } .lightbox { width: 100%; max-width: 100vw; height: 100%; max-height: 100dvh; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; } .lightbox::backdrop { background: rgba(8, 6, 5, 0.97); } /* `margin: 0`: el margen que trae `figure` por defecto (40px a los lados) descuadraba la foto hacia la derecha en pantallas pequeñas. */ .lightbox-in { display: grid; place-items: center; align-content: center; gap: var(--space-3); width: 100%; height: 100dvh; margin: 0; padding: clamp(56px, 9vw, 72px) clamp(12px, 4vw, 40px); box-sizing: border-box; touch-action: pan-y; } .lightbox img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: lb-in var(--dur-base) var(--ease-out); user-select: none; -webkit-user-drag: none; } .lightbox.is-dragging img { animation: none; transition: none; } .lightbox figcaption { color: rgba(255, 248, 245, 0.82); font-size: 0.95rem; text-align: center; max-width: 60ch; } .lightbox-close, .lightbox-nav { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; color: #FFF8F5; background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.28); backdrop-filter: blur(8px); font-size: 1.25rem; transition: background var(--dur-fast) var(--ease-out); } .lightbox-close { top: max(16px, env(safe-area-inset-top)); right: 16px; } .lightbox-nav { top: 50%; transform: translateY(-50%); } .lightbox-nav[data-step="-1"] { left: 12px; } .lightbox-nav[data-step="1"] { right: 12px; } .lightbox-close:hover, .lightbox-nav:hover { background: rgba(255, 255, 255, 0.28); } .lightbox-count { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(16px, env(safe-area-inset-bottom)); padding: 6px 14px; border-radius: var(--radius-pill); color: rgba(255, 248, 245, 0.86); background: rgba(255, 255, 255, 0.12); font: 600 0.85rem var(--font-body); } /* En el teléfono se pasa deslizando: las flechas estorbarían sobre la foto. */ @media (max-width: 640px) { .lightbox-nav { display: none; } } @keyframes lb-in { from { opacity: 0; transform: scale(0.96); } } /* ================== Pack editorial (secciones nuevas) ================== Todas se apoyan en el sistema de opciones: fondo, composición, recuadro, columnas, esquinas y textura las decide el cliente en «Cómo se ve». */ /* ---- Portada con el título encima ---- */ .hero-ov { display: grid; align-items: stretch; min-height: min(92dvh, 940px); } /* `align-self`: la sección a pantalla completa centra su contenido; aquí el bloque tiene que ocupar todo el alto para separar arriba y abajo. */ .hero-ov-in { display: grid; align-content: space-between; align-self: stretch; gap: var(--space-6); width: 100%; } .hero-ov h1 { font-size: var(--text-5xl); font-weight: 500; line-height: 0.98; letter-spacing: -0.02em; } .hero-ov .lede { font-size: var(--text-lg); max-width: 46ch; margin: 0; color: var(--text-muted); text-wrap: pretty; } .hero-ov-top { align-content: start; } .hero-ov-foot { align-content: end; } .hero-ov-note { margin: 0; justify-self: center; } @media (min-width: 900px) { .hero-ov-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 340px); grid-template-rows: auto 1fr auto; } .hero-ov-top, .hero-ov-foot { grid-column: 1; } .hero-ov-note { grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: center; } } /* ---- Historia editorial ---- */ .about-ed-text { display: grid; gap: var(--space-5); align-content: center; } .about-ed-title { font-size: var(--text-4xl); font-weight: 500; line-height: 1.04; } .about-ed-body { margin: 0; white-space: pre-line; color: var(--text-muted); line-height: 1.7; max-width: 62ch; } @media (min-width: 900px) { .about-ed-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); align-items: end; } } /* ---- Fotos con etiqueta en elipse ---- */ .feat-photos-grid { display: grid; gap: var(--sec-gap); grid-template-columns: repeat(var(--sec-cols-sm), minmax(0, 1fr)); } @media (min-width: 760px) { .feat-photos-grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); } } .feat-photo { position: relative; display: grid; place-items: center; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--sec-radius); background: var(--surface-raised); /* La etiqueta se mide contra su foto, no contra la pantalla: es lo que la deja caber cuando el cliente pide tres columnas en el móvil. */ container-type: inline-size; } .feat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); transition: transform var(--dur-slow) var(--ease-out); } .feat-photo:hover img { transform: scale(1.04); } .feat-photo-label { position: relative; z-index: 1; max-width: 78%; color: #FFF8F5; font-weight: 600; padding: 14cqi 10cqi; font-size: clamp(0.62rem, 7cqi, 0.95rem); /* Con tres columnas en un teléfono la etiqueta es más estrecha que una palabra larga. Hacen falta las tres: `min-width: 0` para que el mínimo automático de la rejilla deje de ganarle al `max-width` y la elipse no crezca; `justify-items: stretch` para que el texto ocupe el ancho en vez de encogerse a su tamaño natural; y `anywhere` —no `break-word`— porque es el único que además reduce el ancho mínimo de la caja, que es lo que aquí manda. */ min-width: 0; justify-items: stretch; hyphens: auto; overflow-wrap: anywhere; border-color: rgba(255, 248, 245, 0.72); background: rgba(12, 10, 9, 0.42); text-shadow: 0 1px 10px rgba(12, 10, 9, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } /* ---- Bloques y servicios en panel ---- */ .feat-panel-in { display: grid; gap: var(--space-6); align-items: center; } .feat-panel-title { font-size: var(--text-4xl); font-weight: 500; line-height: 1.05; } .feat-panel-items { display: grid; gap: var(--space-5); align-content: start; } .feat-panel-items article { display: grid; gap: 6px; } .feat-panel-items p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-muted); } .feat-panel-items h3 { font: 600 0.95rem var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-heading); } @media (min-width: 900px) { .feat-panel-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-7); } } /* ---- Contacto con foto al lado ---- */ .contact-split h2 { font-size: var(--text-3xl); font-weight: 500; max-width: 20ch; } .contact-split .sec-media img { aspect-ratio: 4 / 5; width: 100%; } .contact-split .contact-band-cta { justify-self: start; margin-top: var(--space-3); } /* ---- Catálogo editorial ---- */ .prod-ed-grid { display: grid; gap: var(--sec-gap); grid-template-columns: repeat(var(--sec-cols-sm), minmax(0, 1fr)); } @media (min-width: 760px) { .prod-ed-grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); } } .prod-ed-item { display: grid; gap: 10px; } .prod-ed-item .sec-media img { aspect-ratio: 4 / 5; width: 100%; } .prod-ed-item > :not(.sec-media) { padding-inline: var(--sec-inset); } .prod-ed-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .prod-ed-line h3 { font-size: var(--text-lg); font-weight: 500; } .prod-ed-line .price { font: 600 0.95rem var(--font-body); color: var(--detail); white-space: nowrap; } /* ---- Tira de fotos ---- */ .gal-strip-track { display: flex; gap: var(--sec-gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--content-pad) 20px; scrollbar-width: none; } .gal-strip-track::-webkit-scrollbar { display: none; } .gal-strip-track figure { position: relative; flex: 0 0 min(78vw, 380px); margin: 0; scroll-snap-align: center; aspect-ratio: 3 / 4; border-radius: var(--sec-radius); overflow: hidden; background: var(--surface-raised); } .gal-strip-track img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); } .gal-strip-track figcaption { position: absolute; inset: auto 0 0 0; padding: 28px 16px 14px; color: #FFF8F5; background: linear-gradient(180deg, rgba(12,10,9,0) 0%, rgba(12,10,9,0.72) 100%); font: 500 0.92rem var(--font-body); } /* ---- Pared de marcas ---- */ .logo-wall-grid { display: grid; gap: var(--sec-gap); grid-template-columns: repeat(var(--sec-cols-sm), minmax(0, 1fr)); align-items: stretch; } @media (min-width: 760px) { .logo-wall-grid { grid-template-columns: repeat(var(--sec-cols), minmax(0, 1fr)); } } .logo-wall .logo-band-mark { padding: var(--space-5); } .logo-wall .logo-band-mark img { max-height: 76px; } /* ---- Cinta en movimiento ---- */ .marquee { padding: clamp(14px, 2vw, 22px) 0; overflow: hidden; } .marquee-track { display: flex; width: max-content; } .marquee-run { display: flex; align-items: center; gap: clamp(18px, 3vw, 36px); padding-right: clamp(18px, 3vw, 36px); } .marquee-run span { font: 500 clamp(1.1rem, 2.4vw, 1.9rem) var(--font-display); letter-spacing: 0.01em; white-space: nowrap; color: var(--text-heading); } .marquee-run i { font-style: normal; color: color-mix(in srgb, currentColor 55%, transparent); font-size: clamp(0.9rem, 1.6vw, 1.3rem); } @media (prefers-reduced-motion: no-preference) { /* El desplazamiento lo escribe site.js frame a frame (el scroll la acelera y la frena), así que aquí solo se avisa al compositor. */ .marquee-track { will-change: transform; } } /* ---- Portada con el nombre de fondo ---- */ .hero-word { position: relative; display: grid; align-content: end; overflow: hidden; padding-bottom: 0; } .hero-word-in { display: grid; gap: var(--space-4); justify-items: center; text-align: center; position: relative; z-index: 1; } .hero-word-mark { font-family: var(--font-display); font-weight: 500; /* Cabe siempre en una línea: el ancho manda sobre el tamaño. */ font-size: min(16vw, calc(175vw / var(--word-chars, 8))); line-height: 0.86; letter-spacing: -0.03em; text-transform: uppercase; width: 100%; text-align: center; white-space: nowrap; } .hero-word .lede { margin: 0; max-width: 52ch; color: var(--text-muted); } /* La foto se apoya sobre el nombre sin taparlo: solape corto y alto acotado, que es como funciona un recorte en PNG. */ .hero-word-media { position: relative; z-index: 2; margin-top: clamp(-44px, -3.5vw, -12px); } .hero-word-media img { display: block; margin-inline: auto; width: auto; max-width: 100%; max-height: min(46dvh, 460px); height: auto; object-fit: contain; } /* ---- Blog en la home (secciones `blog_grid` y `blog_editorial`) ---- Las tarjetas son las mismas de /blog; aquí siguen las opciones de la sección (columnas, separación y esquinas) en vez de valores fijos. */ .blog-sec .sec-grid > .blog-card { border-radius: var(--sec-radius); } .blog-sec .blog-body h3 { font-size: var(--text-xl); } .blog-sec .blog-body p { margin: 0; font-size: 0.95rem; color: var(--text-muted); } .blog-sec .blog-media img { object-position: var(--focus, 50% 50%); } .blog-ed-in { display: grid; gap: var(--sec-gap); align-items: start; } @media (min-width: 900px) { .blog-ed-in { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } } .blog-ed-lead { display: grid; gap: 12px; text-decoration: none; color: var(--text-body); } .blog-ed-lead .sec-media img { aspect-ratio: 16 / 10; width: 100%; } .blog-ed-lead h3 { font-size: var(--text-2xl); color: var(--text-heading); text-wrap: balance; } .blog-ed-lead p { margin: 0; color: var(--text-muted); max-width: 56ch; } .blog-ed-lead:hover h3 { color: var(--accent); } .blog-ed-list { list-style: none; margin: 0; padding: 0; padding-inline: var(--sec-inset); display: grid; gap: 0; } .blog-ed-list li { border-top: 1px solid var(--border-subtle); } .blog-ed-list li:last-child { border-bottom: 1px solid var(--border-subtle); } .blog-ed-list a { display: grid; gap: 6px; padding: var(--space-4) 0; text-decoration: none; color: var(--text-body); } .blog-ed-list h4 { font-size: var(--text-lg); color: var(--text-heading); } .blog-ed-list a:hover h4 { color: var(--accent); } /* El botón cierra la lista: ni línea arriba ni abajo, solo aire. */ .blog-ed-list li.blog-ed-more { border: 0; padding-top: var(--space-4); } /* ---- Citas en la home (`bookings_band` y `bookings_card`) ---- El horario semanal es una lista, no una tabla: en el móvil se lee en una columna y en el escritorio se reparte sola. */ .bk-days { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: 10px; } @media (min-width: 700px) { .bk-days:not(.is-stacked) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } } .bk-days li { display: grid; gap: 2px; padding: 12px 16px; border-radius: var(--sec-radius); background: color-mix(in srgb, var(--surface-card) 88%, transparent); border: 1px solid var(--border-subtle); } .bk-days b { font: 600 0.95rem var(--font-body); color: var(--text-heading); } .bk-days span { font-size: 0.95rem; color: var(--text-muted); } .bk-note { margin: var(--space-4) 0 0; font-size: 0.95rem; color: var(--text-muted); } .bk-card .sec-media img { aspect-ratio: 4 / 5; width: 100%; } /* ---- Consulta en la home (`inquiry_form` e `inquiry_invite`) ---- */ .iq-sec form { max-width: 620px; } .site .iq-sec.sec--align-center form { margin-inline: auto; } .iq-point { display: grid; gap: 8px; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--sec-radius); background: color-mix(in srgb, var(--surface-card) 90%, transparent); border: 1px solid var(--border-subtle); } .iq-point h3 { font-size: var(--text-lg); } .iq-point p { margin: 0; font-size: 0.95rem; color: var(--text-muted); } /* ---- Tarjetas con salida: «Leer más» y el botón del negocio ---- El pie va abajo del todo aunque las tarjetas midan distinto, así los botones de una fila quedan alineados. */ .card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: var(--space-3); } .prod-ed-item .card-foot { margin-top: 6px; } .read-more { font: 600 0.9rem var(--font-body); color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-bottom: 1px; } .read-more:hover { border-bottom-color: var(--accent); } .s-btn-sm { min-height: 40px; padding: 0 18px; font-size: 0.9rem; } .site :is(.p-title h3 a, .svc-card h3 a, .prod-ed-line h3 a) { color: inherit; text-decoration: none; } .site :is(.p-title h3 a, .svc-card h3 a, .prod-ed-line h3 a):hover { color: var(--accent); } .p-card .p-media, a.sec-media { display: block; } /* ---- Ficha de un producto o de un servicio ---- Foto grande a un lado, todo lo que hay que saber al otro, y abajo la salida: el formulario y el anterior/siguiente. */ .item-detail { padding-bottom: clamp(48px, 7vw, 88px); } .item-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.9rem; color: var(--text-muted); margin-bottom: var(--space-5); } .item-crumbs a { color: var(--text-muted); text-decoration: none; } .item-crumbs a:hover { color: var(--accent); } .item-crumbs [aria-current] { color: var(--text-heading); } .item-main { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; } @media (min-width: 900px) { .item-main:not(.is-solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .item-main.is-solo { max-width: 760px; } .item-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-raised); } .item-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); aspect-ratio: 4 / 3; } .item-copy { display: grid; gap: var(--space-4); align-content: start; justify-items: start; } .item-copy > :not(.svc-icon) { justify-self: stretch; } .item-copy h1 { font-size: var(--text-3xl); } .item-aside { margin: 0; font: 600 var(--text-xl) var(--font-body); color: var(--detail); } .item-copy .lede { margin: 0; font-size: var(--text-lg); color: var(--text-muted); text-wrap: pretty; } .item-details { white-space: pre-line; line-height: 1.75; color: var(--text-body); } .item-actions { margin-top: var(--space-2); } /* Anterior / siguiente: nadie se queda sin salida al final de una ficha. */ .item-nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; margin-top: clamp(40px, 4vw, 60px); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); } .item-nav a { display: grid; gap: 4px; text-decoration: none; color: var(--text-heading); min-width: 0; } .item-nav a b { font: 500 1rem var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-nav a:hover b { color: var(--accent); } .item-nav-next { text-align: right; justify-items: end; } .item-nav-count { font-size: 0.85rem; color: var(--text-muted); white-space: nowrap; } /* En el móvil el contador se va a su propia línea: entre dos títulos no cabe. */ @media (max-width: 559px) { .item-nav { grid-template-columns: 1fr 1fr; } .item-nav a b { max-width: 40vw; } .item-nav-count { grid-row: 2; grid-column: 1 / -1; text-align: center; } } /* ---- Aviso de envío ---- Lo que se manda desde la web se confirma con un toast abajo, no con un recuadro de color dentro del formulario: en una paleta vinosa el acento se leía como un error. */ #site-toasts { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 10px; width: min(92vw, 440px); } .site-toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 18px; border-radius: var(--radius-md); background: var(--success); color: #F4FAF5; font: 500 0.95rem var(--font-body); line-height: 1.45; box-shadow: var(--shadow-md); animation: site-toast-in 0.25s ease-out; } .site-toast.is-error { background: var(--danger); color: #FFF6F5; } .site-toast.is-leaving { opacity: 0; transition: opacity 0.25s ease-out; } @keyframes site-toast-in { from { opacity: 0; transform: translateY(12px); } } @media (prefers-reduced-motion: reduce) { .site-toast { animation: none; } }