/* ============================================================
   Di Fratelli La Nonna — v3 · Dark Premium
   ============================================================ */
:root{
  --bg:#100E0B;          /* negro cálido */
  --bg-2:#17140F;        /* panel */
  --bg-3:#201B15;        /* panel claro */
  --cream:#F3ECDD;       /* texto/titulares */
  --cream-2:#CFC6B4;     /* texto secundario */
  --dim:rgba(243,236,221,.55);
  --verde:#6E9A7C;       /* verde aclarado, legible sobre negro */
  --verde-deep:#2F4B3C;
  --burgundy:#A11635;    /* burdeos aclarado para CTA sobre negro */
  --burgundy-deep:#800020;
  --gold:#C9A86A;        /* luz cálida / acento */
  --line:rgba(243,236,221,.12);
  --line-2:rgba(243,236,221,.06);
  --display:'Fraunces',serif;
  --body:'Poppins',sans-serif;
  --logo:'Fredoka',sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --nav-h:76px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth;}
body{font-family:var(--body);font-weight:300;color:var(--cream);background:var(--bg);line-height:1.65;overflow-x:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--burgundy);color:#fff;}

/* grain */
body::after{content:"";position:fixed;inset:0;z-index:120;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

.wrap{width:min(1240px,90vw);margin:0 auto;}
.wide{width:min(1460px,93vw);margin:0 auto;}

/* helpers */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:500;font-size:10.5px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold);opacity:.6;}
.display{font-family:var(--display);font-weight:300;line-height:1.02;letter-spacing:-.02em;color:var(--cream);}
.display em{font-style:italic;color:var(--gold);}
h2.display{font-size:clamp(32px,5vw,62px);}
.body-md{font-size:16.5px;color:var(--cream-2);max-width:56ch;font-weight:300;}
.dim{color:var(--dim);}

/* buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:13px;font-family:var(--body);font-weight:500;font-size:14px;
  padding:12px 13px 12px 25px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .5s var(--ease),background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);}
.btn .ic{width:33px;height:33px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .5s var(--ease),background .5s var(--ease);}
.btn .ic svg{width:14px;height:14px;}
.btn:active{transform:scale(.97);}
.btn-gold{background:var(--burgundy);color:#fff;}
.btn-gold .ic{background:rgba(255,255,255,.16);}
.btn-gold:hover{background:#bb1c40;}
.btn-gold:hover .ic{transform:translate(3px,-1px);}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--line);padding-left:21px;}
.btn-ghost .ic{background:rgba(243,236,221,.08);}
.btn-ghost:hover{border-color:var(--cream);}
.btn-ghost:hover .ic{transform:translate(3px,-1px);}
.link-u{font-weight:500;font-size:14px;color:var(--cream);border-bottom:1px solid var(--gold);padding-bottom:3px;transition:.4s var(--ease);}
.link-u:hover{color:var(--gold);}

/* ===== INTRO (logo 3D placeholder / futuro vídeo scrubbed) ===== */
.intro{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-align:center;}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(128,0,32,.22),transparent 60%);}
.intro .logo3d{width:min(62vh,560px);max-width:88vw;position:relative;z-index:2;filter:drop-shadow(0 30px 70px rgba(0,0,0,.6));}
.intro .ph-note{position:absolute;top:18px;left:18px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);z-index:3;}
.cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;color:var(--cream-2);}
.cue span{font-size:11px;letter-spacing:.34em;text-transform:uppercase;}
.cue .arrow{width:26px;height:26px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;justify-content:center;animation:bob 1.8s var(--ease) infinite;}
.cue .arrow svg{width:13px;height:13px;color:var(--gold);}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ===== HEADER (aparece tras el intro) ===== */
.header{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:100;display:flex;align-items:center;
  background:rgba(16,14,11,0);transition:.5s var(--ease);transform:translateY(-100%);}
.header.show{transform:translateY(0);background:rgba(16,14,11,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-2);}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;}
.header .bnd{display:flex;align-items:center;gap:11px;}
.header .bnd img{height:34px;}
.header .bnd .wm{font-family:var(--logo);font-weight:600;font-size:17px;color:var(--cream);}
.header nav{display:flex;align-items:center;gap:28px;}
.header nav a.lnk{font-weight:400;font-size:14px;color:var(--cream-2);transition:.3s;}
.header nav a.lnk:hover{color:var(--cream);}
.burger{display:none;width:42px;height:42px;border-radius:999px;background:var(--bg-3);border:1px solid var(--line);cursor:pointer;position:relative;flex:0 0 auto;}
.burger span{position:absolute;left:12px;width:18px;height:1.5px;background:var(--cream);transition:.45s var(--ease);}
.burger span:nth-child(1){top:16px;}.burger span:nth-child(2){top:24px;}
.menu-open .burger span:nth-child(1){top:20px;transform:rotate(45deg);}
.menu-open .burger span:nth-child(2){top:20px;transform:rotate(-45deg);}

