/* ─────────────────────────────────────────────────────────────────────────── miski.css — identidad de Miski Mikuy encima de base.css. Paleta primaria = la del logo oficial (carmín, azul rótulo, blanco). Paleta de soporte = la del estudio de marca, sacada del mural del local (noche de selva, crema de maíz, verde otorongo, ámbar jaguar). Tipografía: DM Serif Display para lo destacado, Jost para lo funcional (SPEC §1). base.css sigue mandando en las clases de CONTRATO con la Suite (article.dish, .price, section.menusec, .dgroup…): aquí solo se recolorean. ─────────────────────────────────────────────────────────────────────────── */ :root{ --carmin:#BC1031; --azul:#2E4B9F; --blanco:#FFFFFF; --noche:#0E1413; --noche-2:#101917; --noche-3:#14201E; --crema:#F2EAD9; --crema-suave:#C9C0AC; --piedra:#8E8776; --verde:#314747; --ambar:#D9964A; /* Se pisan las variables de base.css para que las páginas de carta y menú hereden la identidad sin reescribir sus reglas. */ --fondo:var(--noche); --papel:var(--noche-2); --tinta:var(--crema); --suave:var(--crema-suave); --acento:var(--carmin); --oro:var(--ambar); --linea:rgba(242,234,217,.14); --serif:'DM Serif Display',Georgia,serif; --sans:Jost,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --ancho:1160px; } body{font-weight:300;} ::selection{background:var(--carmin);color:var(--crema);} a{color:var(--ambar);} a:hover{color:var(--crema);} /* ── Cargador (RF-M16) ──────────────────────────────────────────────────── */ /* Solo existe con html.cargando (lo pone un script inline en , y solo sin «reducir movimiento»). Fondo = el carmín exacto del sello; el vídeo del logo va recortado a su disco (radio 412/1024 = 40,25 %), así el disco se funde con el fondo y solo se ven la luna y las letras transformándose. */ .cargador{display:none;} html.cargando{overflow:hidden;} html.cargando .cargador,html.cargado .cargador{ display:flex;align-items:center;justify-content:center;position:fixed;inset:0;z-index:100; background:var(--carmin); } /* El disco: envoltorio circular que recorta el vídeo (overflow, no clip-path). El vídeo mide 1/0,788 del disco, porque el disco del logo ocupa el 78,8 % del fotograma (radio 412/1024·2); se recorta medio punto por dentro del borde para que el antialias comprimido (un anillo oscuro) no se vea sobre el rojo. */ .cargador-disco{ width:min(56vmin,440px);aspect-ratio:1;border-radius:50%;overflow:hidden;position:relative; will-change:transform;transform-origin:50% 50%; } .cargador-sello{ position:absolute;width:127.5%;height:127.5%;left:-13.75%;top:-13.75%;display:block;object-fit:contain; } .cargador.cerrando{transition:clip-path .95s cubic-bezier(.65,0,.35,1);will-change:clip-path;} .cargador.cerrando .cargador-disco{transition:transform .95s cubic-bezier(.65,0,.35,1);} .cargador.fuera{opacity:0;transition:opacity .6s ease;pointer-events:none;} /* Mientras el cargador manda, el sello del hero (vídeo con blend, caro de componer) queda oculto: si no, durante la transición del rojo el navegador enseña tiles sin pintar. Se muestra justo antes de retirar el rojo, cuando el disco del cargador ya lo tapa exactamente. */ html.cargando .hero-sello video{visibility:hidden;} /* El texto del hero espera al cargador y entra al retirarse el rojo. */ html.cargando .hero-texto{opacity:0;} /* La entrada del texto la hace GSAP (js/miski.js) al retirarse el cargador. */ .hero-texto h1 .linea{display:block;overflow:hidden;} .hero-texto h1 .linea>span{display:block;} /* ── Música de la casa (RF-M20) ─────────────────────────────────────────── */ /* Botón fijo abajo a la izquierda. Mientras el hero está en pantalla, js/miski.js lo traslada (transform) hasta el hueco de la fila de botones; al hacer scroll vuelve a su esquina. Sin JS o con «reducir movimiento», se queda en la esquina. */ .musica-hueco{display:inline-block;width:48px;height:48px;align-self:center;} .musica{ position:fixed;left:22px;bottom:22px;z-index:60;width:48px;height:48px;border-radius:50%; border:1px solid rgba(242,234,217,.45);background:rgba(14,20,19,.72);backdrop-filter:blur(8px); color:var(--crema);cursor:pointer;display:grid;place-items:center;padding:0; transition:background .3s,border-color .3s,box-shadow .3s;will-change:transform; } .musica:hover{border-color:var(--crema);background:rgba(14,20,19,.9);} .musica:focus-visible{outline:2px solid var(--ambar);outline-offset:3px;} .musica[aria-pressed="true"]{background:var(--carmin);border-color:var(--carmin);box-shadow:0 0 0 6px rgba(188,16,49,.18);} .musica .musica-nota,.musica .musica-ondas{grid-area:1/1;} .musica .musica-ondas{display:none;align-items:flex-end;gap:3px;height:18px;} .musica .musica-ondas i{display:block;width:3px;height:6px;background:var(--crema);border-radius:2px;animation:musicaOnda 1s ease-in-out infinite;} .musica .musica-ondas i:nth-child(2){animation-delay:.15s}.musica .musica-ondas i:nth-child(3){animation-delay:.3s}.musica .musica-ondas i:nth-child(4){animation-delay:.45s} @keyframes musicaOnda{0%,100%{height:5px}50%{height:18px}} .musica[aria-pressed="true"] .musica-nota{display:none;} .musica[aria-pressed="true"] .musica-ondas{display:flex;} .musica-pista{ position:fixed;left:84px;bottom:30px;z-index:60;font-size:12px;letter-spacing:.14em;text-transform:uppercase; color:var(--crema);background:rgba(14,20,19,.82);padding:7px 12px; opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s;pointer-events:none; } .musica-pista.visible{opacity:1;transform:none;} @media (max-width:720px){.musica{bottom:74px;}.musica-pista{bottom:82px;left:80px;}} @media (prefers-reduced-motion:reduce){.musica .musica-ondas i{animation:none;height:10px;}} /* ── Cabecera ───────────────────────────────────────────────────────────── */ header.sitio{ position:fixed;left:0;right:0;top:0;z-index:50; background:rgba(14,20,19,.72);backdrop-filter:blur(10px); border-bottom:1px solid rgba(242,234,217,.1); } header.sitio .envoltorio{height:72px;} header.sitio .logo{ color:var(--crema);font-family:var(--serif);font-weight:400;font-size:21px;line-height:1; } header.sitio .logo img{width:40px;height:40px;} header.sitio .logo em{font-style:italic;} header.sitio nav{gap:clamp(6px,2vw,22px);align-items:center;} header.sitio nav a{ color:var(--crema-suave);font-weight:400;font-size:13px;letter-spacing:.14em; text-transform:uppercase;border-radius:0;padding:8px 6px;text-decoration:none; } header.sitio nav a:hover{color:var(--crema);} header.sitio nav a[aria-current="page"]{background:none;color:var(--crema);} header.sitio nav a.reservar{background:var(--carmin);color:var(--crema);padding:10px 18px;} header.sitio nav a.reservar:hover{filter:brightness(1.12);} /* ── Hero de marca (RF-M01…M04) ─────────────────────────────────────────── */ .hero-marca{ position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden; padding:112px 0 64px;text-align:left; } /* Dos discos tenues detrás del sello, como en el prototipo: dan aire al vídeo sin añadir nada que no sea la propia forma del logo. */ .hero-marca::before,.hero-marca::after{ content:"";position:absolute;top:50%;border-radius:50%;transform:translateY(-50%);pointer-events:none; /* Detrás del contenido con z-index negativo (la sección no crea contexto de apilamiento, así que caen bajo su fondo transparente y sobre el del body). Antes se resolvía con z-index:1 en .envoltorio, pero ese contexto de apilamiento aislaba el mix-blend-mode del sello y el cuadrado del vídeo quedaba 3 niveles más oscuro que el fondo. */ z-index:-1; } /* Sin marca de agua en el hero (la medialuna vive en Destacados). */ .hero-marca::before,.hero-marca::after{display:none;} /* RF-M19: vídeo de fondo. Va a z-index:-2 con un velo de noche encima para que sello y textos sigan leyéndose. */ .hero-fondo{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;} .hero-fondo video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block;filter:blur(1px);transform:scale(1.02);} .hero-fondo .velo{ position:absolute;inset:0; /* Denso bajo los textos (izquierda) y arriba/abajo; los rótulos quemados del vídeo quedan atenuados bajo la tipografía de la web. */ background:linear-gradient(90deg,rgba(14,20,19,.78) 0%,rgba(14,20,19,.55) 45%,rgba(14,20,19,.25) 100%), linear-gradient(180deg,rgba(14,20,19,.55) 0%,rgba(14,20,19,.1) 45%,rgba(14,20,19,.82) 100%); } @media (max-width:720px){.hero-fondo .velo{background:linear-gradient(180deg,rgba(14,20,19,.55),rgba(14,20,19,.72) 55%,rgba(14,20,19,.9));}} /* El hero no usa el ancho máximo de la página: el texto va siempre pegado al borde izquierdo de la ventana con el margen de la casa. */ .hero-marca .envoltorio{ position:relative;width:100%;max-width:none;display:flex;flex-wrap:wrap;align-items:flex-end; justify-content:space-between;gap:clamp(30px,5vw,60px);padding:0 clamp(20px,4vw,56px); } .hero-sello{margin-right:clamp(0px,4vw,80px);} .hero-marca{align-items:stretch;} .hero-texto{align-self:flex-end;} .hero-sello{align-self:center;} .hero-texto{flex:1 1 380px;min-width:0;} .hero-texto .sobre{color:var(--ambar);font-weight:500;letter-spacing:.32em;} .hero-texto h1{ font-family:var(--serif);font-weight:400;margin:18px 0 0; font-size:clamp(52px,8vw,110px);line-height:.98;letter-spacing:-.01em;color:var(--crema); } .hero-texto h1 em{font-style:italic;} .hero-texto p{margin:22px 0 0;max-width:480px;font-size:clamp(16px,1.9vw,19px);line-height:1.55;color:#E4DCC9;} .hero-texto p em{font-family:var(--serif);font-style:italic;color:var(--crema);} .hero-texto p em.quechua{color:#D98A6E;} .hero-texto .botones{justify-content:flex-start;margin-top:30px;} /* El sello: un cuadrado 1:1 cuyo fondo es el mismo de la página, así el vídeo no tiene marco y el logo parece flotar. */ .hero-sello{ flex:0 1 auto;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px; } /* El lienzo ES el disco del sello: recorte circular con overflow (como el disco del cargador), así el cuadrado oscuro del mp4 no existe y el sello funciona sobre cualquier fondo, incluido el vídeo del hero. El vídeo mide 1/0,788 del disco (radio 412/1024·2 = 78,8 % del fotograma) y se recorta medio punto por dentro. */ .hero-sello .lienzo{ position:relative;width:clamp(230px,30vw,400px);aspect-ratio:1;border-radius:50%;overflow:hidden; will-change:transform;box-shadow:0 30px 80px rgba(0,0,0,.45); } .hero-sello video,.hero-sello .estatico{ position:absolute;width:127.5%;height:127.5%;left:-13.75%;top:-13.75%;display:block;object-fit:contain; } .hero-sello .estatico{display:none;width:106.7%;height:106.7%;left:-3.35%;top:-3.35%;} /* El rótulo orbita el disco: svg cuadrado un 30 % mayor que el lienzo, centrado sobre él. */ .hero-sello{position:relative;} .hero-sello .orbita{ position:absolute;left:-15%;top:-15%;width:130%;height:auto;aspect-ratio:1; pointer-events:none;overflow:visible;will-change:transform; } .hero-sello .orbita text{ font-family:var(--sans);font-weight:500;font-size:9.8px;letter-spacing:.3em;text-transform:uppercase;fill:var(--crema-suave); } .hero-sello .pie{display:none;} @media (max-width:720px){.hero-sello{margin:7vw auto 9vw;}} /* RF-M02: con «reducir movimiento» no hay vídeo, hay logo. El