/* ========================================================================== OVERFLO POTATO — style.css -------------------------------------------------------------------------- ÍNDICE 01. RESET 02. VARIABLES (tokens) <- se define al elegir la paleta 03. BASE / TIPOGRAFÍA 04. UTILIDADES / LAYOUT 05. ACCESIBILIDAD --- SECCIONES (se van agregando una por una) --- 06. HEADER / NAV 07. HERO 08. MARQUEE 09. ORDER ONLINE 10. PAGE HEADER (About Us) 11. ABOUT US (contenido) 12. POPULAR DISHES 13. GALLERY 14. MENÚ (menu.html) 15. GOOGLE REVIEWS 16. MAPA 17. PANTALLA DE CARGA 18. BOTÓN FLOTANTE 19. FOOTER ========================================================================== */ /* ========================================================================== 01. RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Los anclajes no quedan tapados por el header fijo. */ scroll-padding-top: var(--header-h); /* El recorte va también en : ponerlo solo en no impide el arrastre lateral en iOS. */ overflow-x: hidden; max-width: 100%; } body { min-height: 100vh; min-height: 100svh; width: 100%; max-width: 100%; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* Una palabra larguísima (un correo, una URL) no debe empujar la página a lo ancho. */ overflow-wrap: break-word; } img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } h1, h2, h3, h4, h5, h6 { line-height: 1.15; text-wrap: balance; font-weight: 700; } p { text-wrap: pretty; } table { border-collapse: collapse; width: 100%; } /* ========================================================================== 02. VARIABLES (tokens) Placeholders neutros — se reemplazan al definir la identidad visual. ========================================================================== */ :root { /* --- Colores --- */ --color-brand: #E1141A; /* rojo del logo (muestreado del PNG) */ --color-brand-dark: #B00F14; --color-accent: #E8A33D; /* dorado mantequilla / queso */ --color-text: #1C1613; --color-text-muted: #5E524B; --color-bg: #FFFFFF; --color-bg-alt: #F7F2EC; --color-border: #E4DAD0; --color-nav: #171210; /* barra de navegación oscura */ --color-nav-line: rgba(255, 255, 255, 0.12); --color-dark: #0C0A09; /* fondo de secciones oscuras (hero) */ --color-on-dark: #FFFFFF; --color-on-dark-mut: rgba(255, 255, 255, 0.72); /* --- Tipografía --- */ --font-heading: "Anton", "Arial Narrow", system-ui, sans-serif; /* condensada, títulos */ --font-body: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif; /* Escala fluida: se adapta sola de móvil a desktop */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --fs-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem); --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); --fs-md: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem); --fs-lg: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --fs-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem); --fs-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem); /* --- Espaciado --- */ --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: clamp(3rem, 8vw, 6rem); /* padding vertical de secciones */ /* --- Layout --- */ --container-max: 1200px; --container-pad: clamp(1rem, 4vw, 2rem); /* --- Otros --- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 24px; --radius-full: 999px; --shadow-sm: 0 1px 3px rgba(28, 22, 19, 0.08); --shadow-md: 0 6px 20px rgba(28, 22, 19, 0.10); --shadow-lg: 0 16px 40px rgba(28, 22, 19, 0.14); --transition: 0.3s ease; --header-h: 112px; /* valor de arranque; main.js lo ajusta al alto real */ } /* ========================================================================== 03. BASE / TIPOGRAFÍA ========================================================================== */ body { font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text); background-color: var(--color-bg); /* Compensa el header fijo para que no tape el contenido. */ padding-top: var(--header-h); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } /* ========================================================================== 04. UTILIDADES / LAYOUT ========================================================================== */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } .section { padding-block: var(--space-3xl); } .text-center { text-align: center; } /* Entrada al hacer scroll — main.js añade .is-visible. Va bajo .js (clase que pone el script del ): sin JS el contenido se ve siempre, nunca queda invisible. */ .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* --- Encabezado de sección (reutilizable) --- */ .section__eyebrow { font-family: var(--font-heading); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.18em; text-align: center; color: var(--color-brand); } .section__title { margin-top: var(--space-xs); font-size: clamp(2rem, 1rem + 4vw, 3.5rem); line-height: 1.05; text-transform: uppercase; text-align: center; } /* --- Botones (componente reutilizable) --- */ .btn { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.95rem 1.75rem; font-family: var(--font-heading); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; border-radius: var(--radius-sm); transition: background-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition); } .btn--primary { background-color: var(--color-brand); color: #fff; box-shadow: 0 10px 24px rgba(225, 20, 26, 0.28); } .btn--primary:hover { background-color: var(--color-brand-dark); transform: translateY(-2px); } /* ========================================================================== 05. ACCESIBILIDAD ========================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -100px; left: var(--space-md); z-index: 9999; padding: var(--space-sm) var(--space-md); background-color: var(--color-brand); color: #fff; border-radius: var(--radius-sm); transition: top var(--transition); } .skip-link:focus { top: var(--space-md); } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 06. HEADER / NAV ========================================================================== */ /* Header fijo: siempre visible arriba. --header-h lo recalcula main.js (módulo 05) según la altura real. */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; } .icon { width: 1.125em; height: 1.125em; flex: none; } /* --- 06.1 Topbar (horario + redes) --- */ .topbar { background-color: var(--color-brand); color: #fff; font-size: var(--fs-xs); letter-spacing: 0.02em; } .topbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-xs); } .topbar__hours, .topbar__social { display: flex; align-items: center; gap: var(--space-xs); } .topbar__social-label { font-weight: 600; } .social { display: flex; align-items: center; gap: var(--space-2xs); } .social__link { display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: var(--radius-full); transition: background-color var(--transition), color var(--transition); } .social__link:hover { background-color: var(--color-accent); color: var(--color-brand-dark); } /* Yelp va con su nombre escrito: no tengo su logo oficial y una aproximación no sería su marca. */ .social__link--text { width: auto; padding-inline: var(--space-xs); font-family: var(--font-heading); font-size: 0.6875rem; letter-spacing: 0.06em; } /* --- 06.2 Barra principal --- */ .navbar { display: grid; grid-template-columns: auto minmax(0, 1fr); background-color: var(--color-nav); box-shadow: var(--shadow-sm); } /* Logo sobre bloque blanco (el PNG ya trae fondo blanco, así que empalma) */ .brand { display: flex; align-items: center; padding: var(--space-2xs) clamp(0.75rem, 3vw, 2rem); background-color: var(--color-bg); } /* El logo es cuadrado: se escala por alto y el ancho sigue solo. */ .brand__logo { width: auto; height: clamp(3.5rem, 4.4rem + 1.2vw, 5.25rem); transition: transform var(--transition); } .brand:hover .brand__logo { transform: scale(1.04); } .navbar__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-inline: clamp(1rem, 3vw, 2.25rem); } .nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); } .nav__link { position: relative; display: block; padding-block: var(--space-md); font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #fff; transition: color var(--transition); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: calc(var(--space-md) - 0.5rem); width: 100%; height: 3px; background-color: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .nav__link:hover, .nav__link.is-current { color: var(--color-accent); } .nav__link:hover::after, .nav__link.is-current::after { transform: scaleX(1); } /* --- 06.2b Submenú de anclas --- */ .nav__item { position: relative; } .nav__item--has-sub { display: flex; align-items: center; gap: var(--space-2xs); } /* Cursor hacia abajo hecho con bordes: sin archivo de icono. */ .nav__caret { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; color: #fff; } .nav__caret-mark { width: 0.45rem; height: 0.45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--transition); } .nav__caret[aria-expanded="true"] .nav__caret-mark { transform: translateY(1px) rotate(-135deg); } .nav__item--has-sub:hover .nav__caret, .nav__caret[aria-expanded="true"] { color: var(--color-accent); } .nav__sub { position: absolute; top: 100%; left: 0; z-index: 10; min-width: 13rem; padding: var(--space-xs) 0; background-color: var(--color-nav); border: 1px solid var(--color-nav-line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); /* Oculto pero enfocable-friendly: se muestra con hover, foco o clic. */ opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub, .nav__sub.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav__sub a { display: block; padding: var(--space-xs) var(--space-md); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.85); transition: background-color var(--transition), color var(--transition); } .nav__sub a:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--color-accent); } /* --- 06.3 Botón hamburguesa (solo móvil) --- */ .nav-toggle { display: none; padding: var(--space-xs); color: #fff; } .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.5rem; height: 2px; background-color: currentColor; transition: transform var(--transition), opacity var(--transition); } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: relative; } .nav-toggle__bars::before { top: -7px; } .nav-toggle__bars::after { top: 5px; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); } /* --- 06.4 Responsive --- */ /* Tablet y abajo: el nav pasa a panel desplegable bajo el header. */ @media (max-width: 991px) { .topbar__inner { justify-content: center; text-align: center; } .navbar { align-items: center; } .navbar__bar { justify-content: flex-end; } /* El panel cuelga del header (que es el ancestro posicionado). */ .nav { position: absolute; left: 0; right: 0; top: 100%; display: none; max-height: calc(100svh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; background-color: var(--color-nav); border-top: 1px solid var(--color-nav-line); box-shadow: var(--shadow-md); } .nav.is-open { display: block; } .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-inline: var(--container-pad); } .nav__list > li + li { border-top: 1px solid var(--color-nav-line); } .nav__link::after { display: none; } /* En móvil el submenú se despliega en línea, no flotando. */ .nav__item--has-sub { flex-wrap: wrap; justify-content: space-between; } .nav__caret { width: 2.75rem; height: 2.75rem; } .nav__sub { position: static; width: 100%; display: none; padding: 0 0 var(--space-xs); background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } /* Sin hover en táctil: aquí manda el botón. */ .nav__item--has-sub:hover .nav__sub, .nav__item--has-sub:focus-within .nav__sub { display: none; } .nav__sub.is-open, .nav__item--has-sub:focus-within .nav__sub.is-open { display: block; } .nav__sub a { padding-left: var(--space-md); border-left: 2px solid var(--color-brand); margin-bottom: var(--space-2xs); } .nav-toggle { display: block; } } /* Móvil: la topbar se apila y el logo no se come la barra. */ @media (max-width: 575px) { .topbar__inner { flex-direction: column; gap: var(--space-2xs); } .brand__logo { height: 3.75rem; } } /* Móvil pequeño (≤360px): solo los iconos, sin la etiqueta. */ @media (max-width: 360px) { .topbar__social-label { display: none; } .brand__logo { height: 3.25rem; } } /* Pantallas bajas en horizontal: header más compacto. */ @media (max-height: 480px) and (orientation: landscape) { .brand__logo { height: 2.75rem; } .nav__link { padding-block: var(--space-sm); } } /* ========================================================================== 07. HERO ========================================================================== */ .hero { position: relative; isolation: isolate; overflow: hidden; background-color: var(--color-dark); color: var(--color-on-dark); padding-block: clamp(2.5rem, 6vw, 5rem); } /* Halos de color detrás del plato (rojo de marca + dorado queso). */ .hero__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(42rem 42rem at 78% 42%, rgba(225, 20, 26, 0.22), transparent 62%), radial-gradient(28rem 28rem at 60% 85%, rgba(232, 163, 61, 0.14), transparent 65%); } .hero__inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); min-height: calc(100svh - var(--header-h)); } /* --- 07.1 Columna de texto --- */ .hero__kicker { margin-bottom: var(--space-md); font-size: var(--fs-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-on-dark-mut); } .hero__title { font-size: clamp(2.25rem, 1.1rem + 4.6vw, 4rem); line-height: 1.04; letter-spacing: 0.005em; text-transform: uppercase; text-wrap: balance; } .hero__title-line { display: block; margin-top: 0.12em; } .hero__text { max-width: 46ch; margin-top: var(--space-lg); color: var(--color-on-dark-mut); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xl); } /* Escalona la entrada de los elementos del hero. */ .hero__title { transition-delay: 0.08s; } .hero__text { transition-delay: 0.16s; } .hero__actions { transition-delay: 0.24s; } .hero__media { transition-delay: 0.12s; } /* --- 07.2 Columna de imagen --- */ .hero__media { position: relative; justify-self: center; } .hero__img { width: 100%; max-width: 34rem; margin-inline: auto; filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.55)); transition: transform 0.5s ease; } /* Empujón en diagonal al pasar el mouse (hacia arriba-izquierda). */ .hero__img:hover { transform: translate(-10px, -10px); } /* Sello de precio, como el "only now" de la referencia. */ .hero__badge { position: absolute; right: 0; top: 46%; padding: var(--space-sm) var(--space-lg); background-color: var(--color-brand); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); transform: rotate(-6deg); font-family: var(--font-heading); font-size: var(--fs-sm); line-height: 1; text-transform: uppercase; letter-spacing: 0.14em; } /* --- 07.3 Responsive --- */ @media (max-width: 991px) { .hero__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; min-height: 0; } /* Apilado: primero el mensaje, después la foto. */ .hero__content { order: 1; } .hero__media { order: 2; width: min(80%, 26rem); } .hero__text { margin-inline: auto; } .hero__actions { justify-content: center; } .hero__badge { right: -0.5rem; top: 52%; } } @media (max-width: 575px) { .hero__media { width: min(92%, 22rem); } .hero__badge { padding: var(--space-xs) var(--space-md); } .btn { width: 100%; justify-content: center; } } /* ========================================================================== 08. MARQUEE (banda de texto en movimiento) ========================================================================== */ .marquee { position: relative; overflow: hidden; background-color: var(--color-bg); border-block: 1px solid var(--color-border); padding-block: clamp(1rem, 2.5vw, 2rem); /* En táctil, un dedo que se arrastre sobre la banda no debe poder empujarla de lado: aquí solo se desplaza la página, en vertical. */ touch-action: pan-y; } /* Tinte cálido en el extremo derecho, como en la referencia. */ .marquee::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(30rem 20rem at 100% 50%, rgba(225, 20, 26, 0.07), transparent 70%); } .marquee__track { display: flex; width: max-content; animation: marquee-scroll 36s linear infinite; } /* Dos grupos idénticos: al desplazar la mitad, el bucle cierra sin salto. */ @keyframes marquee-scroll { to { transform: translateX(-50%); } } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; flex: none; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); padding-right: clamp(1.5rem, 4vw, 3.5rem); } /* Letras solo de contorno. */ .marquee__word { font-family: var(--font-heading); font-size: clamp(3rem, 8.5vw, 7.5rem); line-height: 1; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.01em; color: transparent; -webkit-text-stroke: 2px rgba(28, 22, 19, 0.20); } /* Si el navegador no soporta el contorno, el texto se rellena tenue en vez de quedar invisible. */ @supports not (-webkit-text-stroke: 1px #000) { .marquee__word { color: rgba(28, 22, 19, 0.14); } } .marquee__star { flex: none; color: rgba(28, 22, 19, 0.22); } .marquee__star svg { width: clamp(1.75rem, 3.5vw, 3rem); height: clamp(1.75rem, 3.5vw, 3rem); } @media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } } /* ========================================================================== 09. ORDER ONLINE (banda de llamada a la acción) ========================================================================== */ .order { position: relative; isolation: isolate; overflow: hidden; color: var(--color-on-dark); padding-block: clamp(2.5rem, 6vw, 4.5rem); /* Textura de pared negra; la primera regla es el respaldo para navegadores sin image-set(). */ background: var(--color-dark) url("../images/bg-texture-dark.jpg") center / cover no-repeat; background-image: image-set( url("../images/bg-texture-dark.webp") type("image/webp"), url("../images/bg-texture-dark.jpg") type("image/jpeg") ); } /* Degradado cálido del negro al ámbar hacia la derecha, como la referencia. */ .order__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(38rem 38rem at 82% 50%, rgba(232, 120, 24, 0.40), transparent 64%), radial-gradient(22rem 22rem at 96% 70%, rgba(225, 20, 26, 0.28), transparent 70%); } .order__inner { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); } .order__eyebrow { margin-bottom: var(--space-sm); font-family: var(--font-heading); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.18em; color: var(--color-brand); } .order__title { font-size: clamp(2rem, 1rem + 4vw, 3.5rem); line-height: 1.05; text-transform: uppercase; } .order__lead { margin-top: var(--space-sm); font-family: var(--font-heading); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.02em; color: var(--color-accent); } .order__text { max-width: 42ch; margin-top: var(--space-md); color: var(--color-on-dark-mut); } .order__actions { margin-top: var(--space-xl); } .order__title { transition-delay: 0.08s; } .order__lead { transition-delay: 0.14s; } .order__text { transition-delay: 0.20s; } .order__actions { transition-delay: 0.26s; } .order__media { justify-self: center; } .order__img { width: 100%; max-width: 30rem; margin-inline: auto; filter: drop-shadow(0 28px 40px rgba(0, 0, 0, 0.5)); transition: transform 0.5s ease; } .order__img:hover { transform: translate(-10px, -10px); } /* --- 09.1 Responsive --- */ @media (max-width: 991px) { .order__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .order__content { order: 1; } .order__media { order: 2; width: min(80%, 24rem); } .order__text { margin-inline: auto; } } @media (max-width: 575px) { .order__media { width: min(92%, 20rem); } } /* ========================================================================== 10. PAGE HEADER (encabezado de sección — About Us) ========================================================================== */ .page-header { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: clamp(13rem, 26vw, 20rem); padding-block: var(--space-2xl); text-align: center; color: var(--color-on-dark); /* Papel a cuadros de las cajas, en cuadro chico para que lea como textura y no como bandera. El patrón va crudo debajo... */ background: var(--color-dark) url("../images/bg-checker.jpg") center / 42rem auto repeat; background-image: image-set( url("../images/bg-checker.webp") type("image/webp"), url("../images/bg-checker.jpg") type("image/jpeg") ); } /* ...y esta capa lo atenúa: a contraste pleno el blanco y negro se comería el texto. Más oscuro al centro, donde va el título. */ .page-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(55% 110% at 50% 50%, rgba(12, 10, 9, 0.96), rgba(12, 10, 9, 0.82)), linear-gradient(90deg, rgba(225, 20, 26, 0.20), transparent 45%, rgba(225, 20, 26, 0.20)); } /* Foto recortada asomando por el borde derecho. */ .page-header__dish { position: absolute; right: clamp(-3rem, -2vw, 0rem); bottom: -18%; z-index: -1; width: clamp(11rem, 26vw, 26rem); height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6)); pointer-events: none; } .page-header__title { font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4.5rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.01em; } @media (max-width: 575px) { .page-header__dish { right: -4rem; bottom: -10%; opacity: 0.55; } } /* ========================================================================== 11. ABOUT US (contenido) ========================================================================== */ /* La píldora y los aros sobresalen del bloque de la foto a propósito. Se recorta solo en horizontal (clip, no hidden: hidden forzaría un contenedor de scroll y en vertical cortaría las sombras). */ .about { overflow-x: clip; } .about__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 6vw, 5rem); } /* --- 11.1 Texto --- */ .about__eyebrow { text-align: left; } .about__title { margin-top: var(--space-xs); font-size: clamp(1.875rem, 1rem + 3.6vw, 3.25rem); line-height: 1.05; text-transform: uppercase; } .about__title-line { display: block; } .about__text { max-width: 52ch; margin-top: var(--space-md); color: var(--color-text-muted); } .about__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); } /* Enlace de texto subrayado, el secundario de la referencia. */ .link-arrow { font-family: var(--font-heading); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text); border-bottom: 2px solid var(--color-brand); padding-bottom: 2px; transition: color var(--transition); } .link-arrow:hover { color: var(--color-brand); } /* --- 11.2 Dos bloques de refuerzo --- */ .about__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); } .feature__title { position: relative; padding-left: var(--space-md); font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.02em; } /* Barra roja en lugar del icono de la referencia. */ .feature__title::before { content: ""; position: absolute; left: 0; top: 0.1em; bottom: 0.1em; width: 4px; border-radius: var(--radius-full); background-color: var(--color-brand); } .feature__text { margin-top: var(--space-2xs); padding-left: var(--space-md); font-size: var(--fs-sm); color: var(--color-text-muted); } /* --- 11.3 Foto circular con aros y sellos --- */ .about__media { position: relative; justify-self: center; width: min(100%, 30rem); aspect-ratio: 1; } /* Entrada propia: sube desde abajo, más recorrido y más lenta que el resto de elementos, para que se note. */ .js .about__media[data-reveal] { transform: translateY(5rem) scale(0.94); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: 0.1s; } .js .about__media[data-reveal].is-visible { transform: translateY(0) scale(1); } .about__photo { position: relative; width: 78%; height: 78%; margin: 11%; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow-lg); /* --px/--py los mueve main.js siguiendo el cursor. */ transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(var(--photo-scale, 1)); transition: transform 0.45s ease, box-shadow 0.45s ease; } .about__media:hover .about__photo { --photo-scale: 1.06; box-shadow: 0 26px 50px rgba(28, 22, 19, 0.28); } /* Aros abiertos: son arcos, no círculos completos — por eso se les nota el giro. Cada uno va a su ritmo y en sentido contrario. */ .about__rings::before, .about__rings::after { content: ""; position: absolute; border: 1px solid transparent; border-radius: 50%; opacity: 0.6; animation: about-ring-spin 26s linear infinite; } .about__rings::before { inset: 1%; border-top-color: var(--color-brand); border-right-color: var(--color-brand); border-bottom-color: var(--color-brand); } .about__rings::after { inset: -6%; border-left-color: var(--color-brand); border-top-color: var(--color-brand); animation-duration: 18s; animation-direction: reverse; } /* Al pasar el mouse los aros aceleran. */ .about__media:hover .about__rings::before { animation-duration: 9s; } .about__media:hover .about__rings::after { animation-duration: 6s; } @keyframes about-ring-spin { to { transform: rotate(360deg); } } /* Píldora flotante arriba a la derecha. */ .about__pill { position: absolute; top: 12%; right: -4%; display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-2xs); background-color: var(--color-bg); border-radius: var(--radius-full); box-shadow: var(--shadow-md); font-family: var(--font-heading); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-brand); white-space: nowrap; } .about__pill-img { width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; } /* Sello en estrella abajo a la derecha (clip-path, sin imagen). */ .about__stamp { position: absolute; right: 4%; bottom: 2%; display: grid; place-items: center; width: clamp(6.5rem, 16vw, 8.5rem); aspect-ratio: 1; background-color: var(--color-brand); color: #fff; clip-path: polygon( 100% 50%, 92.2% 58.4%, 96.2% 69.1%, 85.8% 73.9%, 85.4% 85.4%, 73.9% 85.8%, 69.1% 96.2%, 58.4% 92.2%, 50% 100%, 41.6% 92.2%, 30.9% 96.2%, 26.1% 85.8%, 14.6% 85.4%, 14.2% 73.9%, 3.8% 69.1%, 7.8% 58.4%, 0% 50%, 7.8% 41.6%, 3.8% 30.9%, 14.2% 26.1%, 14.6% 14.6%, 26.1% 14.2%, 30.9% 3.8%, 41.6% 7.8%, 50% 0%, 58.4% 7.8%, 69.1% 3.8%, 73.9% 14.2%, 85.4% 14.6%, 85.8% 26.1%, 96.2% 30.9%, 92.2% 41.6% ); font-family: var(--font-heading); font-size: clamp(0.7rem, 0.35rem + 1.6vw, 1.15rem); line-height: 1.1; text-align: center; text-transform: uppercase; letter-spacing: 0.04em; } /* Aro punteado interior: va aparte del texto para poder girar sin arrastrarlo. */ .about__stamp::before { content: ""; position: absolute; inset: 18%; border: 2px dashed rgba(255, 255, 255, 0.6); border-radius: 50%; animation: about-ring-spin 14s linear infinite; } .about__media:hover .about__stamp::before { animation-duration: 5s; } .about__stamp span { position: relative; } /* --- 11.4 Responsive --- */ @media (max-width: 991px) { .about__inner { grid-template-columns: 1fr; } /* Primero el mensaje, después la foto. */ .about__content { order: 1; } .about__media { order: 2; width: min(85%, 26rem); } .about__text { max-width: none; } } @media (max-width: 575px) { .about__media { width: min(100%, 20rem); } /* En pantallas estrechas la píldora deja de ir en una sola línea: con nowrap, si la tipografía carga más ancha de lo previsto, empuja la página a lo ancho. */ .about__pill { right: 0; max-width: 72%; white-space: normal; font-size: 0.625rem; line-height: 1.3; } .about__actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .about__rings::before, .about__rings::after, .about__stamp::before { animation: none; } .about__photo { transition: none; } } /* ========================================================================== 12. POPULAR DISHES ========================================================================== */ .dishes { background-color: var(--color-bg-alt); } .dishes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); column-gap: clamp(1.5rem, 3vw, 2rem); /* La foto sobresale 4.5rem de su tarjeta: al haber más de una fila, el hueco vertical tiene que superar eso o las fotos pisan la tarjeta de arriba. */ row-gap: 6rem; /* Mismo aire para la primera fila. */ margin-top: calc(var(--space-2xl) + 4.5rem); } /* --- Tarjeta --- */ .dish { display: flex; flex-direction: column; align-items: center; padding: 0 var(--space-lg) var(--space-xl); text-align: center; background-color: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); } .dish:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } .dish__media { position: relative; width: 11rem; max-width: 60%; aspect-ratio: 1; /* Mitad de la foto sobresale por encima de la tarjeta. */ margin-top: -4.5rem; margin-bottom: var(--space-md); } /* Aro punteado que gira alrededor de la foto. */ .dish__media::before { content: ""; position: absolute; inset: -0.7rem; border: 2px dashed var(--color-brand); border-radius: 50%; animation: dish-ring-spin 22s linear infinite; } @keyframes dish-ring-spin { to { transform: rotate(360deg); } } .dish:hover .dish__media::before { animation-duration: 8s; } .dish__img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: var(--shadow-md); transition: transform 0.45s ease; } /* Las circulares crecen en el sitio, sin desplazarse: si se mueven en diagonal se salen de su aro. */ .dish:hover .dish__img { transform: scale(1.06); } .dish__name { font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.01em; } .dish__desc { margin-top: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-text-muted); } .dishes__cta { margin-top: var(--space-2xl); text-align: center; } /* --- 10.1 Responsive --- */ @media (max-width: 575px) { .dishes__grid { grid-template-columns: 1fr; } .dish__media { width: 12rem; max-width: 62%; } .dishes__cta .btn { width: auto; } } @media (prefers-reduced-motion: reduce) { .dish__media::before { animation: none; } } /* ========================================================================== 13. GALLERY (carrusel de fotos) ========================================================================== */ .gallery { position: relative; background-color: var(--color-bg); padding-block: clamp(2rem, 5vw, 3.5rem); } /* Carril con scroll horizontal: swipe nativo en móvil, flechas en desktop. */ .gallery__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(16rem, 30vw, 28rem); gap: clamp(0.75rem, 1.5vw, 1.25rem); padding-inline: var(--container-pad); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--container-pad); overscroll-behavior-x: contain; /* Oculta la barra de scroll sin perder el desplazamiento. */ scrollbar-width: none; -ms-overflow-style: none; } .gallery__track::-webkit-scrollbar { display: none; } .gallery__item { scroll-snap-align: start; overflow: hidden; border-radius: var(--radius-sm); background-color: var(--color-bg-alt); } .gallery__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.5s ease; } /* Al pasar el mouse la foto crece un poco dentro de su marco. */ .gallery__item:hover .gallery__img, .gallery__item:focus-within .gallery__img { transform: scale(1.07) translate(-8px, -8px); } /* --- 11.1 Flechas --- */ .gallery__btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem; transform: translateY(-50%); border-radius: var(--radius-full); background-color: var(--color-brand); color: #fff; box-shadow: var(--shadow-md); transition: background-color var(--transition), opacity var(--transition); } .gallery__btn:hover { background-color: var(--color-brand-dark); } .gallery__btn svg { width: 1.25rem; height: 1.25rem; } .gallery__btn--prev { left: clamp(0.5rem, 2vw, 1.5rem); } .gallery__btn--next { right: clamp(0.5rem, 2vw, 1.5rem); } /* Extremo alcanzado: el botón se apaga pero no desaparece (evita saltos). */ .gallery__btn[disabled] { opacity: 0.35; cursor: default; } /* --- 11.2 Responsive --- */ @media (max-width: 991px) { .gallery__track { grid-auto-columns: clamp(14rem, 42vw, 22rem); } } @media (max-width: 575px) { .gallery__track { grid-auto-columns: 78vw; } .gallery__btn { width: 2.5rem; height: 2.5rem; } } @media (prefers-reduced-motion: reduce) { .gallery__img { transition: none; } } /* ========================================================================== 14. MENÚ (página menu.html) ========================================================================== */ .menu { background-color: var(--color-bg-alt); } /* --- 14.1 Pestañas por categoría --- */ .menu__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.5rem, 2vw, 1.5rem); margin-top: var(--space-xl); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); } .menu__tab { position: relative; padding: var(--space-xs) var(--space-md); font-family: var(--font-heading); font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); transition: color var(--transition); } .menu__tab::after { content: ""; position: absolute; left: var(--space-md); right: var(--space-md); bottom: 0; height: 3px; border-radius: var(--radius-full); background-color: var(--color-brand); transform: scaleX(0); transition: transform var(--transition); } .menu__tab:hover { color: var(--color-text); } .menu__tab.is-active { color: var(--color-brand); } .menu__tab.is-active::after { transform: scaleX(1); } /* Separador vertical entre pestañas, como en la referencia. */ .menu__tab + .menu__tab::before { content: ""; position: absolute; left: calc(clamp(0.5rem, 2vw, 1.5rem) / -2); top: 20%; bottom: 20%; width: 1px; background-color: var(--color-border); } /* --- 14.2 Lista de platos --- */ .menu__grid { display: grid; grid-template-columns: 1fr; column-gap: clamp(2rem, 5vw, 4rem); row-gap: var(--space-lg); margin-top: var(--space-2xl); } /* Dos columnas como la referencia; más de dos aprieta las descripciones. */ @media (min-width: 768px) { .menu__grid { grid-template-columns: repeat(2, 1fr); } } .menu-item { position: relative; display: flex; align-items: center; gap: var(--space-md); } /* Aro punteado girando alrededor de la foto. Va como pseudo-elemento del item porque un no admite ::before. */ .menu-item::before { content: ""; position: absolute; left: -0.45rem; top: 50%; width: 6.9rem; height: 6.9rem; border: 2px dotted var(--color-brand); border-radius: 50%; /* El centrado va aquí y no solo en la animación: si el usuario pide menos movimiento, la animación se apaga y el aro debe seguir en su sitio. */ transform: translateY(-50%); animation: menu-ring-spin 34s linear infinite; pointer-events: none; } /* Se van intercalando: uno rojo, el siguiente negro, y giran al revés uno del otro. */ .menu-item:nth-child(even)::before { border-color: var(--color-text); animation-duration: 42s; animation-direction: reverse; } /* Con dos columnas, impar/par dejaría una columna entera roja y la otra negra. Este patrón los alterna en damero, fila a fila. */ @media (min-width: 768px) { .menu-item:nth-child(4n + 2)::before, .menu-item:nth-child(4n + 3)::before { border-color: var(--color-text); animation-duration: 42s; animation-direction: reverse; } .menu-item:nth-child(4n + 1)::before, .menu-item:nth-child(4n)::before { border-color: var(--color-brand); animation-duration: 34s; animation-direction: normal; } } @keyframes menu-ring-spin { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-50%) rotate(360deg); } } .menu-item:hover::before { animation-duration: 12s; } .menu-item__img { flex: none; width: 6rem; height: 6rem; object-fit: cover; border-radius: 50%; background-color: var(--color-bg); box-shadow: var(--shadow-sm); transition: transform var(--transition); } /* Donde no hay foto del plato va el logo: se muestra completo y con aire, no recortado como una foto. */ .menu-item__img--logo { object-fit: contain; padding: 0.5rem; border: 1px dashed var(--color-border); } /* Crece centrada, sin diagonal: el aro punteado la enmarca. */ .menu-item:hover .menu-item__img { transform: scale(1.08); } .menu-item__name { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.01em; transition: color var(--transition); } .menu-item:hover .menu-item__name { color: var(--color-brand); } .menu-item__desc { margin-top: var(--space-2xs); font-size: var(--fs-sm); color: var(--color-text-muted); } /* --- 14.3 Nota final --- */ .menu__note { margin-top: var(--space-2xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-border); text-align: center; } .menu__note p { margin-bottom: var(--space-md); color: var(--color-text-muted); } /* --- 14.4 Responsive --- */ @media (max-width: 575px) { .menu__tabs { gap: var(--space-2xs); } .menu__tab { font-size: var(--fs-sm); padding-inline: var(--space-sm); } .menu__tab + .menu__tab::before { display: none; } .menu-item__img { width: 4.5rem; height: 4.5rem; } .menu-item::before { width: 5.4rem; height: 5.4rem; } } @media (prefers-reduced-motion: reduce) { .menu-item::before { animation: none; } } /* ========================================================================== 15. GOOGLE REVIEWS ========================================================================== */ .reviews { position: relative; overflow-x: clip; color: var(--color-on-dark); padding-block: clamp(2.5rem, 6vw, 4.5rem); background: var(--color-dark) url("../images/bg-texture-dark.jpg") center / cover no-repeat; background-image: image-set( url("../images/bg-texture-dark.webp") type("image/webp"), url("../images/bg-texture-dark.jpg") type("image/jpeg") ); } .reviews__eyebrow { color: var(--color-accent); } .reviews__title { max-width: 22ch; margin-inline: auto; } /* Contenedor del widget: el código de Google entra aquí. */ .reviews__embed { margin-top: var(--space-2xl); } /* Marcador provisional. Se borra al pegar el widget. */ .reviews__placeholder { display: grid; place-content: center; gap: var(--space-xs); min-height: clamp(14rem, 26vw, 20rem); padding: var(--space-xl); border: 2px dashed rgba(255, 255, 255, 0.22); border-radius: var(--radius-md); text-align: center; font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.55); } .reviews__placeholder span { font-family: var(--font-heading); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.8); } /* ========================================================================== 16. MAPA ========================================================================== */ .map { position: relative; line-height: 0; /* mata el hueco bajo el iframe (es inline) */ background-color: var(--color-bg-alt); } /* El alto manda: un mapa con aspect-ratio fijo se vuelve inusable en pantallas angostas. */ .map__frame { display: block; width: 100%; height: clamp(17rem, 42vw, 28rem); border: 0; filter: grayscale(0.15); } /* ========================================================================== 17. PANTALLA DE CARGA ========================================================================== */ /* Sin JS no se muestra nunca: nadie se queda encerrado detrás de ella. */ .preloader { display: none; } .js .preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: var(--space-lg); background-color: var(--color-brand); color: #fff; text-align: center; transition: opacity 0.5s ease, visibility 0.5s ease; /* Red de seguridad: si el evento load nunca llega, a los 8 s se va sola. */ animation: preloader-failsafe 0.01s linear 8s forwards; } @keyframes preloader-failsafe { to { opacity: 0; visibility: hidden; } } .js .preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Mientras carga, el fondo no se desplaza. */ .js.is-loading body { overflow: hidden; } .preloader__inner { display: grid; justify-items: center; gap: var(--space-md); width: min(100%, 26rem); } .preloader__logo { width: clamp(7rem, 22vw, 10rem); height: auto; animation: preloader-bob 1.6s ease-in-out infinite; } @keyframes preloader-bob { 50% { transform: translateY(-10px); } } .preloader__title { font-family: var(--font-heading); font-size: clamp(1.5rem, 1rem + 2.4vw, 2.5rem); line-height: 1.1; text-transform: uppercase; letter-spacing: 0.02em; } /* Barra de progreso indeterminada: no sabemos cuánto falta, así que el relleno recorre la barra en lugar de fingir un porcentaje. */ .preloader__bar { position: relative; width: min(100%, 16rem); height: 6px; overflow: hidden; border-radius: var(--radius-full); background-color: rgba(0, 0, 0, 0.22); } .preloader__fill { position: absolute; inset-block: 0; left: 0; width: 40%; border-radius: var(--radius-full); background-color: #fff; animation: preloader-slide 1.2s ease-in-out infinite; } @keyframes preloader-slide { 0% { left: -40%; } 100% { left: 100%; } } .preloader__sub { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.85); text-wrap: balance; } @media (prefers-reduced-motion: reduce) { .preloader__logo { animation: none; } /* La barra sigue moviéndose: es el indicador de que algo pasa, pero más lenta y sin rebote. */ .preloader__fill { animation-duration: 2.4s; animation-timing-function: linear; } } /* ========================================================================== 18. BOTÓN FLOTANTE (acciones rápidas) ========================================================================== */ /* Sin JS no se despliega, así que ni se muestra: un botón que no hace nada estorba más de lo que ayuda. */ .fab { display: none; } .js .fab { position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); /* Encima de todo salvo la pantalla de carga. */ z-index: 1000; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-sm); } /* --- Botón principal --- */ .fab__toggle { display: flex; align-items: center; gap: var(--space-xs); padding: 0.5rem 1.25rem 0.5rem 0.5rem; background-color: var(--color-brand); color: #fff; border-radius: var(--radius-full); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32); transition: background-color var(--transition), transform var(--transition); } .fab__toggle:hover { background-color: var(--color-brand-dark); transform: translateY(-2px); } .fab__logo { width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: #fff; padding: 2px; } .fab__label { font-family: var(--font-heading); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; } /* --- Acciones --- */ .fab__actions { display: grid; justify-items: end; gap: var(--space-xs); /* Cerrado por defecto. */ opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--transition), transform var(--transition), visibility var(--transition); } .fab__actions.is-open { opacity: 1; visibility: visible; transform: translateY(0); } /* Entran escalonadas, la de abajo primero. */ .fab__actions.is-open li:nth-child(1) { transition-delay: 0.12s; } .fab__actions.is-open li:nth-child(2) { transition-delay: 0.06s; } .fab__actions li { opacity: 0; transform: translateY(8px); transition: opacity var(--transition), transform var(--transition); } .fab__actions.is-open li { opacity: 1; transform: translateY(0); } .fab__action { display: flex; align-items: center; gap: var(--space-xs); padding: 0.5rem 0.9rem; background-color: var(--color-bg); color: var(--color-text); border-radius: var(--radius-full); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transition: background-color var(--transition), color var(--transition), transform var(--transition); } .fab__action:hover { background-color: var(--color-brand); color: #fff; transform: translateX(-4px); } .fab__icon { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 50%; background-color: var(--color-brand); color: #fff; transition: background-color var(--transition), color var(--transition); } .fab__action:hover .fab__icon { background-color: #fff; color: var(--color-brand); } .fab__icon svg { width: 1.05rem; height: 1.05rem; } @media (max-width: 575px) { .fab__toggle { padding-right: 1rem; } .fab__logo { width: 2rem; height: 2rem; } .fab__action { font-size: var(--fs-xs); } } /* ========================================================================== 19. FOOTER ========================================================================== */ .footer { overflow-x: clip; color: var(--color-on-dark); padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--color-dark) url("../images/bg-texture-dark.jpg") center / cover no-repeat; background-image: image-set( url("../images/bg-texture-dark.webp") type("image/webp"), url("../images/bg-texture-dark.jpg") type("image/jpeg") ); } .footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: clamp(2rem, 5vw, 3rem); text-align: center; } .footer__title { margin-bottom: var(--space-md); font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); } .footer__col p, .footer__address { font-style: normal; line-height: 1.8; color: var(--color-on-dark-mut); } .footer__address a { display: block; transition: color var(--transition); } .footer__address a:hover { color: var(--color-accent); } .footer__phone { margin-top: var(--space-xs); font-family: var(--font-heading); font-size: var(--fs-md); letter-spacing: 0.04em; color: var(--color-on-dark); } .footer__muted { margin-top: var(--space-2xs); font-size: var(--fs-sm); opacity: 0.65; } /* --- Redes --- */ .footer__social { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); } .footer__tile { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-sm); background-color: rgba(255, 255, 255, 0.08); border: 1px solid var(--color-nav-line); transition: background-color var(--transition), transform var(--transition); } .footer__tile:hover { background-color: var(--color-brand); transform: translateY(-3px); } .footer__tile svg { width: 1.125rem; height: 1.125rem; } /* Yelp va con su nombre: prefiero texto legible antes que un logo aproximado que no sería el suyo. */ .footer__tile--text { font-family: var(--font-heading); font-size: var(--fs-xs); letter-spacing: 0.04em; } /* --- Logo, crédito y legal --- */ .footer__brand { display: block; width: fit-content; margin: clamp(2rem, 5vw, 3rem) auto 0; } .footer__brand img { width: clamp(5.5rem, 12vw, 7rem); height: auto; transition: transform var(--transition); } .footer__brand:hover img { transform: scale(1.05); } .footer__credit, .footer__legal { text-align: center; } .footer__credit { margin-top: var(--space-lg); font-size: var(--fs-sm); color: var(--color-on-dark-mut); } .footer__credit a { font-weight: 600; color: var(--color-accent); border-bottom: 1px solid transparent; transition: border-color var(--transition); } .footer__credit a:hover { border-bottom-color: var(--color-accent); } .footer__legal { margin-top: var(--space-sm); padding-top: var(--space-md); border-top: 1px solid var(--color-nav-line); font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.5); } /* En móvil el botón flotante se planta sobre la esquina: el pie necesita ese espacio libre para que no tape la última línea. */ @media (max-width: 767px) { .footer { padding-bottom: 6rem; } }