.overlay{position:fixed;inset:0;z-index:99;background:rgba(16,14,11,.96);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;opacity:0;visibility:hidden;transition:.5s var(--ease);}
.menu-open .overlay{opacity:1;visibility:visible;}
.overlay a{font-family:var(--display);font-weight:300;font-size:32px;color:var(--cream);transform:translateY(24px);opacity:0;transition:.6s var(--ease);}
.menu-open .overlay a{transform:none;opacity:1;}
.menu-open .overlay a:nth-child(2){transition-delay:.06s}.menu-open .overlay a:nth-child(3){transition-delay:.12s}
.menu-open .overlay a:nth-child(4){transition-delay:.18s}.menu-open .overlay a:nth-child(5){transition-delay:.24s}

/* ===== HERO (logo a un lado + texto) ===== */
.hero{min-height:100dvh;display:flex;align-items:center;position:relative;overflow:hidden;padding:var(--nav-h) 0 80px;}
.hero::after{content:"";position:absolute;right:-12%;top:50%;transform:translateY(-50%);width:min(60vw,720px);height:min(60vw,720px);
  background:url("assets/img/logo3d.jpg") center/contain no-repeat;opacity:.9;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle,#000 58%,transparent 72%);mask-image:radial-gradient(circle,#000 58%,transparent 72%);}
.hero .wrap{position:relative;z-index:2;}
.hero .inner{max-width:60%;}
.hero h1{font-family:var(--display);font-weight:300;font-size:clamp(44px,7vw,92px);line-height:.98;letter-spacing:-.03em;margin:22px 0 26px;}
.hero h1 em{font-style:italic;color:var(--gold);}
.hero .sub{font-size:17px;color:var(--cream-2);max-width:40ch;margin-bottom:34px;}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* ===== section base ===== */
.sec{padding:clamp(80px,11vw,150px) 0;position:relative;}
.sec-head .eyebrow{margin-bottom:16px;}
.divider{height:1px;background:var(--line-2);}

/* ===== MINI bloques (carta / reserva / pedir) ===== */
.mini{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;}
.mini.rev{direction:rtl;}
.mini.rev>*{direction:ltr;}
.mini .txt h2{margin:16px 0 18px;}
.mini .txt p{margin-bottom:26px;}
.mini .visual{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--bg-2);aspect-ratio:4/3;}
.mini .visual img{width:100%;height:100%;object-fit:cover;}
.mini .tag{position:absolute;top:16px;left:16px;background:rgba(16,14,11,.7);backdrop-filter:blur(6px);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);}
/* mini carta preview chips */
.dishes{display:flex;flex-direction:column;gap:0;}
.dish{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-2);}
.dish .n{font-weight:400;font-size:15px;color:var(--cream);}
.dish .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-4px);}
.dish .p{font-family:var(--display);font-size:15px;color:var(--gold);}

/* ===== PRUEBA SOCIAL ===== */
.proof{background:var(--bg-2);}
.proof .top{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-bottom:50px;}
.proof .stars{color:var(--gold);font-size:19px;letter-spacing:3px;}
.proof .big{font-family:var(--display);font-weight:300;font-size:clamp(28px,4vw,44px);color:var(--cream);margin-top:6px;}
.proof .big b{color:var(--gold);font-weight:400;}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.rev-c{background:var(--bg-3);border:1px solid var(--line);border-radius:18px;padding:28px;display:flex;flex-direction:column;gap:14px;min-height:230px;}
.rev-c .rs{color:var(--gold);font-size:13px;letter-spacing:2px;}
.rev-c .tx{font-family:var(--display);font-style:italic;font-weight:300;font-size:17px;line-height:1.5;color:var(--cream);}
.rev-c .who{display:flex;align-items:center;gap:11px;margin-top:auto;}
.rev-c .av{width:38px;height:38px;border-radius:999px;background:var(--verde-deep);color:var(--cream);display:flex;align-items:center;justify-content:center;font-family:var(--logo);font-weight:600;}
.rev-c .nm{font-weight:500;font-size:14px;color:var(--cream);}
.rev-c .mt{font-size:11.5px;color:var(--dim);}

/* ===== NOSOTROS ===== */
.about .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,90px);align-items:center;}
.about p{margin-top:18px;}
.about .stats{display:flex;gap:42px;margin-top:38px;}
.about .stat .n{font-family:var(--display);font-weight:300;font-size:clamp(40px,5vw,58px);color:var(--gold);line-height:.9;}
.about .stat .l{font-size:12px;color:var(--dim);margin-top:7px;}
.about .ph{border-radius:18px;overflow:hidden;border:1px solid var(--line);}
.about .ph img{width:100%;aspect-ratio:4/5;object-fit:cover;}

