/*
Theme Name: Il Nonno
Theme URI: https://pizzeriailnonno.example
Author: Il Nonno
Description: Tema elegante y cálido para Pizzeria Il Nonno (Empuriabrava). Página única con carta, reseñas y reservas. Compatible con WordPress 6+.
Version: 1.5.0
License: GPL-2.0-or-later
Text Domain: ilnonno
*/

:root{
  --bg:#241a14;
  --bg-2:#2d2017;
  --card:#2a1e16;
  --text:#f5ecdf;
  --muted:#bdae9c;
  --gold:#e6b860;
  --primary:#b3331f;
  --border:rgba(230,184,96,.18);
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0 0 .4em}
.container{max-width:1180px;margin:0 auto;padding:0 24px}
.eyebrow{display:inline-flex;align-items:center;gap:.75rem;color:var(--gold);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase}
.eyebrow::before,.eyebrow::after{content:"";width:40px;height:1px;background:var(--gold);opacity:.6}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:14px 28px;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;transition:all .25s;border:1px solid transparent;cursor:pointer}
.btn-gold{background:var(--gold);color:#241a14}
.btn-gold:hover{opacity:.9}
.btn-outline{border-color:var(--gold);color:var(--gold)}
.btn-outline:hover{background:var(--gold);color:#241a14}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{opacity:.9}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(36,26,20,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:1280px;margin:0 auto}
.brand{display:inline-flex !important;flex-direction:column !important;align-items:flex-start !important;line-height:1;text-decoration:none;gap:.4rem}
.brand-name{display:block !important;font-family:var(--serif);font-size:1.5rem;color:var(--fg)}
.brand-name > span{color:var(--gold)}
.brand-city{display:inline-flex !important;align-items:center;gap:.35rem;font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.brand-pin{display:inline-block;animation:ilnonnoBounce 1.4s infinite;font-style:normal}
@keyframes ilnonnoBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.nav{display:none;gap:32px;font-size:.78rem;letter-spacing:.25em;text-transform:uppercase}
.nav a:hover{color:var(--gold)}
@media(min-width:768px){.nav{display:flex}}

/* Hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.hero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(36,26,20,.55),rgba(36,26,20,.4),var(--bg))}
.hero .inner{position:relative;z-index:2;max-width:780px;padding:0 24px}
.hero h1{font-size:clamp(2.6rem,6vw,5.5rem);line-height:1.05;margin-top:24px}
.hero h1 em{color:var(--gold);font-style:italic}
.hero p{margin:24px auto 36px;max-width:520px;color:#f5ecdfd9}
.hero .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Section */
section.block{padding:80px 0}
section.block.alt{background:rgba(45,32,23,.55)}
.section-head{text-align:center;margin-bottom:56px}
.section-head h2{font-size:clamp(2rem,4vw,3rem);margin-top:14px}

/* Categories */
.cats{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:768px){.cats{grid-template-columns:repeat(3,1fr)}}
.cat{position:relative;aspect-ratio:4/5;overflow:hidden;display:block}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.cat:hover img{transform:scale(1.05)}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--bg),rgba(36,26,20,.2),transparent)}
.cat .label{position:absolute;left:0;right:0;bottom:0;padding:24px;text-align:center;z-index:2}
.cat .label small{color:var(--gold);text-transform:uppercase;letter-spacing:.25em;font-size:.7rem}
.cat .label h3{font-size:1.8rem;margin:8px 0 0}

/* Story */
.story{display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:768px){.story{grid-template-columns:1fr 1fr}}
.story img{aspect-ratio:4/5;object-fit:cover;width:100%}
.story p{color:var(--muted);margin:0 0 14px}

/* Menu */
.menu-grid{display:grid;grid-template-columns:1fr;gap:28px 48px}
@media(min-width:768px){.menu-grid{grid-template-columns:1fr 1fr}}
.dish .row{display:flex;align-items:baseline;gap:12px}
.dish .name{font-family:var(--serif);font-size:1.18rem}
.dish .dots{flex:1;border-bottom:1px dotted rgba(255,255,255,.18);transform:translateY(-4px)}
.dish .price{color:var(--gold);font-weight:500}
.dish .desc{color:var(--muted);font-size:.92rem;margin:6px 0 0}
.note{text-align:center;color:var(--muted);font-style:italic;margin-top:32px}

