/* ============================================================================ Anfitrión · plantilla de página de restaurante (Norte) Arquetipo único: 02 · Oscuro cálido. Editorial, foto grande, movimiento discreto. Los colores y las fuentes NO se tocan aquí: vienen de carta.json → identidad, y el constructor los escribe como variables en el de cada página. Todo el contenido se ve sin JavaScript; el script sólo agrega movimiento. ========================================================================== */ *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--sans); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;} /* grano de película, muy tenue */ body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.06;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");} img{max-width:100%;display:block;} a{color:var(--acento-suave);} h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;text-wrap:balance;} p,figure,blockquote{margin:0;} .num{font-variant-numeric:tabular-nums;} :focus-visible{outline:2px solid var(--acento-suave);outline-offset:3px;} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} .wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,40px);} .kicker{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--acento-suave);} .titulo{font-size:clamp(34px,5.2vw,62px);line-height:1.02;letter-spacing:-.01em;margin-top:14px;} .parrafo{font-size:clamp(16px,1.6vw,18.5px);line-height:1.7;color:var(--apoyo);margin-top:20px;max-width:52ch;} .sec-cab{margin-bottom:44px;} /* ---------- movimiento (sólo con script y sin "reducir movimiento") ---------- */ html.js .revela{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);} html.js .revela.visto{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ html.js .revela{opacity:1;transform:none;transition:none;} } /* ---------- botones ---------- */ .btn{appearance:none;border:0;cursor:pointer;font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:.01em; padding:14px 26px;border-radius:999px;background:var(--acento);color:#fff;text-decoration:none;display:inline-block; transition:transform .25s ease,box-shadow .25s ease,background .25s ease;} .btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.35);} .btn.ghost{background:rgba(255,255,255,.04);color:var(--texto);border:1px solid rgba(244,237,227,.28);backdrop-filter:blur(6px);} .btn.ghost:hover{border-color:var(--texto);} .btn.chico{padding:9px 18px;font-size:13px;} .btn.grande{padding:17px 34px;font-size:16px;} /* ---------- barra de demo ---------- */ .demobar{background:var(--superficie);border-bottom:1px solid var(--borde);position:relative;z-index:60;} .demobar .in{max-width:1180px;margin:0 auto;padding:8px clamp(20px,4vw,40px);display:flex;align-items:center;gap:14px;flex-wrap:wrap;} .demobar .tag{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--apoyo);} .demobar .tag b{color:var(--texto);} .demobar a{margin-left:auto;font-size:12px;font-weight:600;color:var(--apoyo);text-decoration:none; border:1px solid var(--borde);border-radius:999px;padding:5px 14px;} .demobar a:hover{color:var(--texto);border-color:var(--acento);} /* ---------- navegación ---------- */ .nav{position:sticky;top:0;z-index:50;height:66px;margin-bottom:-66px; background:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0));transition:background .35s ease,border-color .35s ease; border-bottom:1px solid transparent;} .nav.solido{background:color-mix(in srgb,var(--fondo) 88%,transparent);backdrop-filter:blur(12px);border-bottom-color:var(--borde);} .nav .in{height:100%;display:flex;align-items:center;gap:30px;} .nav-marca{font-family:var(--serif);font-size:24px;color:var(--texto);text-decoration:none;letter-spacing:-.01em;} .nav nav{display:flex;gap:26px;margin-left:auto;} .nav nav a{font-size:13.5px;font-weight:500;color:var(--texto);opacity:.78;text-decoration:none;position:relative;} .nav nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease;} .nav nav a:hover{opacity:1;} .nav nav a:hover::after{transform:scaleX(1);} /* ---------- portada ---------- */ .hero{position:relative;overflow:hidden;padding-block:120px 64px;border-bottom:1px solid var(--borde);} .hero.con-foto{min-height:min(94svh,940px);display:flex;align-items:flex-end;padding-bottom:clamp(48px,8vh,88px);border-bottom:0;} .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%;} html.js .hero-img{animation:kenburns 26s ease-in-out infinite alternate;} @keyframes kenburns{from{transform:scale(1.04);}to{transform:scale(1.13) translate(-1.5%,-1%);}} .hero-velo{display:none;} .hero.con-foto .hero-velo{display:block;position:absolute;inset:0; background:linear-gradient(to top,var(--fondo) 0%,rgba(10,7,5,.72) 34%,rgba(10,7,5,.18) 70%,rgba(10,7,5,.35) 100%), linear-gradient(to right,rgba(10,7,5,.7) 0%,rgba(10,7,5,0) 62%);} .hero-in{position:relative;width:100%;} .marca{font-family:var(--serif);font-size:clamp(64px,13.5vw,184px);line-height:.88;letter-spacing:-.025em;margin-top:18px;} .lema{font-family:var(--serif);font-size:clamp(20px,2.6vw,32px);line-height:1.3;max-width:30ch;margin-top:22px;} .datos{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:30px;font-size:14px;color:var(--apoyo);align-items:center;} .hero.con-foto .datos{color:rgba(244,237,227,.78);} .estado{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:13px; border:1px solid var(--borde);border-radius:999px;padding:5px 13px;background:rgba(0,0,0,.25);} .estado .punto{width:7px;height:7px;border-radius:50%;background:var(--apoyo);} .estado.abierto{color:var(--positivo);} .estado.abierto .punto{background:var(--positivo);box-shadow:0 0 0 0 var(--positivo);animation:late 2s infinite;} @keyframes late{70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}} .acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;} /* ---------- cinta ---------- */ .cinta{border-block:1px solid var(--borde);overflow:hidden;padding-block:18px;background:var(--fondo);} .cinta-in{display:flex;width:max-content;} html.js .cinta-in{animation:cinta 46s linear infinite;} .cinta-in > div{display:flex;align-items:center;flex-shrink:0;} .cinta span{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,26px);white-space:nowrap;padding-inline:26px;} .cinta i{font-style:normal;color:var(--acento);font-size:12px;} @keyframes cinta{to{transform:translateX(-50%);}} /* ---------- el oficio ---------- */ .oficio{padding-block:clamp(72px,11vw,140px);} .oficio-grid{display:block;} .oficio-grid.con-foto{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,88px);align-items:center;} .oficio-foto{aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--superficie);} .oficio-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s ease;} .oficio-foto:hover img{transform:scale(1.04);} .datos-oficio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 34px;margin-top:44px;padding-top:34px;border-top:1px solid var(--borde);} .oficio-grid:not(.con-foto) .datos-oficio{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));} .dato .n{font-family:var(--serif);font-size:clamp(34px,3.6vw,46px);line-height:1;color:var(--acento-suave);} .dato .d{font-size:14px;color:var(--apoyo);margin-top:9px;line-height:1.5;} /* ---------- las de la casa ---------- */ .destacados{padding-block:clamp(40px,6vw,80px) clamp(72px,10vw,130px);} .platos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,2.6vw,36px);} .plato{display:flex;flex-direction:column;} .plato-foto{aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:var(--superficie);} .plato-foto img{width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .9s ease;filter:saturate(.95);} .plato:hover .plato-foto img{transform:scale(1.06);filter:saturate(1.08);} .plato-txt{padding-top:18px;display:flex;flex-direction:column;flex:1;} .plato-t{display:flex;justify-content:space-between;align-items:baseline;gap:14px;} .plato-t h3{font-size:clamp(24px,2.3vw,30px);line-height:1.1;} .plato-t .pr{font-size:16px;font-weight:600;white-space:nowrap;color:var(--acento-suave);} .plato .de{font-size:14.5px;color:var(--apoyo);line-height:1.55;margin-top:8px;} .preguntar{align-self:flex-start;margin-top:auto;padding-top:14px;background:none;border:0;cursor:pointer; font-family:var(--sans);font-size:13px;font-weight:600;color:var(--texto);opacity:.72; text-decoration:underline;text-decoration-color:var(--acento);text-underline-offset:5px;padding-inline:0;} .preguntar:hover{opacity:1;} /* ---------- franja del horno ---------- */ .horno{position:relative;overflow:hidden;padding-block:clamp(90px,14vw,190px);text-align:center;border-block:1px solid var(--borde);} .horno-img{position:absolute;inset:-12% 0;width:100%;height:124%;object-fit:cover;will-change:transform;} .horno-velo{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(10,7,5,.45) 0%,rgba(10,7,5,.82) 75%);} .horno blockquote{position:relative;} .horno blockquote p{font-family:var(--serif);font-size:clamp(38px,6.4vw,92px);line-height:1.02;letter-spacing:-.015em;max-width:15ch;margin-inline:auto;} /* ---------- carta ---------- */ .carta{padding-block:clamp(72px,10vw,130px) 48px;scroll-margin-top:70px;} .carta-cols{columns:2 420px;column-gap:clamp(40px,6vw,84px);} .seccion{break-inside:avoid;margin-bottom:52px;scroll-margin-top:70px;} .sec-t{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--texto);} .sec-t h2{font-size:32px;} .sec-t p{font-size:12.5px;color:var(--apoyo);line-height:1.4;} .platillos{list-style:none;margin:0;padding:0;} .platillo{display:grid;grid-template-columns:1fr auto;gap:5px 18px;padding:16px 0;border-bottom:1px solid var(--borde);} .platillo:last-child{border-bottom:none;} .platillo.con-foto{grid-template-columns:72px 1fr auto;column-gap:16px;} .platillo.con-foto .ph{grid-row:1 / span 3;width:72px;height:72px;border-radius:50%;overflow:hidden;background:var(--superficie);} .platillo.con-foto .ph img{width:100%;height:100%;object-fit:cover;} .platillo .nm{font-size:17px;font-weight:600;line-height:1.3;} .platillo .pr{font-size:16px;font-weight:600;white-space:nowrap;} .platillo .de,.platillo .marcas{grid-column:1 / -1;} .platillo.con-foto .de,.platillo.con-foto .marcas{grid-column:2 / -1;} .platillo .de{font-size:14px;color:var(--apoyo);line-height:1.5;max-width:62ch;} .marcas{display:flex;flex-wrap:wrap;gap:6px;margin-top:3px;} .marca-t{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; border:1px solid var(--borde);color:var(--apoyo);padding:2px 8px;border-radius:999px;} .marca-t.pica{color:var(--acento-suave);border-color:var(--acento);} .marca-t.bien{color:var(--positivo);border-color:var(--positivo);} /* ---------- galería ---------- */ .galeria{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2.4vw,30px);padding-block:40px clamp(60px,8vw,100px);align-items:end;} .galeria figure:nth-child(2){margin-bottom:clamp(30px,6vw,90px);} .galeria figure > img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px;} .galeria figure:nth-child(2) > img{aspect-ratio:4/5;} .galeria figcaption{font-size:13.5px;color:var(--apoyo);margin-top:12px;} /* ---------- invitación ---------- */ .invita{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap; padding:clamp(34px,5vw,60px);margin-bottom:clamp(60px,8vw,100px);border:1px solid var(--borde);border-radius:4px; background:radial-gradient(ellipse at 100% 0%,color-mix(in srgb,var(--acento) 16%,transparent),transparent 60%),var(--superficie);} .invita .titulo{font-size:clamp(30px,4vw,48px);} .invita .parrafo{margin-top:14px;} /* ---------- info y pie ---------- */ .info{padding-block:clamp(50px,7vw,80px);border-top:1px solid var(--borde);scroll-margin-top:70px; display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:34px;} .info h3{font-size:22px;margin-bottom:12px;} .info p{font-size:14.5px;color:var(--apoyo);line-height:1.7;} .pie{padding-block:28px 100px;border-top:1px solid var(--borde);font-size:12.5px;color:var(--apoyo);line-height:1.6; display:flex;flex-direction:column;gap:8px;} .pie a{color:var(--apoyo);} /* ---------- vista de mesa ---------- */ .mesa-top{padding-block:30px 24px;text-align:center;border-bottom:1px solid var(--borde);position:relative;overflow:hidden;} .mesa-top.con-foto{padding-block:92px 30px;border-bottom:0;} .mesa-top-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 60%;} .mesa-top.con-foto::before{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to top,var(--fondo) 4%,rgba(10,7,5,.55) 60%,rgba(10,7,5,.4));} .mesa-top-in{position:relative;z-index:2;} .mesa-top .marca{font-size:clamp(46px,12vw,72px);margin-top:10px;} .mesa-top .sub{font-size:13.5px;color:var(--apoyo);margin-top:12px;} .mesa-top.con-foto .sub{color:rgba(244,237,227,.8);} .mesa-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--fondo) 92%,transparent);backdrop-filter:blur(10px); border-bottom:1px solid var(--borde);display:flex;gap:8px;overflow-x:auto;padding:10px 20px;scrollbar-width:none;} .mesa-nav a{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--apoyo);text-decoration:none; border:1px solid var(--borde);border-radius:999px;padding:6px 14px;} [data-vista="mesa"] .carta{padding-top:36px;} [data-vista="mesa"] .carta-cols,[data-vista="mesa"] .carta{columns:auto;} /* ---------- el anfitrión ---------- */ .lanzador{position:fixed;right:20px;bottom:20px;z-index:70;background:var(--acento);color:#fff;border:0; border-radius:999px;padding:14px 22px;cursor:pointer;font-family:var(--sans);font-size:14.5px;font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .25s ease;} .lanzador:hover{transform:translateY(-2px);} .panel{position:fixed;right:20px;bottom:20px;z-index:80;width:min(382px,calc(100vw - 40px)); max-height:min(620px,calc(100vh - 40px));background:var(--superficie);border:1px solid var(--borde); border-radius:6px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 14px 50px rgba(0,0,0,.55);} .panel[hidden]{display:none;} .panel header{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--borde);} .panel header .t{font-family:var(--serif);font-size:20px;line-height:1.1;} .panel header .s{font-size:11.5px;color:var(--apoyo);} .cerrar{margin-left:auto;background:transparent;border:0;color:var(--apoyo);cursor:pointer;font-size:24px;line-height:1;padding:2px 6px;} .hilo{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:11px;} .b{font-size:14.5px;line-height:1.5;padding:10px 14px;border-radius:12px;max-width:88%;white-space:pre-wrap;} .b.yo{background:var(--acento);color:#fff;align-self:flex-end;border-bottom-right-radius:3px;} .b.el{background:var(--fondo);color:var(--texto);align-self:flex-start;border-bottom-left-radius:3px;} .b.pensando{align-self:flex-start;color:var(--apoyo);font-style:italic;background:transparent;padding-inline:4px;} .solicitud{align-self:stretch;border:1px solid var(--borde);border-left:2px solid var(--positivo);border-radius:3px; padding:12px 14px;font-size:13px;color:var(--apoyo);display:flex;flex-direction:column;gap:4px;} .solicitud b{color:var(--texto);font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px;} .solicitud .ln{display:flex;justify-content:space-between;gap:12px;} .solicitud .ln span:last-child{color:var(--texto);font-weight:600;text-align:right;} .solicitud .btn{margin-top:10px;text-align:center;font-size:13.5px;padding:10px 14px;} .solicitud .aviso{font-size:12px;margin-top:6px;} .sugs{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;} .sugs button{background:transparent;border:1px solid var(--borde);color:var(--apoyo);cursor:pointer; font-family:var(--sans);font-size:12.5px;padding:6px 12px;border-radius:999px;} .sugs button:hover{border-color:var(--acento);color:var(--texto);} .caja{display:flex;gap:9px;padding:12px 14px;border-top:1px solid var(--borde);align-items:flex-end;} .caja textarea{flex:1;background:var(--fondo);border:1px solid var(--borde);border-radius:4px;color:var(--texto); font-family:var(--sans);font-size:16px;padding:10px 12px;resize:none;height:44px;max-height:110px;line-height:1.4;} .caja button{background:var(--acento);border:0;color:#fff;border-radius:4px;cursor:pointer; font-family:var(--sans);font-size:14px;font-weight:600;padding:0 16px;height:44px;} .caja button:disabled{opacity:.45;cursor:default;} .nota-panel{font-size:11px;color:var(--apoyo);padding:0 16px 11px;line-height:1.45;} /* ---------- aviso de privacidad ---------- */ .legal{padding-block:48px 80px;max-width:720px;} .legal h1{font-size:clamp(32px,6vw,48px);margin-bottom:10px;} .legal h2{font-size:22px;margin:30px 0 10px;} .legal p,.legal li{font-size:15px;color:var(--apoyo);line-height:1.65;} .legal p + p{margin-top:10px;} .legal b{color:var(--texto);} /* ---------- pantallas chicas ---------- */ @media (max-width:980px){ .platos{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:820px){ .nav nav{display:none;} .nav .btn.chico{margin-left:auto;} .oficio-grid.con-foto{grid-template-columns:1fr;} .oficio-foto{aspect-ratio:4/3;} .galeria{grid-template-columns:1fr;} .galeria figure:nth-child(2){margin-bottom:0;} } @media (max-width:620px){ .platos{grid-template-columns:1fr;} .datos-oficio{grid-template-columns:1fr 1fr;gap:24px 20px;} .hero.con-foto{min-height:88svh;} .hero-img{object-position:62% 50%;} .panel{right:0;left:0;bottom:0;width:100%;max-height:78vh;border-radius:14px 14px 0 0;border-bottom:0;} .lanzador{right:16px;bottom:16px;} .invita{flex-direction:column;align-items:flex-start;} .nav-marca{font-size:21px;} } @media (prefers-reduced-motion:reduce){ /* Windows trae "reducir movimiento" encendido de fábrica: sólo se apaga lo brusco. El acercamiento lento de la portada y la cinta se quedan; el parallax del horno no corre (efectos.js). */ html{scroll-behavior:auto;} }