/* ===== GALERÍA ===== */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:14px;margin-top:50px;}
.gal-grid figure{overflow:hidden;border-radius:16px;border:1px solid var(--line-2);}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease);opacity:.92;}
.gal-grid figure:hover img{transform:scale(1.06);opacity:1;}
.gal-grid .big{grid-column:span 2;grid-row:span 2;}
.gal-grid .tall{grid-row:span 2;}

/* ===== UBICACIÓN ===== */
.ubi{background:var(--bg-2);padding:0;}
.ubi-grid{display:grid;grid-template-columns:1fr 1fr;}
.ubi-info{padding:clamp(70px,8vw,130px) clamp(26px,5vw,72px);}
.ubi-info .block{margin-top:24px;}
.ubi-info .lbl{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
.ubi-info .block p{font-size:16px;color:var(--cream-2);}
.ubi-info .block a{color:var(--cream);border-bottom:1px solid var(--line);}
.ubi-map{min-height:460px;}
.ubi-map iframe{width:100%;height:100%;min-height:460px;border:0;filter:grayscale(.4) invert(.9) hue-rotate(180deg) contrast(.9);}

/* ===== FOOTER ===== */
.footer{background:var(--bg);border-top:1px solid var(--line-2);padding:72px 0 28px;color:var(--cream-2);}
.footer .grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;}
.footer .logo{width:148px;margin-bottom:18px;}
.footer p{font-size:14px;}
.footer h4{font-family:var(--logo);font-weight:500;color:var(--cream);font-size:15px;margin-bottom:14px;}
.footer ul{list-style:none;}
.footer li{margin-bottom:10px;font-size:14px;}
.footer a:hover{color:var(--cream);}
.footer .socials{display:flex;gap:11px;margin-top:18px;}
.footer .socials a{width:40px;height:40px;border:1px solid var(--line);border-radius:999px;display:flex;align-items:center;justify-content:center;transition:.4s var(--ease);}
.footer .socials a:hover{background:var(--cream);color:var(--bg);}
.footer .socials svg{width:17px;height:17px;}
.footer .bottom{border-top:1px solid var(--line-2);margin-top:48px;padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--dim);}

/* mobile bar */
.mbar{position:fixed;bottom:0;left:0;right:0;z-index:95;display:none;gap:10px;padding:12px 16px;background:rgba(16,14,11,.95);backdrop-filter:blur(10px);border-top:1px solid var(--line);}
.mbar .btn{flex:1;justify-content:center;padding-left:18px;}.mbar .btn .ic{display:none;}

/* reveal */
.rv{opacity:0;transform:translateY(36px);filter:blur(5px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);}
.rv.in{opacity:1;transform:none;filter:blur(0);}
.rv-2{transition-delay:.1s}.rv-3{transition-delay:.2s}

/* ===== subpages ===== */
.page-hero{padding:calc(var(--nav-h) + 70px) 0 50px;text-align:center;}
.page-hero .eyebrow{justify-content:center;}
.page-hero .eyebrow::before{display:none;}
.page-hero h1{font-family:var(--display);font-weight:300;font-size:clamp(40px,7vw,82px);line-height:1;margin-top:14px;}
.page-hero h1 em{font-style:italic;color:var(--gold);}
.page-hero p{color:var(--cream-2);max-width:54ch;margin:18px auto 0;}
.back{position:fixed;top:18px;left:18px;z-index:130;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--cream-2);
  background:rgba(16,14,11,.6);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;padding:9px 16px;transition:.3s;}
.back:hover{color:var(--cream);border-color:var(--cream);}

/* responsive */
@media(max-width:960px){
  .header nav{display:none;}
  .burger{display:block;}
  .hero::after{right:-30%;opacity:.32;width:120vw;height:120vw;top:auto;bottom:-10%;transform:none;}
  .hero .inner{max-width:100%;}
  .mini,.about .grid,.ubi-grid{grid-template-columns:1fr;gap:34px;}
  .mini.rev{direction:ltr;}
  .reviews{grid-template-columns:1fr;}
  .footer .grid{grid-template-columns:1fr 1fr;}
  .gal-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;}
  .mbar{display:flex;}body{padding-bottom:72px;}
}
@media(max-width:560px){
  .footer .grid{grid-template-columns:1fr;}
  .gal-grid .big{grid-column:span 2;grid-row:span 1;}
}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;filter:none;}.cue .arrow{animation:none;}}