/* GOSA — estilos compartidos de las paginas de contenido (menu, sedes, catering, historia).
   Creadas 19-oct-2026 por la auditoria GEO.

   Por que paginas aparte y no mas secciones de index.html: el menu de index.html vive en un
   objeto JavaScript (const MENU) y se renderiza en el cliente. Los crawlers de los motores
   generativos NO ejecutan JavaScript, asi que ese menu es invisible para ellos. Estas paginas
   sirven el mismo contenido como HTML real.

   No se importa el CSS de index.html (esta inline, 350+ lineas, acoplado al SPA de pedidos).
   Esto es el subconjunto de tokens de marca que necesitan las paginas de contenido.
   Tokens y tipografia: BRAND_ESSENTIALS_SUMMARY.md seccion 3.2 y .claude/rules/color-palette.md */

@font-face{font-family:'PP Fragment Glare';src:url('PPFragment-GlareLight.otf') format('opentype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'PP Fragment Glare';src:url('PPFragment-GlareRegular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Fragment Glare';src:url('PPFragment-GlareRegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'PP Fragment Glare';src:url('PPFragment-GlareExtraBold.otf') format('opentype');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'PP Fragment Text';src:url('PPFragment-TextRegular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Fragment Text';src:url('PPFragment-TextRegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}

:root{
  --rojo:#9E0100;--florencia:#710609;--milan:#C2453D;--toscana:#F9F6E4;--catania:#E1CCB7;
  --calabria:#B89F81;--bari:#BA8247;--bolsano:#87AD70;--napoles-g:#436A2B;--black:#1a1a1a;--white:#fff;
  --fd:'PP Fragment Glare','DM Serif Display',serif;
  --fb:'PP Fragment Text',system-ui,-apple-system,sans-serif;
  --h-xl:clamp(2.5rem,1.8rem + 3vw,4.5rem);
  --h-lg:clamp(1.9rem,1.4rem + 2.2vw,3.2rem);
  --h-md:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  --h-sm:clamp(1.1rem,1rem + .5vw,1.4rem);
  --b:clamp(.9375rem,.875rem + .2vw,1.0625rem);
  --b-sm:clamp(.8125rem,.78rem + .15vw,.9rem);
  --gm:clamp(1.15rem,.5rem + 2.5vw,3rem);
  --sp:clamp(2.5rem,1.8rem + 2.5vw,4.5rem);
  --r:10px;
  --maxw:1120px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--fb);background:var(--toscana);color:var(--black);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--rojo);text-decoration:none}
a:hover{text-decoration:underline}

/* --- header --- */
.hd{position:sticky;top:0;z-index:50;background:var(--toscana);border-bottom:1px solid rgba(26,26,26,.09);padding:.85rem var(--gm);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hd__logo{display:flex;align-items:center;gap:.35em;color:var(--rojo);text-decoration:none;flex-shrink:0}
.hd__logo:hover{text-decoration:none}
.hd__logo span{font-weight:700;font-size:1.05rem;letter-spacing:.2em;text-transform:uppercase}
.hd__logo svg polygon{fill:var(--rojo)}
.hd__nav{display:flex;gap:clamp(.7rem,.4rem + .9vw,1.6rem);align-items:center;flex-wrap:wrap}
.hd__nav a{font-size:.75rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--black)}
.hd__nav a:hover{color:var(--rojo);text-decoration:none}
.hd__nav a[aria-current=page]{color:var(--rojo);border-bottom:2px solid var(--rojo)}
.hd__cta{background:var(--rojo);color:var(--toscana)!important;padding:.5em 1.1em;border-radius:4px}
.hd__cta:hover{background:var(--florencia);text-decoration:none}

/* --- hero de pagina --- */
.ph{padding:var(--sp) var(--gm) calc(var(--sp) * .55);max-width:var(--maxw);margin:0 auto}
.ph__label{font-size:var(--b-sm);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--rojo);margin-bottom:.6rem}
.ph h1{font-family:var(--fd);font-size:var(--h-xl);line-height:1.02;letter-spacing:-.02em;margin-bottom:1rem;max-width:18ch}
.ph h1 em{font-style:italic;color:var(--milan)}
.ph__lead{font-size:clamp(1.02rem,.95rem + .4vw,1.3rem);max-width:62ch;color:#3a3a3a}
.ph__lead strong{font-weight:700;color:var(--black)}

.bars{display:flex;align-items:center;gap:.6rem;margin-bottom:1.6rem}
.bars span{height:3px;background:var(--rojo);border-radius:2px}
.bars .l{width:52px}.bars .s{width:18px}.bars .d{width:6px;height:6px;border-radius:50%}

/* --- bloques --- */
main{max-width:var(--maxw);margin:0 auto;padding:0 var(--gm) var(--sp)}
section{margin-bottom:var(--sp)}
h2{font-family:var(--fd);font-size:var(--h-lg);line-height:1.08;letter-spacing:-.015em;margin-bottom:.5rem}
h3{font-family:var(--fd);font-size:var(--h-md);line-height:1.15;margin-bottom:.35rem}
h4{font-size:var(--h-sm);font-weight:700;margin-bottom:.3rem}
p{font-size:var(--b);margin-bottom:.9rem;max-width:72ch}
.sec__intro{color:#4a4a4a;margin-bottom:1.6rem;max-width:68ch}

/* --- grilla de items --- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}
.item{background:var(--white);border:1px solid rgba(26,26,26,.08);border-radius:var(--r);padding:1.15rem 1.25rem;display:flex;flex-direction:column}
.item h3{font-family:var(--fd);font-size:1.3rem;margin-bottom:.3rem}
.item__desc{font-size:var(--b-sm);color:#555;line-height:1.55;margin-bottom:.75rem;flex-grow:1}
.item__price{font-weight:700;font-size:1.02rem;color:var(--rojo);margin-top:auto}
.item__tag{display:inline-block;font-size:.65rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:var(--bolsano);color:var(--white);padding:.25em .7em;border-radius:3px;margin-bottom:.5rem;align-self:flex-start}
.item__note{font-size:var(--b-sm);color:var(--bari);margin-top:.4rem}

/* --- listas de ingredientes / opciones --- */
.opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:.6rem 1.4rem;list-style:none;margin:.4rem 0 1.2rem}
.opts li{font-size:var(--b-sm);padding-left:1rem;position:relative;color:#444}
.opts li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--rojo);border-radius:1px}
.opts li b{color:var(--black);font-weight:600}

/* --- tarjeta de sede --- */
.sede{background:var(--white);border:1px solid rgba(26,26,26,.08);border-radius:var(--r);padding:1.5rem;margin-bottom:1.1rem}
.sede h3{color:var(--rojo)}
.sede dl{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.1rem;font-size:var(--b-sm);margin:.9rem 0}
.sede dt{font-weight:700;color:var(--black);white-space:nowrap}
.sede dd{color:#4a4a4a}
.sede__links{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem}

/* --- botones --- */
.btn{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.92rem;letter-spacing:.02em;padding:.75em 1.6em;border-radius:4px;transition:background .2s,border-color .2s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn--p{background:var(--rojo);color:var(--toscana)}.btn--p:hover{background:var(--milan)}
.btn--o{background:transparent;color:var(--rojo);border:1.5px solid rgba(158,1,0,.35)}.btn--o:hover{border-color:var(--rojo)}
.btn--wa{background:#25D366;color:#fff}.btn--wa:hover{background:#1da851}

/* --- FAQ --- */
.faq{border-top:1px solid rgba(26,26,26,.12)}
.faq__q{border-bottom:1px solid rgba(26,26,26,.12);padding:1.15rem 0}
.faq__q h3{font-family:var(--fb);font-size:1.02rem;font-weight:700;margin-bottom:.4rem}
.faq__q p{font-size:var(--b-sm);color:#4a4a4a;margin-bottom:0}

/* --- callout --- */
.callout{background:var(--rojo);color:var(--toscana);border-radius:var(--r);padding:1.8rem;margin:1.6rem 0}
.callout h2,.callout h3{color:var(--toscana)}
.callout p{color:rgba(249,246,228,.88)}
.callout .btn--p{background:var(--toscana);color:var(--rojo)}
.callout .btn--p:hover{background:var(--white)}

/* --- footer --- */
.ft{background:var(--black);color:var(--toscana);padding:var(--sp) var(--gm);font-size:var(--b-sm)}
.ft__in{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:2rem}
.ft a{color:rgba(249,246,228,.78)}
.ft a:hover{color:var(--toscana)}
.ft h4{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--calabria);margin-bottom:.8rem}
.ft ul{list-style:none;display:grid;gap:.45rem}
.ft__bottom{max-width:var(--maxw);margin:2.2rem auto 0;padding-top:1.3rem;border-top:1px solid rgba(249,246,228,.16);color:rgba(249,246,228,.55);font-size:.78rem}

@media(max-width:620px){
  .hd{padding:.7rem var(--gm)}
  .hd__nav{gap:.65rem}
  .hd__nav a{font-size:.68rem}
  .sede dl{grid-template-columns:1fr;gap:.15rem .5rem}
  .sede dt{margin-top:.5rem}
}