/* Kids menu */
.kids{max-width:760px;margin:0 auto;background:var(--card);border:1px solid var(--border);padding:40px;text-align:center}
.kids .price{color:var(--gold);font-family:var(--serif);font-size:1.6rem;margin:6px 0 26px}
.kids-grid{display:grid;grid-template-columns:1fr;gap:22px;text-align:left}
@media(min-width:640px){.kids-grid{grid-template-columns:repeat(3,1fr)}}
.kids-grid h4{font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:#f5ecdf;margin-bottom:6px}
.kids-grid p{color:var(--muted);font-size:.9rem;margin:0}

/* Reviews */
.reviews{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:768px){.reviews{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{background:var(--bg);border:1px solid var(--border);padding:28px;transition:border-color .25s}
.review:hover{border-color:rgba(230,184,96,.6)}
.stars{color:var(--gold);letter-spacing:2px;margin-bottom:10px}
.review p{font-style:italic;margin:0 0 18px}
.review small{color:var(--muted);text-transform:uppercase;letter-spacing:.25em;font-size:.7rem}

/* CTA */
.cta-band{padding:80px 24px;text-align:center;background:linear-gradient(135deg,#9c2d1d,#b3331f);color:#fff}
.cta-band h2{font-size:clamp(2rem,4vw,3rem);margin:14px 0 8px}
.cta-band p{opacity:.9;margin:0 0 28px}
.cta-band .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:768px){.contact-grid{grid-template-columns:1fr 1fr}}
.info{display:flex;gap:16px;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:18px}
.info .ico{color:var(--gold);width:22px;flex:none;margin-top:4px}
.info small{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.25em;font-size:.7rem;margin-bottom:4px}
.info .val{font-family:var(--serif);font-size:1.15rem}
.map{aspect-ratio:1/1;border:1px solid var(--border);overflow:hidden}
.map iframe{width:100%;height:100%;border:0}

/* Footer */
.site-footer{margin-top:80px;border-top:1px solid var(--border);background:var(--card)}
.site-footer .grid{display:grid;grid-template-columns:1fr;gap:32px;padding:56px 0}
@media(min-width:768px){.site-footer .grid{grid-template-columns:repeat(3,1fr)}}
.site-footer h4{color:var(--gold);text-transform:uppercase;letter-spacing:.25em;font-size:.72rem;margin-bottom:10px;font-family:var(--sans);font-weight:500}
.site-footer p{color:var(--muted);margin:0 0 6px;font-size:.92rem}
.copyright{border-top:1px solid var(--border);padding:18px;text-align:center;color:var(--muted);font-size:.78rem}

/* Language switcher */
.header-right{display:flex;align-items:center;gap:14px}
.lang-switcher{position:relative}
.lang-btn{background:none;border:0;color:inherit;display:inline-flex;align-items:center;gap:6px;font:inherit;text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;cursor:pointer;padding:6px 8px}
.lang-btn:hover{color:var(--gold)}
.lang-menu{position:absolute;right:0;top:calc(100% + 6px);background:var(--card);border:1px solid var(--border);min-width:160px;list-style:none;margin:0;padding:4px 0;z-index:60}
.lang-menu li button{width:100%;text-align:left;background:none;border:0;color:inherit;padding:9px 14px;font:inherit;font-size:.72rem;text-transform:uppercase;letter-spacing:.2em;cursor:pointer}
.lang-menu li button:hover{background:var(--bg);color:var(--gold)}
/* Hide Google Translate banner */
.goog-te-banner-frame.skiptranslate,#goog-gt-tt,.goog-te-balloon-frame{display:none!important}
body{top:0!important}
.goog-tooltip,.goog-tooltip:hover{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}


/* ===== Wines ===== */
.wine-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 28px;margin:30px auto 10px;font-size:.78rem;color:var(--muted);text-transform:none;letter-spacing:0}
.wine-legend-item{display:inline-flex;align-items:center;gap:8px}
.wine-legend-item strong{color:var(--fg);text-transform:uppercase;letter-spacing:.2em;font-size:.7rem;font-weight:500}
.wine-legend-desc{opacity:.85}
.wine-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.wine-cat{margin-top:30px}
.dish.wine .price{font-size:.92rem}
.wine-tag{color:var(--muted);text-transform:uppercase;letter-spacing:.18em;font-size:.62rem;margin-right:4px;font-weight:400}
.wine-meta{display:flex;align-items:center;gap:14px;margin-top:6px;font-size:.85rem;color:var(--muted)}
.wine-region{font-style:italic}
.wine-style{display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;letter-spacing:.18em;font-size:.62rem}

/* ===== v1.4.0 — multi-page layout ===== */
.page-hero{padding:90px 0 40px;text-align:center;background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.page-hero h1{font-family:var(--serif);font-size:clamp(2.4rem,5vw,4rem);margin:14px 0 16px}
.page-hero p{color:var(--muted);max-width:640px;margin:0 auto}
.page-anchors{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.page-anchors a{border:1px solid var(--border);padding:8px 16px;font-size:.72rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted);transition:all .25s}
.page-anchors a:hover{border-color:var(--gold);color:var(--gold)}
.site-header .nav a.active{color:var(--gold)}
.site-header .nav a.active::after{content:"";display:block;height:1px;background:var(--gold);margin-top:4px}

/* ===== v1.5.0 — scroll reveal ===== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease-out,transform .8s ease-out;will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
}