/* ============================================================
   STILE COMPLETO · Residenza Di Nucci
   ============================================================ */

:root { --panna:#FBF7EF; --panna-caldo:#F3EBDD; --beige-seta:#E8DCC8; --testo:#2B2419; --testo-soft:#5E543F; --oro:#C9A227; --oro-chiaro:#D9BC6A; --oro-scuro:#A8861F; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--panna-caldo); }
::-webkit-scrollbar-thumb { background: var(--oro-chiaro); border: 2px solid var(--panna-caldo); border-radius: 5px; }
::selection { background: var(--oro-chiaro); color: var(--testo); }
body { background: var(--panna); color: var(--testo); font-family: 'Lato', sans-serif; font-weight: 300; line-height: 1.75; font-size: 17px; padding-bottom: 100px; overflow-x: hidden; }
h1, h2, h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; letter-spacing: 0.5px; color: var(--testo); line-height: 1.2; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
p { color: var(--testo); }
a { color: var(--oro-scuro); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--oro); }
:focus-visible { outline: 2px solid var(--oro-scuro); outline-offset: 3px; border-radius: 4px; }
.scheda:focus-visible { outline: 2px solid var(--oro-scuro); outline-offset: 4px; }
.linea-oro { width: 40px; height: 1px; background: var(--oro); margin: 28px auto; }
.eyebrow { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 3.5px; text-transform: uppercase; color: var(--testo-soft); }
.lang-selector { position: fixed; top: 80px; right: 24px; z-index: 1500; display: flex; gap: 4px; background: rgba(251,247,239,0.95); backdrop-filter: blur(10px); border: 1px solid rgba(201,162,39,0.3); padding: 4px; border-radius: 24px; box-shadow: 0 4px 16px rgba(43,36,25,0.08); }
.lang-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; cursor: pointer; transition: all 0.25s ease; line-height: 1; padding: 0; }
.lang-btn svg { width: 20px; height: 14px; display: block; border-radius: 2px; box-shadow: 0 1px 2px rgba(43,36,25,0.15); }
.lang-btn:hover { background: var(--panna-caldo); transform: scale(1.1); }
.lang-btn.attivo { background: var(--oro); box-shadow: 0 2px 8px rgba(201,162,39,0.4); }
@media (max-width: 900px) { .lang-selector { top: 72px; right: 16px; padding: 3px; } .lang-btn { width: 30px; height: 30px; } .lang-btn svg { width: 18px; height: 13px; } }
@media (max-width: 600px) { .lang-selector { top: 68px; right: 12px; } .lang-btn { width: 26px; height: 26px; } .lang-btn svg { width: 16px; height: 11px; } }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; background: rgba(251, 247, 239, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201,162,39,0.15); }
.navbar-inner { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.navbar-brand { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; font-weight: 500; letter-spacing: 1px; color: var(--testo); display: flex; align-items: center; gap: 14px; flex-shrink: 0; white-space: nowrap; }
.navbar-stemma { width: 45px; height: 45px; object-fit: contain; filter: grayscale(1) brightness(1.1) contrast(0.9); opacity: 0.85; transition: all 0.4s ease; }
.navbar-brand:hover .navbar-stemma { filter: grayscale(0) brightness(1) contrast(1); opacity: 1; transform: scale(1.05); }
@media (max-width: 900px) { .navbar-stemma { width: 38px; height: 38px; } .navbar-brand { gap: 12px; } }
@media (max-width: 600px) { .navbar-stemma { width: 32px; height: 32px; } .navbar-brand { font-size: 1.05rem; gap: 10px; } }
.navbar-brand:hover { color: var(--oro-scuro); }
.navbar-links { display: flex; gap: 22px; list-style: none; flex-wrap: nowrap; align-items: center; margin-left: auto; }
.navbar-links li { white-space: nowrap; }
.navbar-links a { font-family: 'Montserrat', sans-serif; font-size: 0.66rem; letter-spacing: 1.8px; text-transform: uppercase; color: var(--testo); position: relative; white-space: nowrap; display: inline-block; }
.navbar-links a::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 1px; background: var(--oro); transition: width 0.3s ease; }
.navbar-links a:hover::after { width: 100%; }
.hamburger { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 24px; position: relative; }
.hamburger span { position: absolute; left: 0; width: 100%; height: 1px; background: var(--testo); transition: all 0.3s ease; }
.hamburger span:nth-child(1) { top: 4px; } .hamburger span:nth-child(2) { top: 11px; } .hamburger span:nth-child(3) { top: 18px; }
.hamburger.aperto span:nth-child(1) { transform: rotate(45deg); top: 11px; }
.hamburger.aperto span:nth-child(2) { opacity: 0; }
.hamburger.aperto span:nth-child(3) { transform: rotate(-45deg); top: 11px; }
@media (max-width: 900px) { .navbar-links { display: none; } .hamburger { display: block; } .navbar-links.aperto { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: rgba(251,247,239,0.98); padding: 28px 24px; gap: 20px; border-bottom: 1px solid rgba(201,162,39,0.2); z-index: 2001; } .navbar-links.aperto a { font-size: 0.85rem; } }
.hero-tisane { position: relative; min-height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 130px 24px 40px; background: var(--panna); background-image: radial-gradient(circle, rgba(201,162,39,0.05) 1px, transparent 1px); background-size: 28px 28px; overflow: hidden; }
.hero-decor { position: absolute; top: 50%; width: 120px; height: 280px; transform: translateY(-50%); color: var(--oro); opacity: 0.28; pointer-events: none; }
.hero-decor-sx { left: 4%; }
.hero-decor-dx { right: 4%; transform: translateY(-50%) scaleX(-1); }
@media (max-width: 1100px) { .hero-decor { width: 90px; height: 220px; opacity: 0.22; } }
@media (max-width: 800px) { .hero-decor { display: none; } }
.hero-tisane .titolo-wrap { position: relative; display: inline-block; padding: 16px 50px; }
.hero-tisane .titolo-wrap::before, .hero-tisane .titolo-wrap::after { content: ''; position: absolute; width: 26px; height: 26px; border-color: var(--oro); border-style: solid; opacity: 0.6; }
.hero-tisane .titolo-wrap::before { top: 0; left: 0; border-width: 1px 0 0 1px; }
.hero-tisane .titolo-wrap::after { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
@media (max-width: 600px) { .hero-tisane .titolo-wrap { padding: 14px 26px; } .hero-tisane .titolo-wrap::before, .hero-tisane .titolo-wrap::after { width: 18px; height: 18px; } }
.hero-tisane h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.4rem, 5.5vw, 3.8rem); line-height: 1; margin: 0; font-weight: 500; letter-spacing: 2px; font-style: italic; }
.hero-tisane .eyebrow-wrap { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; }
.hero-tisane .eyebrow-wrap::before, .hero-tisane .eyebrow-wrap::after { content: ''; width: 30px; height: 1px; background: var(--oro); opacity: 0.5; }
.hero-tisane .sottotitolo { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1rem, 1.8vw, 1.15rem); color: var(--testo-soft); max-width: 620px; line-height: 1.6; margin: 22px auto 0; padding: 0 20px; }
.deco-sep { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px auto; color: var(--oro); }
.deco-sep::before, .deco-sep::after { content: ''; width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--oro), transparent); }
.deco-sep svg { width: 20px; height: 20px; }
@media (max-width: 600px) { .hero-tisane { padding: 100px 20px 30px; min-height: auto; } .deco-sep::before, .deco-sep::after { width: 40px; } }
.search-box { max-width: 600px; width: 100%; margin: 30px auto 0; position: relative; }
.search-box input { width: 100%; padding: 16px 20px 16px 52px; border: 1px solid rgba(201,162,39,0.35); border-radius: 40px; font-size: 1rem; font-family: 'Lato', sans-serif; background: white; color: var(--testo); outline: none; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(43,36,25,0.04); }
.search-box input:focus { border-color: var(--oro); box-shadow: 0 0 0 4px rgba(201,162,39,0.1), 0 6px 20px rgba(43,36,25,0.06); }
.search-box::before { content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8861F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>"); background-size: contain; background-repeat: no-repeat; }
.search-hint { text-align: center; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.85rem; color: var(--testo-soft); margin-top: 10px; }
.categorie { display: flex; justify-content: center; gap: 12px; padding: 22px 15px; flex-wrap: wrap; background: var(--panna-caldo); border-top: 1px solid rgba(201,162,39,0.15); border-bottom: 1px solid rgba(201,162,39,0.15); position: sticky; top: 78px; z-index: 1500; }
.cat-wrap { position: relative; display: inline-block; }
.categoria-btn { padding: 11px 24px; border: 1px solid var(--oro); background: transparent; color: var(--testo); border-radius: 25px; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 0.68rem; letter-spacing: 2.2px; text-transform: uppercase; transition: all 0.35s ease; position: relative; display: inline-flex; align-items: center; gap: 8px; }
.categoria-btn:hover, .categoria-btn.attivo { background: var(--oro); color: var(--panna); box-shadow: 0 6px 16px rgba(201,162,39,0.28); transform: translateY(-1px); }
.categoria-btn.attivo:hover { transform: translateY(-1px); }
.categoria-btn .freccia { display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 0.3s ease; margin-left: 2px; }
.cat-wrap.aperto .categoria-btn .freccia { transform: rotate(-135deg) translateY(-2px); }
.dropdown { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); background: var(--panna); border: 1px solid var(--oro); border-radius: 18px; padding: 8px; min-width: 180px; box-shadow: 0 12px 32px rgba(43,36,25,0.15); opacity: 0; pointer-events: none; transition: all 0.25s ease; z-index: 1600; display: flex; flex-direction: column; gap: 4px; }
.cat-wrap.aperto .dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown-btn { padding: 11px 22px; border: none; background: transparent; color: var(--testo); font-family: 'Montserrat', sans-serif; font-size: 0.66rem; letter-spacing: 2.2px; text-transform: uppercase; text-align: center; cursor: pointer; border-radius: 12px; transition: all 0.25s ease; white-space: nowrap; }
.dropdown-btn:hover { background: var(--panna-caldo); color: var(--oro-scuro); }
.dropdown-btn.attivo { background: var(--oro); color: var(--panna); }
@media (max-width: 600px) { .categorie { top: 68px; padding: 16px 12px; gap: 8px; } .categoria-btn { padding: 8px 14px; font-size: 0.6rem; letter-spacing: 1.2px; } .dropdown { min-width: 160px; } .dropdown-btn { padding: 10px 18px; font-size: 0.6rem; letter-spacing: 1.8px; } }
.contenitore { max-width: 1100px; margin: 0 auto; padding: 50px 24px 90px; }
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px; }
.scheda { background: var(--panna-caldo); border: 1px solid rgba(201,162,39,0.25); overflow: hidden; cursor: pointer; transition: all 0.5s ease; display: flex; flex-direction: column; position: relative; opacity: 0; transform: translateY(20px); animation: fadeUp 0.7s ease forwards; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.scheda::before, .scheda::after { content: ''; position: absolute; width: 14px; height: 14px; border-color: var(--oro); border-style: solid; opacity: 0; transition: all 0.4s ease; z-index: 2; }
.scheda::before { top: 6px; left: 6px; border-width: 1px 0 0 1px; transform: translate(-4px, -4px); }
.scheda::after { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; transform: translate(4px, 4px); }
.scheda:hover::before, .scheda:hover::after, .scheda:focus-visible::before, .scheda:focus-visible::after { opacity: 0.8; transform: translate(0, 0); }
.scheda:hover, .scheda:focus-visible { transform: translateY(-8px); box-shadow: 0 22px 48px rgba(43,36,25,0.14); border-color: var(--oro); }
.scheda-img { height: 210px; background: white; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; color: var(--oro); overflow: hidden; padding: 18px; position: relative; }
.scheda-img::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 1px; background: linear-gradient(to right, transparent, var(--oro), transparent); opacity: 0.5; }
.scheda-img img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.6s ease; }
.scheda:hover .scheda-img img, .scheda:focus-visible .scheda-img img { transform: scale(1.05); }
.scheda-scaffale { position: absolute; top: 12px; right: 12px; min-width: 38px; height: 38px; padding: 0 8px; background: var(--oro); color: var(--panna); font-family: 'Montserrat', sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.5px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(43,36,25,0.2); border: 2px solid var(--panna); z-index: 3; pointer-events: none; }
@media (max-width: 600px) { .scheda-scaffale { top: 8px; right: 8px; min-width: 32px; height: 32px; font-size: 0.82rem; } }
.scheda-body { padding: 26px 26px 28px; flex: 1; display: flex; flex-direction: column; }
.scheda-body h3 { font-size: 1.35rem; margin-bottom: 8px; color: var(--testo); font-weight: 500; letter-spacing: 0.3px; font-family: 'Cormorant Garamond', serif; transition: color 0.3s ease; }
.scheda:hover .scheda-body h3, .scheda:focus-visible .scheda-body h3 { color: var(--oro-scuro); }
.scheda-body .nome-scientifico { font-style: italic; font-size: 0.82rem; color: var(--testo-soft); margin-bottom: 16px; font-family: 'Cormorant Garamond', serif; letter-spacing: 0.3px; }
.scheda-body .breve { font-size: 0.92rem; color: var(--testo-soft); margin-bottom: 18px; flex: 1; line-height: 1.6; font-style: italic; font-family: 'Cormorant Garamond', serif; }
.badge { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--oro-scuro); padding: 0; font-family: 'Montserrat', sans-serif; font-size: 0.6rem; letter-spacing: 2.5px; text-transform: uppercase; align-self: flex-start; font-weight: 500; }
.badge::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
.messaggio-iniziale { max-width: 780px; margin: 0 auto; padding: 20px 24px 80px; text-align: center; animation: fadeUp 0.8s ease; }
.messaggio-iniziale .ornamento { color: var(--oro); margin: 0 auto 32px; display: block; width: 60px; height: 60px; opacity: 0.85; }
.messaggio-iniziale h2 { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(1.7rem, 3.5vw, 2.3rem); font-weight: 500; color: var(--testo); margin-bottom: 24px; line-height: 1.3; letter-spacing: 0.5px; }
.messaggio-iniziale .lead { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.15rem; color: var(--testo-soft); line-height: 1.85; margin-bottom: 40px; max-width: 620px; margin-left: auto; margin-right: auto; }
.messaggio-iniziale .invito { font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 3.5px; text-transform: uppercase; color: var(--oro-scuro); margin-bottom: 20px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 14px; }
.messaggio-iniziale .invito::before, .messaggio-iniziale .invito::after { content: ''; width: 40px; height: 1px; background: var(--oro); opacity: 0.5; }
.messaggio-iniziale .categorie-descrizione { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; color: var(--testo); line-height: 1.9; max-width: 580px; margin: 0 auto 36px; }
.messaggio-iniziale .categorie-descrizione em { font-style: italic; color: var(--oro-scuro); font-weight: 500; }
.messaggio-iniziale .nota-finale { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1rem; color: var(--testo-soft); margin-top: 32px; }
@media (max-width: 600px) { .messaggio-iniziale { padding: 10px 20px 60px; } .messaggio-iniziale .ornamento { width: 50px; height: 50px; margin-bottom: 24px; } .messaggio-iniziale .lead { font-size: 1rem; } .messaggio-iniziale .categorie-descrizione { font-size: 1rem; } }
.dettaglio { display: none; max-width: 800px; margin: 0 auto; padding: 50px 24px 90px; opacity: 0; transition: opacity 0.4s ease; scroll-margin-top: 100px; }
.dettaglio.visibile { display: block; opacity: 1; animation: fadeInDet 0.6s ease forwards; }
@keyframes fadeInDet { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.dettaglio .indietro { background: none; border: none; color: var(--oro-scuro); font-family: 'Montserrat', sans-serif; font-size: 0.7rem; letter-spacing: 2.2px; text-transform: uppercase; cursor: pointer; margin-bottom: 32px; padding: 10px 0; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.dettaglio .indietro::before { content: '←'; transition: transform 0.3s ease; display: inline-block; }
.dettaglio .indietro:hover { color: var(--oro); }
.dettaglio .indietro:hover::before { transform: translateX(-4px); }
.dettaglio .titolo-riga { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.dettaglio .titolo-riga h2 { color: var(--testo); font-size: clamp(2rem, 4.5vw, 2.8rem); font-weight: 500; margin-bottom: 0; font-style: italic; letter-spacing: 0.5px; line-height: 1.1; }
.scaffale-dettaglio { display: inline-flex; align-items: center; gap: 6px; background: var(--oro); color: var(--panna); padding: 5px 14px; border-radius: 20px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; box-shadow: 0 3px 10px rgba(201,162,39,0.35); white-space: nowrap; }
.scaffale-dettaglio::before { content: 'Scaffale'; font-weight: 500; letter-spacing: 1px; opacity: 0.9; margin-right: 2px; }
.dettaglio .scientifico { font-style: italic; color: var(--testo-soft); margin-bottom: 32px; font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; letter-spacing: 0.5px; }
.dettaglio .hero-img { width: 100%; height: 380px; background: white; border: 1px solid rgba(201,162,39,0.3); display: flex; align-items: center; justify-content: center; font-size: 5rem; color: var(--oro); margin-bottom: 36px; overflow: hidden; padding: 30px; position: relative; }
.dettaglio .hero-img::before, .dettaglio .hero-img::after { content: ''; position: absolute; width: 24px; height: 24px; border-color: var(--oro); border-style: solid; opacity: 0.6; }
.dettaglio .hero-img::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.dettaglio .hero-img::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.dettaglio .hero-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dettaglio .info-box { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
.info-item { background: var(--panna-caldo); border: 1px solid rgba(201,162,39,0.25); padding: 26px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: all 0.4s ease; position: relative; }
.info-item::before { content: ''; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 24px; height: 1px; background: var(--oro); opacity: 0.4; }
.info-item:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(43,36,25,0.08); border-color: var(--oro); }
.info-item .icona { width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: var(--oro); }
.info-item .icona svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.1; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.info-item .valore { font-size: 0.92rem; color: var(--testo); font-weight: 400; letter-spacing: 0.5px; font-family: 'Lato', sans-serif; line-height: 1.4; }
.info-item .etichetta { font-family: 'Montserrat', sans-serif; font-size: 0.6rem; letter-spacing: 2.2px; text-transform: uppercase; color: var(--oro-scuro); font-weight: 500; margin-bottom: -4px; }
@media (max-width: 600px) { .dettaglio .info-box { grid-template-columns: 1fr; } .info-item { flex-direction: row; gap: 18px; text-align: left; padding: 18px 22px; } .info-item::before { display: none; } .info-item .icona { width: 34px; height: 34px; flex-shrink: 0; } .info-item .valore { font-size: 0.95rem; } .info-item .etichetta { margin-bottom: 0; } }
.nutrizione { background: var(--panna-caldo); border: 1px solid rgba(201,162,39,0.25); border-radius: 4px; padding: 22px 26px; margin-bottom: 30px; }
.nutrizione-titolo { font-family: 'Montserrat', sans-serif; font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase; color: var(--oro-scuro); margin-bottom: 16px; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.nutrizione-titolo::before { content: ''; display: inline-block; width: 20px; height: 1px; background: var(--oro); }
.nutrizione-tabella { width: 100%; border-collapse: collapse; font-family: 'Lato', sans-serif; font-size: 0.88rem; }
.nutrizione-tabella tr { border-bottom: 1px solid rgba(201,162,39,0.15); }
.nutrizione-tabella tr:last-child { border-bottom: none; }
.nutrizione-tabella td { padding: 8px 0; color: var(--testo); }
.nutrizione-tabella td:first-child { color: var(--testo-soft); }
.nutrizione-tabella td:last-child { text-align: right; font-weight: 500; color: var(--testo); }
.nutrizione-tabella tr.sottototale td:first-child { padding-left: 16px; font-style: italic; }
.dettaglio h4 { color: var(--oro-scuro); margin: 40px 0 16px; font-family: 'Montserrat', sans-serif; font-size: 0.7rem; letter-spacing: 3.5px; text-transform: uppercase; font-weight: 500; display: flex; align-items: center; gap: 12px; }
.dettaglio h4::before { content: ''; display: inline-block; width: 20px; height: 1px; background: var(--oro); }
.dettaglio p { margin-bottom: 18px; color: var(--testo); line-height: 1.85; }
.dettaglio ul { margin-left: 22px; margin-bottom: 18px; list-style: none; }
.dettaglio li { margin-bottom: 8px; color: var(--testo); position: relative; padding-left: 16px; }
.dettaglio li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); opacity: 0.7; }
.badge-row { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; align-items: flex-start; margin: 8px 0 26px; padding: 0 0 24px; border-bottom: 1px solid rgba(201,162,39,0.25); }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 90px; color: var(--testo-soft); }
.badge-icon { width: 46px; height: 46px; display: block; }
.badge-item span { font-family: 'Montserrat', sans-serif; font-size: 0.62rem; letter-spacing: 1.2px; text-transform: lowercase; color: var(--testo-soft); text-align: center; line-height: 1.3; }
@media (max-width: 600px) { .badge-row { gap: 14px; } .badge-item { width: 72px; } .badge-icon { width: 40px; height: 40px; } }
.vuoto { text-align: center; padding: 80px 20px; color: var(--testo-soft); font-style: italic; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; }
footer { background: var(--testo); color: var(--panna); padding: 100px 24px 50px; text-align: center; }
footer h2 { color: var(--panna); }
footer p { color: var(--panna-caldo); }
footer .linea-oro { background: var(--oro-chiaro); }
footer .eyebrow { color: var(--oro-chiaro); }
.contatti { margin: 40px 0 20px; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; letter-spacing: 1px; line-height: 2.2; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.contatti a { color: var(--panna); display: inline-flex; align-items: center; justify-content: center; margin: 6px 0; }
.contatti a:hover { color: var(--oro-chiaro); }
.contatti a svg { color: var(--oro-chiaro); flex-shrink: 0; margin-right: 10px; }
footer .btn-oro { border-color: var(--oro-chiaro); color: var(--panna); margin-top: 30px; }
footer .btn-oro:hover { background: var(--oro-chiaro); color: var(--testo); }
.btn-oro { display: inline-block; background: transparent; color: var(--testo); border: 1px solid var(--oro); padding: 16px 40px; font-family: 'Montserrat', sans-serif; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; margin-top: 36px; transition: all 0.35s ease; cursor: pointer; }
.btn-oro:hover { background: var(--oro); color: var(--panna); }
.footer-bottoni { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.footer-bottoni .btn-oro { margin-top: 0; }
.social-bottoni { display: flex; gap: 16px; justify-content: center; margin: 30px 0 10px; }
.social-bottoni a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--oro-chiaro); color: var(--oro-chiaro); transition: all 0.3s ease; text-decoration: none; }
.social-bottoni a:hover { background: var(--oro-chiaro); color: var(--testo); transform: translateY(-3px); }
.social-bottoni a svg { width: 22px; height: 22px; }
.copyright { margin-top: 60px; font-size: 0.75rem; color: var(--panna-caldo); letter-spacing: 1px; line-height: 1.8; }
.copyright a { color: var(--panna-caldo); }
.copyright a:hover { color: var(--oro-chiaro); }
@media (max-width: 600px) { .footer-bottoni { flex-direction: column; align-items: stretch; gap: 12px; } .footer-bottoni .btn-oro { text-align: center; width: 100%; } }
.foglia { position: fixed; top: -80px; height: auto; animation-name: cadere; animation-timing-function: linear; animation-iteration-count: infinite; pointer-events: none !important; user-select: none; z-index: 500; opacity: 0.55; }
.foglia:nth-child(1) { left: 8%;  width: 28px; animation-duration: 19s; animation-delay: 0s;   --sway1: 40px;  --sway2: -50px; --sway3: 45px;  --sway4: -30px; }
.foglia:nth-child(2) { left: 20%; width: 34px; animation-duration: 23s; animation-delay: 3s;   --sway1: -35px; --sway2: 55px;  --sway3: -40px; --sway4: 25px;  }
.foglia:nth-child(3) { left: 35%; width: 26px; animation-duration: 21s; animation-delay: 7s;   --sway1: 50px;  --sway2: -30px; --sway3: 60px;  --sway4: -45px; }
.foglia:nth-child(4) { left: 48%; width: 32px; animation-duration: 25s; animation-delay: 12s;  --sway1: -45px; --sway2: 40px;  --sway3: -35px; --sway4: 50px;  }
.foglia:nth-child(5) { left: 60%; width: 30px; animation-duration: 20s; animation-delay: 5s;   --sway1: 55px;  --sway2: -45px; --sway3: 35px;  --sway4: -40px; }
.foglia:nth-child(6) { left: 72%; width: 36px; animation-duration: 24s; animation-delay: 15s;  --sway1: -50px; --sway2: 60px;  --sway3: -45px; --sway4: 30px;  }
.foglia:nth-child(7) { left: 84%; width: 27px; animation-duration: 18s; animation-delay: 9s;   --sway1: 45px;  --sway2: -55px; --sway3: 40px;  --sway4: -35px; }
.foglia:nth-child(8) { left: 94%; width: 31px; animation-duration: 22s; animation-delay: 20s;  --sway1: -40px; --sway2: 50px;  --sway3: -55px; --sway4: 45px;  }
@keyframes cadere { 0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.55; } 25% { transform: translateY(25vh) translateX(var(--sway1, 45px)) rotate(90deg); } 50% { transform: translateY(50vh) translateX(var(--sway2, -50px)) rotate(180deg); } 75% { transform: translateY(75vh) translateX(var(--sway3, 50px)) rotate(270deg); } 90% { opacity: 0.55; } 100% { transform: translateY(110vh) translateX(var(--sway4, -30px)) rotate(360deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .foglia { animation-duration: 35s !important; opacity: 0.35 !important; } }
.whatsapp-flottante { position: fixed; bottom: 100px; right: 24px; z-index: 1900; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(37,211,102,0.4); text-decoration: none; }
.whatsapp-flottante:hover { transform: scale(1.1); color: white; }
.whatsapp-flottante svg { width: 28px; height: 28px; fill: currentColor; }
.beddy-bar-fissa { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1950; background: var(--panna); border-top: 1px solid var(--oro); padding: 18px 20px; box-shadow: 0 -6px 20px rgba(43,36,25,0.12); display: flex; justify-content: center; align-items: center; }
.beddy-bar-fissa beddy-bar { width: 100%; max-width: 1100px; display: block; }
@media (max-width: 600px) { body { padding-bottom: 120px; } .beddy-bar-fissa { padding: 12px 12px; } .contenitore { padding: 40px 16px 70px; } .griglia { grid-template-columns: 1fr; gap: 20px; } }

/* ============================================================
   PULSANTE TORNA SU
   ============================================================ */
.btn-torna-su {
  position: fixed;
  bottom: 180px;
  right: 24px;
  z-index: 1900;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.9);
  color: var(--panna);
  border: 1px solid var(--oro-chiaro);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(43, 36, 25, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

.btn-torna-su.visibile {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.btn-torna-su:hover {
  background: var(--oro-scuro);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 20px rgba(201, 162, 39, 0.4);
}

.btn-torna-su svg {
  width: 22px;
  height: 22px;
}

@media (max-width: 600px) {
  .btn-torna-su {
    bottom: 160px;
    right: 16px;
    width: 42px;
    height: 42px;
  }
}

/* ============================================================
   REVEAL CONTENUTO (dopo caricamento CSS)
   ============================================================ */
#contenitore, .dettaglio, .messaggio-iniziale, .categorie {
  opacity: 1;
}