/* Portada de Pizzería Malandra (index.html de cada idioma) */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20AB,U+20AD-20C0,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Permanent Marker"; src: url("../fonts/permanent-marker.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Fuentes de marca (cuando tengas licencia web): quitá los comentarios
@font-face { font-family: "Salted"; src: url("../fonts/Salted.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Also Sans"; src: url("../fonts/AlsoSans.woff2") format("woff2"); font-display: swap; } */
:root { --rojo:#AD1E1F; --crema:#F9F8F2;
  --f-titulo:"Salted","Permanent Marker","Arial Black",Impact,sans-serif;
  --f-texto:"Also Sans","Archivo",system-ui,sans-serif; }
* { box-sizing: border-box; }
body { margin:0; font-family:var(--f-texto); font-stretch:110%; background:var(--crema); color:var(--rojo); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
main { min-height:100svh; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr auto; }
img { height:auto; }
.side { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:56px 24px; text-decoration:none; overflow:hidden; transition:flex .3s; }
.side--sc { background:var(--rojo); color:var(--crema); }
.side--ba { background:var(--crema); color:var(--rojo); }
.side img.logo { width:min(80%, 460px); height:auto; }
.side h2 { font-family:var(--f-titulo); font-weight:400; text-transform:uppercase; font-size:clamp(36px,5vw,72px); line-height:1; margin:18px 0 12px; }
.side p { margin:0 0 28px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; font-size:13px; }
.side address { font-style:normal; font-size:16px; margin-bottom:28px; opacity:.9; }
.go { display:inline-block; border:2px solid currentColor; padding:14px 28px; border-radius:4px;
  font-weight:800; letter-spacing:.12em; text-transform:uppercase; font-size:14px; transition:background .2s,color .2s; }
.side--sc:hover .go { background:var(--crema); color:var(--rojo); }
.side--ba:hover .go { background:var(--rojo); color:var(--crema); }
.mascot { position:absolute; width:120px; bottom:24px; right:24px; transform:rotate(8deg); }
.side img.logo, .side h2 { transition:transform .3s; }
.side:hover img.logo { transform:scale(1.04) rotate(-1deg); }
.langs-top { position:fixed; top:16px; right:16px; z-index:5; display:flex; gap:4px; background:var(--crema); border:2px solid var(--rojo); border-radius:4px; padding:4px; }
.langs-top a { color:var(--rojo); text-decoration:none; font-weight:800; font-size:12px; letter-spacing:.1em; padding:4px 8px; border-radius:2px; }
.langs-top a[aria-current] { background:var(--rojo); color:var(--crema); }
footer { grid-column:1/-1; text-align:center; padding:18px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; background:var(--rojo); color:var(--crema); border-top:2px solid var(--crema); }
@media (max-width:760px) { main { grid-template-columns:1fr; } .side { min-height:50svh; } .mascot { display:none; } }

/* ---- contenido de la portada ---- */
.wrap { max-width:1100px; margin:0 auto; padding:0 clamp(16px,4vw,48px); }
.about { padding:clamp(64px,9vw,120px) 0; background:var(--crema); color:var(--rojo); }
.about .eyebrow { font-weight:800; text-transform:uppercase; letter-spacing:.18em; font-size:13px; margin:0 0 16px; }
.about h1, .about h2 { font-family:var(--f-titulo); font-weight:400; text-transform:uppercase; font-size:clamp(34px,5.5vw,72px); line-height:.95; margin:0 0 28px; overflow-wrap:break-word; }
.about h2 { margin-top:clamp(56px,8vw,96px); }
.about__text { max-width:760px; font-size:18px; line-height:1.6; color:#2A0B0B; }
.about__text p { margin:0 0 16px; }
.locs { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px; }
.loc { border:2px solid var(--rojo); border-radius:4px; padding:clamp(24px,3vw,36px); }
.loc--sc { background:var(--rojo); color:var(--crema); }
.loc h3 { font-family:var(--f-titulo); font-weight:400; text-transform:uppercase; font-size:clamp(26px,3vw,38px); line-height:1; margin:0 0 14px; }
.loc p, .loc address { margin:0 0 8px; font-style:normal; font-size:16px; }
.loc__rating { font-weight:800; }
.loc__type { font-weight:800; text-transform:uppercase; letter-spacing:.12em; font-size:12px !important; }
.loc a { color:inherit; }
.loc .go { margin-top:16px; text-decoration:none; }
.loc--sc .go:hover { background:var(--crema); color:var(--rojo); }
.loc--ba .go:hover { background:var(--rojo); color:var(--crema); }
.faves { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:10px; }
.faves li { border:2px solid var(--rojo); border-radius:999px; padding:8px 18px; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase; }
.faq { max-width:820px; }
.faq details { border-bottom:2px solid var(--rojo); }
.faq summary { cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative; font-weight:800; font-size:clamp(17px,2vw,20px); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:28px; font-weight:400; transition:transform .2s; }
.faq details[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq details p { margin:0 0 20px; font-size:17px; line-height:1.6; color:#2A0B0B; }
@media (max-width:760px) { .locs { grid-template-columns:1fr; } }

.skip { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--crema); color: var(--rojo); padding: 12px 18px; font-weight: 800; }
.skip:focus { left: 16px; top: 16px; }
.story { max-width: 760px; font-size: 18px; line-height: 1.6; color: #2A0B0B; }
.story p { margin: 0 0 16px; }
.site-footer { background: var(--rojo); color: var(--crema); padding: 40px clamp(16px,4vw,48px); text-align: center; font-size: 14px; }
.site-footer nav { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px; }
.site-footer a { color: inherit; font-weight: 700; }
.site-footer p { margin: 0; opacity: .8; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }