/* ---------- Splide 4.1.4 (splide-core.min.css, incorporado) ---------- Venia de un CDN externo y bloqueaba el render contra otro origen. */ @keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0} /* ========================================================================== HACIENDA DE PIEDRA — Asador Mexicano Ji Group · 2026 Sistema tipográfico fluido calcado de amritpalace.com (body = 1vw, todo en em) Paleta y tipografías: Manual de Identidad HP (dic 2025) ========================================================================== */ /* ---------- Tipografías de marca (self-hosted, subset latino) ---------- */ @font-face{font-family:'Satoshi';src:url('../fonts/satoshi-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('../fonts/satoshi-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Satoshi';src:url('../fonts/satoshi-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'LT Museum';src:url('../fonts/museum-light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:'LT Museum';src:url('../fonts/museum-light-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap} /* ---------- Tokens ---------- Los 4 colores del manual + el hueso que el manual usa pero no documenta. REGLA DURA: --piel sobre --carbon da 2.7:1 → prohibido para texto. Piel es color de fondo de botón, con --hueso encima (5.7:1). */ :root{ --alto-header:4.7em; /* alto del header compacto: la nav del menú se pega debajo */ --carbon:#1B1B1B; --piel:#825636; --vino:#34171B; --beige:#B69A81; --hueso:#F7F2ED; --piel-claro:#C79463; /* Piel legible sobre fondo oscuro (6.4:1) */ --gutter:28px; /* padding lateral, fijo — no escala */ --ease:cubic-bezier(.25,.46,.45,.94); } @media (max-width:991px){ :root{ --gutter:20px; --alto-header:7.4em } } @media (max-width:767px){ :root{ --gutter:16px; --alto-header:9.6em } } /* ---------- Base ---------- La clave del sistema: body en 1vw exacto. Todo lo demás en em, así que el diseño entero escala con el ancho de la ventana. */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; font-size:1vw; font-family:'LT Museum',Georgia,serif; font-weight:300; background:var(--carbon); color:var(--hueso); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--carbon);outline-offset:2px;box-shadow:0 0 0 4px var(--piel-claro);outline-offset:3px} /* ---------- Tipografía (jerarquía exacta del manual) ---------- Titulares: Satoshi Bold en MAYÚSCULAS Sublines: Satoshi Medium, altas y bajas, alineado a la izquierda Copy: LT Museum Light Anotación: LT Museum Light Italic */ .h-display{ font-family:'Satoshi',system-ui,sans-serif;font-weight:700; text-transform:uppercase;font-size:5.6em;line-height:.98;letter-spacing:-.03em; margin:0;color:var(--hueso); } .h-section{ font-family:'Satoshi',system-ui,sans-serif;font-weight:700; text-transform:uppercase;font-size:2.6em;line-height:1.05;letter-spacing:-.02em;margin:0; } .subline{ font-family:'Satoshi',system-ui,sans-serif;font-weight:500; font-size:1.7em;line-height:1.25;letter-spacing:-.015em;text-align:left; color:var(--piel-claro);margin:0 0 .6em; } .eyebrow{ font-family:'Satoshi',system-ui,sans-serif;font-weight:500; font-size:.85em;text-transform:uppercase;letter-spacing:.34em; color:var(--beige);margin:0; } .copy{font-size:1.05em;line-height:1.6;color:var(--beige);margin:0 0 1em;max-width:46em} .hero .copy{ font-size:.9em;line-height:1.4;color:var(--hueso);max-width:30em;margin:0; text-shadow:0 1px 3px rgba(27,27,27,.9),0 2px 18px rgba(27,27,27,.75); } .anotacion{font-style:italic;font-size:1em;color:var(--piel-claro)} @media (max-width:991px){ .h-display{font-size:8em} .h-section{font-size:3.4em} .subline{font-size:2.4em} .eyebrow{font-size:1.2em} .copy{font-size:1.5em} } @media (max-width:767px){ .h-display{font-size:11em} .h-section{font-size:4.6em} .subline{font-size:3.2em} .eyebrow{font-size:1.7em} .copy{font-size:2em} } @media (max-width:479px){ .h-display{font-size:16em} .h-section{font-size:6.4em} .subline{font-size:4.4em} .eyebrow{font-size:2.4em} .copy{font-size:2.9em} } /* una palabra del titular en la tipografía secundaria: el serif del manual contra el sans, para que el titular tenga un acento */ .h-section .alt,.h-sub .alt{ font-family:'LT Museum',Georgia,serif;font-weight:300;font-style:normal; font-size:1.12em;letter-spacing:-.005em; } .h-display .alt{ font-family:'LT Museum',Georgia,serif;font-weight:300; font-size:1.08em;letter-spacing:-.005em; } /* ---------- Header ---------- */ /* ---------- Header ---------- Se compacta de forma continua: --compacto va de 0 a 1 en los primeros 180 px de scroll y todas las medidas interpolan con esa variable. Antes era un salto seco al cruzar el hero y se notaba muchísimo. */ .header{ --compacto:0; position:fixed;top:0;left:0;right:0;z-index:100; display:flex;align-items:center;justify-content:space-between; padding:calc(1.05em - (.43em * var(--compacto))) var(--gutter); border-bottom:1px solid rgba(182,154,129,calc(.15 * var(--compacto))); } /* El fondo y el desenfoque van en un pseudo-elemento, NO en el header. Un backdrop-filter (aunque sea blur(0px)) convierte al elemento en bloque contenedor de sus hijos position:fixed, y eso dejaba al menú móvil anclado al header en vez de a la ventana: no se abría. */ .header::before{ content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-color:rgba(27,27,27,calc(.72 * var(--compacto))); -webkit-backdrop-filter:blur(calc(7px * var(--compacto))); backdrop-filter:blur(calc(7px * var(--compacto))); } .header__logo img{width:4.3em} .header__logo img{width:calc(6.4em - (1.3em * var(--compacto)));height:auto;display:block} .nav{display:flex;gap:2.2em;align-items:center} /* en escritorio el nav es una fila dentro del header: el sello y el bloque de redes pertenecen solo al overlay de teléfono */ .nav__sello,.nav__pie{display:none} .nav__enlaces{display:contents} .nav a{ font-family:'Satoshi',sans-serif;font-weight:500;font-size:1em; letter-spacing:.02em;color:var(--hueso);opacity:.85;transition:opacity .4s,color .4s; } .nav a:hover{opacity:1;color:var(--piel-claro)} .header__acciones{display:flex;gap:.8em;align-items:center} /* ---------- Botones ---------- Un solo criterio en todo el sitio: contorno y texto, sin relleno, con la última palabra en la tipografía secundaria y en itálica. Sobre fondo oscuro van en hueso; sobre fondo claro, en carbón. Al pasar el cursor se rellenan y el texto invierte. */ .btn{ display:inline-block;border:1px solid var(--hueso);border-radius:3px;padding:2px; background:transparent; /* un botón no debe comportarse como texto: sin selección, sin retardo de 300 ms al tocar, y con el cursor correcto */ cursor:pointer;-webkit-user-select:none;user-select:none; touch-action:manipulation;-webkit-tap-highlight-color:transparent; transition:border-color .45s var(--ease),background-color .45s var(--ease); } .btn__box{ display:block;background:transparent;border-radius:2px;padding:.62em 2.3em; /* el span es solo la caja visual: el clic pertenece al enlace */ pointer-events:none;-webkit-user-select:none;user-select:none; font-family:'Satoshi',sans-serif;font-weight:500;font-size:.9em;letter-spacing:.02em; color:var(--hueso);white-space:nowrap; transition:background-color .45s var(--ease),color .45s var(--ease); } .btn:hover{border-color:var(--hueso)} .btn:hover .btn__box{background-color:var(--hueso);color:var(--carbon)} /* la palabra final, en la secundaria e itálica */ .btn__alt{ font-family:'LT Museum',Georgia,serif;font-weight:300;font-style:italic; font-size:1.1em;letter-spacing:0; /* la cursiva de LT Museum arranca muy pegada a la izquierda y el espacio anterior se comía: "Reservar mesa" se leía como una sola palabra */ margin-left:.16em; } /* sobre fondo claro se invierte */ .seccion--claro .btn,.bebidas .btn,.eventos .btn,.testimonios .btn,.intro_ev .btn,.galeria_ev .btn, .pagina-menu main .btn{border-color:var(--carbon)} .seccion--claro .btn__box,.bebidas .btn__box,.eventos .btn__box,.testimonios .btn__box,.intro_ev .btn__box,.galeria_ev .btn__box, .pagina-menu main .btn__box{color:var(--carbon)} .seccion--claro .btn:hover,.bebidas .btn:hover,.eventos .btn:hover,.testimonios .btn:hover,.intro_ev .btn:hover,.galeria_ev .btn:hover, .pagina-menu main .btn:hover{border-color:var(--carbon)} .seccion--claro .btn:hover .btn__box,.bebidas .btn:hover .btn__box,.intro_ev .btn:hover .btn__box,.galeria_ev .btn:hover .btn__box, .eventos .btn:hover .btn__box,.testimonios .btn:hover .btn__box, .pagina-menu main .btn:hover .btn__box{background-color:var(--carbon);color:var(--hueso)} /* dentro del bloque vino el fondo es oscuro: vuelven a hueso */ .bloque_color .btn{border-color:var(--hueso)} .bloque_color .btn__box{color:var(--hueso)} .bloque_color .btn:hover .btn__box{background-color:var(--hueso);color:var(--carbon)} .hamburguesa{display:none;background:none;border:0;padding:.6em;cursor:pointer} .hamburguesa span{display:block;width:2.4em;height:2px;background:var(--hueso);margin:.42em 0;transition:transform .4s,opacity .4s} @media (max-width:991px){ .nav{ /* el header lleva backdrop-filter y eso lo vuelve bloque contenedor de sus hijos position:fixed: con inset:0 el overlay se medía contra el header (276px) y cortaba los últimos enlaces. Se fija a la ventana a mano. */ position:fixed;top:0;left:0;right:auto;bottom:auto; width:100vw;height:100svh; background:var(--carbon);flex-direction:column; /* entra deslizándose desde la derecha, no cayendo desde arriba */ justify-content:space-between;align-items:stretch;gap:2.4em;transform:translateX(100%); /* cerrado no debe ser alcanzable con teclado ni anunciarse */ visibility:hidden; transition:transform .5s cubic-bezier(.4,0,.2,1),visibility 0s linear .5s; } .nav.abierto{transform:translateX(0);visibility:visible; transition:transform .55s cubic-bezier(.22,1,.36,1),visibility 0s} .nav__enlaces a{font-size:4.6em;letter-spacing:-.02em} /* --- overlay del menú: sello arriba, enlaces al centro, redes al pie. Los enlaces entran escalonados con su propio retraso (--d). --- */ .nav__sello{ width:9em;height:auto;display:block;margin:0; /* vuelve a mostrarse: en escritorio está oculto */ opacity:0;transform:translateX(26px) scale(.96); transition:opacity .6s var(--ease) .05s,transform .6s var(--ease) .05s; } /* bloque compacto, como en la referencia: los enlaces se leen juntos */ .nav__enlaces{display:flex !important;flex-direction:column;align-items:flex-start;gap:0} .nav__enlaces a{line-height:1.08;padding:.12em 0} .nav__pie{display:flex !important;flex-direction:column;align-items:stretch;gap:1.2em} /* el botón heredaba padding lateral y el resalte se quedaba corto */ .nav__cta{margin-top:0;padding:2px} .nav__cta .btn__box{font-size:max(14px,1.6em);padding:.95em 1em;min-height:48px; display:flex;align-items:center;justify-content:center;gap:.32em; width:100%;white-space:normal} .nav__redes a{font-size:max(13px,1.5em)} .nav__redes{display:flex;align-items:center;justify-content:flex-start;gap:2.4em;margin-top:.6em} .nav__redes a{font-family:'Satoshi',sans-serif} .nav__redes a{letter-spacing:.06em;opacity:.85} .nav a{ cursor:pointer;-webkit-user-select:none;user-select:none; touch-action:manipulation;-webkit-tap-highlight-color:transparent; opacity:0;transform:translateX(26px); transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s), background-color .3s var(--ease),color .3s var(--ease); } .nav.abierto .nav__sello{opacity:1;transform:none} .nav.abierto a{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .nav__sello,.nav a{transition:none;opacity:1;transform:none} } .hamburguesa{display:block;z-index:101} /* 'Reservar mesa' aguanta hasta 767: en tablet todavía cabe */ .header__logo img{width:13em} } /* Los dos botones del header van iguales: contorno y texto en blanco, con la última palabra en la tipografía secundaria, en itálica —el mismo contraste sans/serif del titular del hero. */ .header__acciones .btn{border-color:var(--hueso);background:transparent} .header__acciones .btn__box{background:transparent;color:var(--hueso)} .header__acciones .btn:hover{border-color:var(--hueso)} .header__acciones .btn:hover .btn__box{background:var(--hueso);color:var(--carbon)} /* ---------- Hero ---------- */ .hero{position:relative;min-height:100svh;display:flex;overflow:hidden} .hero__fondo{position:absolute;inset:0;z-index:1;overflow:hidden} .hero__fondo img,.hero__fondo video{width:100%;height:100%;object-fit:cover} /* ---- Carrusel del hero: cuatro tomas del lugar con zoom lento ---- 4 slides x 7s visibles = 28s de ciclo. Cada uno entra con un fundido y sigue acercándose mientras se ve, para que respire como un video. */ .hero__slide{ position:absolute;inset:0;opacity:0; animation:heroFundido 28s linear infinite; /* delay negativo: la primera entra ya opaca y no se pierde el LCP */ animation-delay:calc(var(--i) * 7s - .84s); animation-delay:calc(var(--i) * 7s - .84s); } .hero__slide picture,.hero__slide img{display:block;width:100%;height:100%} .hero__slide img{ transform-origin:center 55%; animation:heroZoom 28s ease-out infinite; animation-delay:calc(var(--i) * 7s - .84s); } @keyframes heroFundido{ 0% {opacity:0} 3%, 25% {opacity:1} 28%,100%{opacity:0} } @keyframes heroZoom{ 0% {transform:scale(1.005)} 28% {transform:scale(1.085)} 100% {transform:scale(1.085)} } /* el primero ya está a la vista al cargar: nada de parpadeo inicial */ .hero__slide[style*="--i:0"]{opacity:1} .hero__velo{ position:absolute;inset:0;z-index:2; /* negro pleno arriba que se difumina a media altura y vuelve a cerrar abajo: protege el header, deja limpia la franja central de la foto y sostiene el párrafo del pie, que si no cae sobre el pasto y las mesas claras */ background-image:linear-gradient(180deg, #1B1B1B 0%, rgba(27,27,27,.94) 9%, rgba(27,27,27,.72) 20%, rgba(27,27,27,.42) 34%, rgba(27,27,27,.16) 50%, rgba(27,27,27,0) 64%, rgba(27,27,27,.22) 78%, rgba(27,27,27,.58) 92%, rgba(27,27,27,.68) 100%); } .hero__contenido{ position:relative;z-index:3;flex:1;display:flex;flex-direction:column; justify-content:space-between;padding:10em var(--gutter) 20px; } .hero__titular{display:flex;flex-direction:column;align-items:center;margin-top:auto;text-align:center} .hero__titular .h-display{text-shadow:0 2px 26px rgba(27,27,27,.55)} .hero__linea{display:flex;align-items:center;justify-content:center;gap:2.2em;width:100%} .hero__linea .h-display{flex:0 1 auto;white-space:nowrap} .hero__linea .eyebrow{ flex:0 0 auto;max-width:12em;line-height:1.6; font-size:.98em;color:var(--hueso);letter-spacing:.28em; text-shadow:0 1px 10px rgba(27,27,27,.7); } .hero__linea .eyebrow:first-child{text-align:right} .hero__linea .eyebrow:last-child{text-align:left} .hero__titular .h-display{margin:0} .hero__pie{display:flex;justify-content:space-between;align-items:flex-end;gap:2em;margin-top:auto;flex-wrap:wrap} /* tarjeta de reseñas de Google */ .rating{background:var(--hueso);color:var(--carbon);padding:1.4em 1.8em;min-width:16em} @media (max-width:767px){ .hero__contenido{padding:14em var(--gutter) 4em} /* En teléfono las dos leyendas no caben a los lados, pero apiladas quedan DENTRO del titular y cortan la lectura. Se sacan del medio y se juntan debajo, en una sola línea, como firma. */ .hero__linea{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.5em 1.2em} .hero__linea .h-display{order:1;flex:0 0 100%;text-align:center;white-space:normal} .hero__linea .eyebrow{order:2;flex:0 0 auto;text-align:center;max-width:none} .hero__linea .eyebrow:first-child{text-align:center} .hero__linea .eyebrow:last-child{order:3;text-align:center;position:relative} .hero__linea .eyebrow:last-child::before{ content:"·";position:absolute;left:-.75em;opacity:.6;letter-spacing:0; } .hero__pie{flex-direction:column;align-items:stretch} .rating{min-width:0} } /* ---------- Secciones ---------- */ .seccion{padding:3.4em var(--gutter) 2.4em} .seccion--claro{background:var(--hueso);color:var(--carbon)} .seccion--claro .copy{color:#6E5A48} .seccion--claro .subline{color:var(--piel)} .seccion--claro .eyebrow{color:var(--piel)} /* split 45/55 con columna izquierda anclada — patrón de la referencia */ /* la sección que aloja un split NO pone padding lateral: lo aporta la columna, si no el título arranca 28px más adentro que los del resto de la página */ .seccion:has(.split){padding-left:0;padding-right:0} .seccion--split{padding-left:0;padding-right:0} .split{display:flex;align-items:flex-start} .split__izq{flex:0 0 45%;padding:2.4em var(--gutter); /* el header es fixed: si el sticky se ancla en top:0 el titular queda pegado a la nav mientras se hace scroll. Se ancla debajo, con aire. */ position:sticky;top:calc(var(--alto-header) + 1.2em)} .split__der{flex:0 0 55%} /* carta de platillos */ .platillo{display:flex;justify-content:space-between;gap:1.4em;padding:1.1em 0;border-bottom:1px solid rgba(27,27,27,.1)} .platillo__nom{font-family:'Satoshi',sans-serif;font-weight:500;font-size:1.05em} .platillo__desc{font-size:.95em;line-height:1.45;color:#6E5A48;margin-top:.2em;max-width:34em} .platillo__precio{font-family:'Satoshi',sans-serif;font-weight:500;font-size:1.05em;white-space:nowrap;font-variant-numeric:tabular-nums} @media (max-width:991px){ .split{flex-direction:column} .split__izq,.split__der{flex:1 1 auto;width:100%;position:static} .seccion{padding:3em var(--gutter) 2em} } /* ---------- Sección a sangre (horno de piedra) ---------- */ .fullsize{position:relative;min-height:100svh;display:flex;align-items:flex-start;overflow:hidden} .fullsize__fondo{position:absolute;inset:0;z-index:1} .fullsize__fondo img{width:100%;height:100%;object-fit:cover;object-position:center 90%} .fullsize__velo{position:absolute;inset:0;z-index:2; background:linear-gradient(180deg,rgba(27,27,27,.9) 0%,rgba(27,27,27,.62) 34%,rgba(27,27,27,.15) 62%,rgba(27,27,27,.35) 100%)} .fullsize__txt{position:relative;z-index:3;padding:2.9em var(--gutter) 3.4em;width:100%;max-width:56em} .fullsize__txt .copy{color:var(--hueso);max-width:40em;text-shadow:0 1px 12px rgba(27,27,27,.5)} .fullsize__txt .subline{text-shadow:0 1px 12px rgba(27,27,27,.5)} /* el botón de línea hereda width:100%; dentro del fullsize (56em) quedaría desproporcionado, así que se ata al ancho del párrafo */ .fullsize__txt .btn--linea{max-width:23em} /* Buffet: arriba horario, titular y precio; el botón cierra el bloque a todo su ancho y el texto largo pasa debajo. Renglones más separados. */ .fullsize__txt--buffet .eyebrow{margin-bottom:1.1em} .fullsize__txt--buffet .h-section{margin-bottom:.42em} .fullsize__txt--buffet .subline{margin-bottom:0;line-height:1.35} .fullsize__txt--buffet .btn{margin-top:1.7em} .fullsize__txt--buffet .copy{margin-top:1.4em;max-width:44em} /* ---------- Columna derecha de la carta ---------- Como en la referencia: primero un bloque de color con el texto y la llamada a la acción, y debajo la fotografía. */ .bloque_color{ background:var(--vino);color:var(--hueso);padding:3.4em 2.9em; display:flex;align-items:center;justify-content:center;min-height:22em; } .bloque_color__sello{width:min(58%,15em);height:auto;opacity:.92} .bloque_color .copy{color:var(--beige);max-width:34em} .h-sub{ font-family:'Satoshi',system-ui,sans-serif;font-weight:700;text-transform:uppercase; font-size:1.9em;line-height:1.02;letter-spacing:-.025em;margin:0 0 .5em;color:var(--hueso); } .bloque_foto img{width:100%;height:auto;display:block} /* botón sobre fondo claro y sobre fondo vino */ /* botón de ancho completo: cierra el bloque de lista de lado a lado */ .btn--linea{margin-top:1.4em;display:block;width:100%} .btn--linea .btn__box{text-align:left;padding-left:1.6em} @media (max-width:991px){ /* en teléfono estos botones cierran secciones enteras: no deben verse chicos */ .btn--linea .btn__box{font-size:max(14px,1.6em);padding:.9em 1.4em;min-height:48px; display:flex;align-items:center;gap:.32em} } .lista_platillos{margin-bottom:.6em} /* ---------- Banda a pantalla completa (.video_section de la referencia) wrapper flex-column con space-between: texto arriba, botón abajo. El texto va sticky, así se queda quieto mientras pasa la sección. */ .banda{position:relative;height:100vh;width:100%;overflow:hidden;background:var(--hueso)} .banda__fondo{ position:absolute;inset:0;z-index:1; border-radius:10px;overflow:hidden; transform:scale(.93); transform-origin:center center; will-change:transform,border-radius; } .banda.abierta .banda__fondo{transform:scale(1);border-radius:0} .banda__fondo img{width:100%;height:100%;object-fit:cover} /* Fondo de video: los clips se encadenan encima de la fotografía, que queda de respaldo mientras cargan y para quien no tenga JS o pida menos movimiento. El velo va por encima (z-index 2) y el texto sobre todo. */ .banda__clips{position:absolute;inset:0;z-index:1} .banda__clips video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .9s var(--ease); } /* el clip que sale se apaga de golpe, ya tapado por el que entra: si los dos se cruzaran a media opacidad se vería la foto por debajo */ .banda__clips video:not(.visible){transition:none} .banda__clips video.visible{opacity:1} .banda__velo{position:absolute;inset:0;z-index:2;border-radius:inherit; background-image:linear-gradient(180deg,rgba(27,27,27,.78) 0%,rgba(27,27,27,.32) 45%,rgba(27,27,27,.62) 100%)} .banda__wrapper{ position:relative;z-index:15;display:flex;flex-direction:column; justify-content:space-between;align-items:stretch; width:100%;height:100%;padding:var(--gutter); } .banda__contenido{ display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start; position:sticky;top:6.6em; } /* solo escritorio: fijarlo sin más congelaba el titular en 10.9px en teléfono */ @media (min-width:992px){ .banda .h-section{font-size:2.9em} } .banda__contenido .copy{color:var(--hueso);max-width:36em;text-shadow:0 1px 12px rgba(27,27,27,.6)} .banda__accion{display:flex;justify-content:flex-start} @media (max-width:991px){ .banda__wrapper{padding:42px var(--gutter)} .banda__contenido{top:12em} } @media (max-width:767px){ .banda{height:80vh} .banda__wrapper{padding:42px var(--gutter) 32px} } /* la sección del espíritu no ocupa pantalla completa y va centrada */ .fullsize--medio{min-height:100svh;align-items:center;justify-content:center} .fullsize__txt--centro{text-align:center;max-width:56em;margin:0 auto;padding:4.3em var(--gutter)} .fullsize__txt--centro .subline{text-align:center} /* el bloque va centrado: el botón se centra como una pieza, sin estirarse */ .fullsize__txt--centro .btn{margin-left:auto;margin-right:auto} .fullsize__txt--centro .copy{margin-left:auto;margin-right:auto;max-width:34em} /* el bloque va al centro, justo donde la foto es más clara: el velo sube en la franja media o el horario y el precio (beige y piel) se pierden */ .fullsize--medio .fullsize__velo{ background-image:linear-gradient(180deg, rgba(27,27,27,.80) 0%,rgba(27,27,27,.70) 28%, rgba(27,27,27,.68) 50%,rgba(27,27,27,.70) 72%,rgba(27,27,27,.82) 100%); } /* y sobre foto, estos dos van en hueso: el beige y el piel no aguantan */ .fullsize__txt--centro .eyebrow{color:var(--hueso);opacity:.92;text-shadow:0 1px 10px rgba(27,27,27,.75)} .fullsize__txt--centro .subline{color:var(--hueso);text-shadow:0 1px 12px rgba(27,27,27,.7)} @media (max-width:991px){ .bloque_color{padding:3em 2em} .h-sub{font-size:3.4em} } @media (max-width:767px){ .h-sub{font-size:4.6em} } /* ---------- Bebidas (calcado de .drinks) ---------- La columna izquierda se ancla mientras las fotos de la derecha corren. En la referencia: .drinks .left_side { position:sticky; top:0 } y la columna derecha en flex-column con gap de 6px. */ .bebidas{background:var(--hueso);color:var(--carbon)} .bebidas__izq{ display:flex;flex-direction:column;justify-content:space-between; /* con una sola foto a la derecha las dos columnas miden casi lo mismo: anclarla ya no aporta y dejaba el botón fuera de pantalla. */ position:static;padding:3.4em var(--gutter) 2.4em; } .bebidas__intro .copy{color:#6E5A48;max-width:34em} .bebidas__lista{margin-top:3.4em} .bebidas .platillo{border-bottom-color:rgba(27,27,27,.14)} /* al revés que antes: la foto se queda fija y lo que corre es la carta */ .bebidas__der{ display:flex;flex-direction:column;padding:0; position:sticky;top:var(--alto-header);align-self:flex-start; height:calc(100svh - var(--alto-header)); } .bebidas__der picture{display:block;flex:1;min-height:0;overflow:hidden} /* el encuadre baja: arriba asomaba una bocina en la viga */ .bebidas__der img{width:100%;height:100%;object-fit:cover;object-position:center 64%;display:block} @media (max-width:991px){ .bebidas__izq{position:static;min-height:0;padding:5em var(--gutter) 2.2em} .bebidas__der{padding:0;position:static;height:auto} .bebidas__der img{height:auto;object-position:center 60%} } /* ---------- Eventos (calcado de .catering) ---------- Fondo beige, titular en rejilla .75fr 1.7fr .75fr como la referencia (ojo: aquí usan grid, no flex como en el hero) y carrusel de 3. */ .eventos{background:var(--beige);color:var(--carbon);width:100%;overflow:hidden;padding:52px 0 42px} .eventos__cabeza{padding:0 var(--gutter) 2.9em;text-align:center} .eventos__t1{text-align:center} /* el titular de eventos toma la escala general de .h-section: fijarlo aquí valía lo mismo en escritorio, pero le impedía crecer en teléfono */ .eventos__rejilla{ display:grid;grid-template-columns:.75fr 1.7fr .75fr;align-items:center;gap:1.2em; } .eventos__rejilla .eyebrow{color:var(--carbon);opacity:.85;font-size:.9em} .eventos__rejilla .eyebrow:first-child{text-align:right} .eventos__rejilla .eyebrow:last-child{text-align:left} .eventos__rejilla .h-section{text-align:center} .eventos__copy{ width:46ch;max-width:100%;margin:1.6em auto 0;text-align:center; font-size:.9em;line-height:1.5;color:var(--carbon); } .eventos__slider{padding:0 var(--gutter)} /* cierre de la sección: el botón cruza de lado a lado, como el del buffet */ .eventos__cierre{padding:2.6em var(--gutter) 0} .eventos__cierre .btn--linea{max-width:34em;margin-left:auto;margin-right:auto} .col_evento{display:flex;flex-direction:column;height:100%} .col_evento__img{width:100%;height:35em;overflow:hidden;border-radius:3px} .col_evento__img img{width:100%;height:100%;object-fit:cover;display:block} .col_evento__txt{padding:1.4em .6em 0;text-align:center} .col_evento__tit{ font-family:'LT Museum',Georgia,serif;font-weight:300;font-size:1.5em; letter-spacing:-.035em;color:var(--carbon);margin:0 0 .35em; } .col_evento__desc{ width:46ch;max-width:100%;margin:0 auto;text-align:center; font-size:.9em;line-height:1.3;color:var(--carbon);opacity:.85; } .splide__slide{height:auto} /* respaldo local: estas tres reglas solo viven en el CSS del CDN y sin ellas el carrusel se derrama o deja los slides inalcanzables */ .splide__track{position:relative;z-index:0;overflow:hidden} .splide__list{display:flex;margin:0;padding:0;list-style:none;backface-visibility:hidden} .splide__slide{flex-shrink:0;box-sizing:border-box;position:relative} .splide:not(.is-initialized) .splide__track{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .splide:not(.is-initialized) .splide__slide{scroll-snap-align:start;width:78%} @media (max-width:991px){ .eventos{padding:72px 0 32px} .col_evento__img{height:44em} .col_evento__txt{padding:20px 12px 0} .col_evento__tit{margin:0 0 10px} .eventos__copy,.col_evento__desc{font-size:1.5em} .col_evento__tit{font-size:2.15em} } @media (max-width:767px){ /* mismo criterio que el titular del hero: en teléfono las dos leyendas no caben a los lados y apiladas cortan la lectura del titular, así que se bajan juntas a una sola línea, como firma. */ .eventos__rejilla{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em 1.2em} .eventos__rejilla .h-section{order:1;flex:0 0 100%;text-align:center} .eventos__rejilla .eyebrow{order:2;flex:0 0 auto;text-align:center;max-width:none} .eventos__rejilla .eyebrow:first-child{text-align:center} .eventos__rejilla .eyebrow:last-child{order:3;text-align:center;position:relative} .eventos__rejilla .eyebrow:last-child::before{ content:"\00b7";position:absolute;left:-.75em;opacity:.6;letter-spacing:0; } .eventos__cierre .btn--linea{max-width:none} .col_evento__img{height:72em} .eventos__copy,.col_evento__desc{font-size:2em} .col_evento__tit{font-size:3.15em} } /* ---------- Testimonios ---------- Estructura calcada de la referencia: sección de fondo claro, tarjeta con estrellas + plataforma arriba, la cita en grande, autor al pie. La cita va en LT Museum a 1.8em: el texto largo es su terreno. */ .testimonios{background:var(--hueso);color:var(--carbon);padding:3.4em 0 4.3em;overflow:hidden} .testimonios__cabeza{ display:flex;justify-content:space-between;align-items:flex-end;gap:2.4em; flex-wrap:wrap;padding:0 var(--gutter) 2.9em; } .testimonios__cabeza .eyebrow{color:var(--piel)} @keyframes marquee{to{transform:translateX(-50%)}} .marquee{display:flex;align-items:center;width:100%;position:relative;overflow:hidden} .marquee__track{display:flex;flex:none;align-items:stretch;width:max-content;padding:.9em 0;animation:marquee 34s linear infinite} /* se detiene al pasar el cursor o al entrar con teclado: movimiento automatico de mas de 5s necesita forma de pararlo */ .marquee:hover .marquee__track, .marquee:focus-within .marquee__track{animation-play-state:paused} @media (max-width:991px){ } @media (max-width:767px){ } @media (max-width:479px){ } /* ---------- Footer ---------- */ .footer{background:var(--carbon);color:var(--hueso);padding:5.2em var(--gutter) 2.4em} /* datos: cuatro columnas, todo en la tipografía de titulares y a una sola medida */ .footer__grid{ /* cada columna mide lo que mide su renglón más largo (medido: horarios 236px, contacto 199, ubicación 175, legal 148, social 61 = 818px) y el sobrante se reparte entre los huecos. Repartir en fr le daba a horarios 214px y por eso brincaba de renglón en ventanas chicas. */ display:grid;grid-template-columns:repeat(5,auto);justify-content:space-between; gap:24px;max-width:1500px;margin:0 auto; } .footer__col{display:flex;flex-direction:column;align-items:flex-start;gap:.35em} .footer__col p{text-wrap:pretty} .footer__tit{ /* px fijos, no em: el pie son datos, no necesita escalar con la ventana, y en em el mismo texto medía distinto en cada pantalla */ font-family:'Satoshi',sans-serif;font-weight:500;font-size:12px; text-transform:uppercase;letter-spacing:.22em;color:var(--piel-claro); margin:0 0 .9em; } .footer__col p,.footer__col a{ /* cada renglón de horario o dirección es una unidad y no se parte */ white-space:nowrap; font-family:'Satoshi',sans-serif;font-weight:400;font-size:14px;line-height:1.75; color:var(--hueso);opacity:.82;margin:0; } .footer__col a{transition:opacity .3s var(--ease)} .footer__col a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} /* el logo completo cruza de lado a lado */ /* a ancho completo el logo mide 1097px de alto y deja el resto diminuto: se le pone tope y respira */ .footer__marca{max-width:76em;margin:4.3em auto 3.4em} .footer__marca picture{display:block;width:100%} .footer__marca img{width:100%;height:auto;display:block;opacity:.92} /* pie legal en tres bloques */ .footer__legal{ max-width:104em;margin:0 auto;padding-top:1.8em; border-top:1px solid rgba(182,154,129,.22); /* tres renglones: razón social, derechos y, al final, el crédito a la derecha */ display:flex;flex-direction:column;gap:.55em; } .footer__legal p{ font-family:'Satoshi',sans-serif;font-weight:400;font-size:13px; letter-spacing:.02em;line-height:1.5; color:var(--hueso);opacity:.72;margin:0; } .footer__credito{margin-top:1.2em !important;text-align:right} .footer__corazon{color:#D64545;font-style:normal;font-size:14px;line-height:1} /* los enlaces que viven DENTRO de un párrafo heredan su medida: si se les da un em propio, se multiplica sobre el del padre y salen más grandes */ .footer__legal p a,.footer__legal p span{font-size:inherit;letter-spacing:inherit} .footer__legal a{transition:opacity .3s var(--ease)} .footer__legal a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px} /* el crédito va en negritas, sin subrayado */ .footer__credito a{opacity:1;font-weight:700;text-decoration:none} .footer__credito a:hover{text-decoration:underline;text-underline-offset:3px} @media (max-width:991px){ .footer{padding:6em var(--gutter) 3em} .footer__grid{grid-template-columns:1fr 1fr;gap:2.6em 2.4em} .footer__col:last-child{grid-column:1 / -1} .footer__tit{font-size:12px;margin-bottom:.6em} /* el interlineado suelto y los 44px de cada enlace dejaban el pie muy aireado: el área táctil se conserva con padding, sin separar tanto los renglones */ .footer__col{gap:0} /* 14px, no 15: a 15 el renglón de domingo mide 283px y la columna a 320px de pantalla da 288. Con font-display:swap el texto se pinta primero con la fuente del sistema, más ancha, brincaba de renglón y se reacomodaba al cargar Satoshi. Con nowrap el renglón no se parte nunca. */ .footer__col p,.footer__col a{font-size:14px;line-height:1.6;white-space:nowrap} /* los 44px de área táctil por enlace dejaban teléfono, WhatsApp y correo muy separados entre sí. Se compactan al mismo ritmo que los renglones de horario y dirección; siguen siendo cómodos de tocar. */ .footer__col a{min-height:0;padding:.35em 0;display:block} .footer__marca{margin:4em auto 2.6em} .footer__legal{flex-direction:column;align-items:flex-start;gap:.5em} .footer__legal p,.footer__links a{font-size:13px;line-height:1.45} .footer__legal p a,.footer__legal p span{font-size:inherit} } @media (max-width:767px){ /* una sola columna: cada dato en su renglón */ .footer__grid{grid-template-columns:1fr;gap:2.4em} } /* ---------- Entradas al scroll ---------- El estado inicial vive en CSS para que no haya parpadeo, y la transición también: el JS solo añade .visto cuando el elemento entra en pantalla. Si el JS nunca corre, .js-anim no se aplica y todo se ve normal. */ .js-anim .anim-titulo{ opacity:0;filter:blur(14px);transform:translateY(14px); transition:opacity 1s var(--ease),filter 1s var(--ease),transform 1s var(--ease); } .js-anim .anim-texto{ opacity:0; transition:opacity .9s var(--ease); } .js-anim .anim-titulo.visto{opacity:1;filter:blur(0);transform:none} .js-anim .anim-texto.visto{opacity:1} @media (prefers-reduced-motion:reduce){ .js-anim .anim-titulo,.js-anim .anim-texto{ opacity:1!important;filter:none!important;transform:none!important;transition:none!important; } .hero__slide{animation:none;opacity:0} .hero__slide[style*="--i:0"]{opacity:1} .hero__slide img{animation:none;transform:none} .marquee__track{animation:none} *{transition-duration:.01ms!important;animation-duration:.01ms!important} } /* ---------- Utilidades ---------- */ .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} /* Paginación de los carruseles: se activa en teléfono para que las tarjetas que quedan fuera de vista sigan siendo alcanzables con teclado y lector de pantalla, pero no se dibuja —los puntitos ensuciaban el diseño y quedaban pegados al texto. Al enfocarla con Tab sí aparece. */ .slider_eventos .splide__pagination{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;margin:-1px;padding:0; } .slider_eventos .splide__pagination:focus-within{ position:static;width:auto;height:auto;overflow:visible;clip:auto; margin:1.4em 0 0;padding:0;gap:.6em; } .slider_eventos .splide__pagination__page{ width:8px;height:8px;border:0;border-radius:50%;padding:0;margin:0 4px; background:var(--piel);opacity:.35;cursor:pointer; } .slider_eventos .splide__pagination__page.is-active{opacity:1;transform:scale(1.25)} /* ========================================================================== AJUSTES MÓVIL — calcados de amritpalace.com medido en 375 / 390 / 430 -------------------------------------------------------------------------- El sistema no cambia: body sigue en 1vw y todo sigue en em. Aquí sólo suben los multiplicadores y se reparan los selectores compuestos (.hero .copy, .btn__box, .footer__grid p, .platillo__nom…) que por especificidad se saltaban los breakpoints y quedaban en 3–4 px reales. Los pisos max(15px, …em) garantizan legibilidad en cualquier ancho sin romper la escala fluida: por encima del piso manda el em de siempre. Multiplicadores de referencia (Amrit, banda ≤479): h1 16em · h2 10em · h3 9em · card 5.25em · copy 3.6em · label 3.5em ========================================================================== */ @media (max-width:991px){ /* --- sticky fuera: en pantalla corta atrapa el contenido --- */ .split__izq,.split__der, .bebidas__izq,.bebidas__der, .banda__contenido{position:static;top:auto} /* --- titulares: que nunca desborden --- */ .h-display,.h-section,.h-sub,.subline{text-wrap:balance;overflow-wrap:break-word} .hero__linea .h-display{white-space:normal} /* --- alturas: svh en vez de vh, la barra del navegador no recorta --- */ .banda{height:100svh} /* el header móvil mide ~80 px: el titular de la banda tiene que librarlo */ .banda__wrapper{padding-top:96px} /* --- hamburguesa: 44x44 reales --- */ .hamburguesa{ display:flex;flex-direction:column;justify-content:center;align-items:flex-end; min-width:44px;min-height:44px;padding:0;margin-left:12px; font-size:1em; /* el