/* Pizzería El Aprendiz Del Italiano — "la boca del horno bajo el cielo del mural"
   Paleta: el azul noche con estrellas del mural de su fachada (paneles fuertes), y del logo el
   verde albahaca, el rojo ladrillo del rodillo y el filo dorado. Brasa para el brillo del fuego.
   Tipos: Caprasimo (letrero de pizzería) para títulos, Italianno para el nombre (la cursiva
   caligráfica de su logo), Karla para leer.
   Firma: la foto de portada enmarcada en el arco de ladrillo de un horno de leña, con brillo de
   brasa, y el monograma A + rodillo del logo como sello. */
:root {
  --cielo: #15203D;          /* azul noche del mural — paneles oscuros */
  --cielo-2: #1F2D55;
  --cielo-3: #0E1630;        /* pie */
  --harina: #F8F3EA;         /* fondo principal */
  --papel: #FFFDF8;          /* hoja de la carta, tarjetas */
  --albahaca: #1E6B40;       /* verde del logo (6.6:1 sobre harina) */
  --ladrillo: #A93226;       /* rojo del rodillo (6.1:1 sobre harina) */
  --ladrillo-2: #7E2419;
  --dorado: #D9A94B;         /* filo dorado del logo — solo sobre el cielo (7.6:1) */
  --brasa: #F08A4B;          /* brillo del fuego — solo sobre el cielo */
  --tinta: #231B17;
  --gris: #5A504A;           /* texto secundario sobre claro (7.3:1) */
  --crema: #F4EEE2;          /* texto claro sobre el cielo */
  --wa: #0F7A6E;             /* verde WhatsApp oscuro (5.2:1 con blanco) */
  --display: 'Caprasimo', Georgia, serif;
  --marca: 'Italianno', 'Monotype Corsiva', cursive;
  --cuerpo: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--harina); color: var(--tinta); font-family: var(--cuerpo); font-size: 1.0625rem; line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brasa); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.08; margin: 0; font-weight: 400; }
h2 { font-family: var(--display); font-size: clamp(2rem, 7.4vw, 2.9rem); margin-bottom: .7rem; color: var(--ladrillo); }
h3 { font-family: var(--display); font-size: 1.3rem; }
p { margin: 0 0 .9rem; }
svg { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
section[id] { scroll-margin-top: 8.5rem; }
@media (min-width: 960px) { section[id] { scroll-margin-top: 6rem; } }

.envoltura { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.bloque { padding: 3.8rem 0; }
.intro { color: var(--gris); max-width: 60ch; font-size: 1.1rem; }
.suave { color: var(--gris); font-size: .94em; }
.sep { display: inline-block; padding: 0 .12em; }
.monograma { width: 2.4rem; height: 2.4rem; }

/* Cielo estrellado del mural: puntos de luz + un resplandor de brasa */
.cielo {
  background-color: var(--cielo);
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 64%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 46% 12%, rgba(217,169,75,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 78%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 71% 30%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 84% 56%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 93% 14%, rgba(217,169,75,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 86%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 36% 38%, rgba(255,255,255,.55) 50%, transparent 51%);
  background-size: 260px 260px;
}

/* ── Aviso de demo (paleta neutra ajena al negocio) ─────────────────── */
.demo-banner{background:#2b2620;color:#f2ece1;text-align:center;font-size:.85rem;
  line-height:1.4;padding:.4rem .9rem;letter-spacing:.01em;border-bottom:1px solid #4a4238}
@media (min-width:640px){.demo-banner{font-size:.92rem}}
@media (max-width:639px){.demo-banner{font-size:.74rem;padding:.28rem .5rem;line-height:1.28;letter-spacing:0}}

/* ── Barra ──────────────────────────────────────────────────────────── */
.barra { position: sticky; top: 0; z-index: 50; background: var(--cielo); color: var(--crema); border-bottom: 3px solid var(--ladrillo); box-shadow: 0 3px 0 var(--albahaca); }
.barra-in { max-width: 1120px; margin: 0 auto; padding: .45rem 16px .2rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1rem .8rem; }
.marca { display: flex; align-items: center; gap: .55rem; text-decoration: none; min-width: 0; color: var(--crema); }
.marca-txt { display: grid; line-height: 1; min-width: 0; }
.marca-w { font-family: var(--marca); font-size: 2.05rem; line-height: .9; color: #fff; white-space: nowrap; }
.marca-s { font-weight: 800; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dorado); margin-top: .15rem; white-space: nowrap; }
.barra-wa { display: inline-flex; align-items: center; gap: .4rem; background: var(--wa); color: #fff; text-decoration: none; font-weight: 800; padding: .55rem .95rem; border-radius: 999px; font-size: .95rem; border: 1px solid rgba(255,255,255,.35); }
.barra-wa:hover { background: #0B6359; }
.nav { grid-column: 1 / -1; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none; margin: .1rem -6px 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: 0 0 auto; text-decoration: none; font-weight: 700; font-size: .93rem; padding: .5rem .45rem; border-radius: 6px; color: var(--crema); }
.nav a:hover { background: rgba(217,169,75,.18); color: #fff; }
@media (max-width: 959px) {
  .barra-wa { display: none; }
  .barra-in { grid-template-columns: 1fr; }
  .nav { -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent); mask-image: linear-gradient(90deg, #000 86%, transparent); padding-right: 2rem; }
}
@media (min-width: 960px) {
  .barra-in { grid-template-columns: auto 1fr auto; padding: .55rem 16px; }
  .nav { grid-column: auto; grid-row: 1; grid-column-start: 2; justify-content: flex-end; margin: 0; }
  .nav a { padding: .35rem .6rem; }
}

/* ── Botones ────────────────────────────────────────────────────────── */
.acciones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px; padding: .7rem 1.3rem; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 1.05rem; border: 2px solid transparent; }
.btn svg { width: 1.3em; height: 1.3em; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #0B6359; }
.btn-claro { background: transparent; color: #fff; border-color: rgba(244,238,226,.55); }
.btn-claro:hover { border-color: var(--dorado); color: var(--dorado); }
.btn-borde { border-color: var(--ladrillo); color: var(--ladrillo); background: transparent; }
.btn-borde:hover { background: var(--papel); }

/* ── Portada: cielo del mural + la boca del horno (firma) ───────────── */
.portada { color: var(--crema); position: relative; overflow: hidden; }
.portada::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: linear-gradient(90deg, var(--albahaca) 0 33.3%, var(--crema) 33.3% 66.6%, var(--ladrillo) 66.6%); }
.portada-in { max-width: 1120px; margin: 0 auto; padding: 1.8rem 16px 3.4rem; display: grid; gap: 2.4rem; align-items: center; }
.letrero { margin: 0 0 .9rem; font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dorado); }
.portada h1 { font-family: var(--display); font-size: clamp(2.2rem, 9vw, 3.9rem); line-height: 1.02; margin: 0 0 1rem; max-width: 14ch; color: #fff; text-wrap: balance; }
.bajada { font-size: 1.1rem; max-width: 46ch; color: #DCE0EA; }
.portada .acciones { margin: 1.3rem 0 1.1rem; }
.estado { margin: 0 0 .5rem; font-weight: 700; font-size: .95rem; }
.estado > span { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .85rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); }
.estado > span > span { text-wrap: balance; }
.estado i { width: .6rem; height: .6rem; border-radius: 50%; background: #B9B3AA; flex: 0 0 auto; }
.estado-abierto i { background: #6EDC95; box-shadow: 0 0 0 3px rgba(110,220,149,.3); }
.portada-horas { list-style: none; margin: 0; padding: 0; font-size: .98rem; color: #DCE0EA; }
.portada-horas strong { color: #fff; }

.portada-lado { display: grid; justify-items: center; }
.horno { position: relative; margin: 0; width: min(100%, 330px); padding: 14px 14px 0;
  border-radius: 999px 999px 0 0;
  /* ladrillo del arco: hiladas con junta de mortero */
  background-color: #8E3522;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 15px, rgba(40,16,10,.55) 15px 17px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(40,16,10,.45) 30px 32px);
  box-shadow: 0 0 0 3px var(--dorado), 0 0 70px 10px rgba(240,138,75,.35); }
.horno::after { content: ""; display: block; height: 16px; margin: 0 -14px; background: var(--ladrillo-2); border-top: 3px solid var(--dorado); }
.horno-boca { border-radius: 999px 999px 0 0; overflow: hidden; background: #000; }
.horno-boca img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 60%; }
.horno-sello { position: absolute; right: -18px; bottom: -14px; width: 74px; height: 74px; padding: 9px; border-radius: 50%;
  background: var(--harina); box-shadow: 0 0 0 3px var(--dorado), 0 8px 18px rgba(0,0,0,.35); }
@media (min-width: 880px) {
  .portada-in { grid-template-columns: 1.15fr .85fr; padding: 3.4rem 16px 4.6rem; gap: 3rem; }
  .portada-lado { justify-items: end; }
  .horno { width: 380px; }
}

/* ── La casa ────────────────────────────────────────────────────────── */
.casa-grid { display: grid; gap: 2.2rem; }
.casa-texto h2 { color: var(--albahaca); }
.casa-texto p { max-width: 58ch; }
.casa-medios { display: grid; grid-template-columns: 1.25fr 1fr; gap: .8rem; align-items: start; }
.casa-foto { margin: 0; }
.casa-foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; box-shadow: 0 16px 30px -14px rgba(35,27,23,.5); }
.casa-medios video { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: #000; display: block; }
.casa-medios > :only-child { grid-column: 1 / -1; }
.notas-bloque { grid-column: 1 / -1; }
.notas-tit { font-size: 1.35rem; color: var(--ladrillo); margin-bottom: 1rem; }
.notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.notas li { background: var(--papel); padding: 1.1rem 1.2rem 1rem 1.3rem; border-left: 5px solid var(--albahaca); border-radius: 4px 10px 10px 4px; display: grid; gap: .15rem; box-shadow: 0 6px 16px -10px rgba(35,27,23,.4); }
.notas strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; line-height: 1.15; color: var(--tinta); }
.notas span { color: var(--gris); }
@media (min-width: 760px) { .notas { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } }
@media (min-width: 880px) { .casa-grid { grid-template-columns: 1fr 1fr; align-items: center; gap: 2.4rem 3rem; } }

/* ── Galería ────────────────────────────────────────────────────────── */
.galeria { background: var(--papel); }
.galeria h2 { color: var(--albahaca); }
.galeria-grid { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.galeria-grid figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: var(--cielo); }
.galeria-grid img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.galeria-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem .75rem .55rem; font-weight: 700; font-size: .9rem; line-height: 1.25; color: #fff;
  background: linear-gradient(rgba(21,32,61,0), rgba(21,32,61,.9) 58%, rgba(21,32,61,.97)); }
@media (min-width: 760px) { .galeria-grid { grid-template-columns: repeat(5, 1fr); gap: .9rem; } }

/* ── La carta: hoja impresa con tricolor ────────────────────────────── */
.hoja { margin: 1.4rem 0 1.4rem; background: var(--papel); padding: 1.6rem 1.1rem 1.8rem; border-radius: 4px; position: relative;
  box-shadow: 0 1px 0 rgba(35,27,23,.06), 0 18px 34px -12px rgba(35,27,23,.28); }
.hoja::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 7px; border-radius: 4px 4px 0 0;
  background: linear-gradient(90deg, var(--albahaca) 0 33.3%, #EFE6D6 33.3% 66.6%, var(--ladrillo) 66.6%); }
.hoja-cab { text-align: center; padding: .4rem 0 1.2rem; margin-bottom: 1.4rem; border-bottom: 1px solid #E7DCCB; }
.hoja-sello { width: 3.2rem; height: 3.2rem; margin: 0 auto .3rem; }
.hoja-w { font-family: var(--marca); font-size: clamp(2.6rem, 11vw, 3.6rem); margin: 0; color: var(--tinta); line-height: .95; }
.hoja-s { font-weight: 800; font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ladrillo); margin: .35rem 0 .9rem; }
.hoja-intro { margin: 0 auto; max-width: 50ch; color: var(--gris); font-size: .98rem; }
.hoja-grupos { display: grid; gap: 1.9rem; }
.hoja-grupo h3 { font-size: 1.3rem; color: var(--ladrillo); margin-bottom: .5rem; }
.hoja-grupo-pizza h3 { color: var(--albahaca); }
.tamanos { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .9rem; }
.tamanos-nota { margin: -.4rem 0 .9rem; font-size: .92rem; color: var(--gris); font-style: italic; }
.tamanos span { padding: .22rem .7rem; border-radius: 999px; background: var(--cielo); color: #fff; font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plato-precio-tam { font-size: .86rem; font-weight: 700; }
.hoja-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.hoja-grupo li { display: grid; gap: .1rem; }
.plato { display: flex; align-items: baseline; gap: .5rem; }
.plato-nom { font-weight: 800; line-height: 1.3; }
.guia { flex: 1 1 1.5rem; min-width: 1rem; border-bottom: 2px dotted #D3C3AE; transform: translateY(-.25em); }
.plato-precio { flex: 0 1 auto; font-weight: 800; color: var(--ladrillo); text-align: right; font-variant-numeric: tabular-nums; }
.plato-desc { color: var(--gris); font-size: .95rem; line-height: 1.4; max-width: 52ch; }
.menu-nota { font-size: 1rem; color: var(--gris); max-width: 62ch; }
.menu-nota strong { color: var(--tinta); }
.menu .acciones { margin: 1rem 0 0; }
@media (max-width: 480px) {
  .plato { flex-direction: column; align-items: flex-start; gap: 0; }
  .plato-precio { text-align: left; }
  .guia { display: none; }
}
@media (min-width: 820px) {
  .hoja { padding: 2.4rem 2.6rem 2.6rem; }
  .hoja-grupos { grid-template-columns: 1fr 1fr; gap: 2.2rem 3.4rem; }
}

/* ── Reseñas ────────────────────────────────────────────────────────── */
.resenas { color: var(--crema); }
.resenas h2 { color: #fff; }
.calif { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .1rem 1rem; margin: 1rem 0 1.8rem; }
.calif-num { grid-row: span 2; font-family: var(--display); font-size: 4.4rem; line-height: .9; color: var(--dorado); }
.estrellas { color: var(--dorado); letter-spacing: .1em; font-size: 1.25rem; }
.calif-txt { color: #DCE0EA; }
.calif-txt a { color: #fff; font-weight: 800; }
.citas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.citas li { background: var(--cielo-2); border: 1px solid rgba(217,169,75,.35); border-radius: 12px; padding: 1.1rem 1.2rem 1.2rem; }
.citas .estrellas { font-size: 1.05rem; }
.citas blockquote { margin: .3rem 0 0; }
.citas p { margin: 0; font-size: 1.06rem; color: #fff; }
@media (min-width: 760px) { .citas { grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } }
@media (min-width: 1040px) { .citas { grid-template-columns: repeat(4, 1fr); } }

/* ── Visítanos ──────────────────────────────────────────────────────── */
.visitanos h2 { color: var(--albahaca); }
.fachada { margin: 1.4rem 0 0; max-width: 680px; }
.fachada img { width: 100%; height: auto; border-radius: 10px; }
.visita-grid { display: grid; gap: 1.8rem; margin-top: 1.6rem; }
.datos { margin: 0; display: grid; gap: 1rem; align-content: start; }
.datos dt { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ladrillo); font-size: .84rem; }
.datos dd { margin: 0; font-size: 1.08rem; }
.datos dd a { font-weight: 700; }
.tel { font-weight: 800; font-size: 1.35rem; color: var(--tinta); }
.horario h3 { color: var(--albahaca); }
.horario table { border-collapse: collapse; width: 100%; max-width: 420px; margin-top: .5rem; background: var(--papel); }
.horario th, .horario td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid #E7DCCB; font-weight: 400; }
.horario th { font-weight: 700; }
.horario tr.hoy { background: #F5E3C4; }
.horario tr.hoy .suave { color: var(--tinta); }
@media (min-width: 820px) { .visita-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) {
  .visitanos .envoltura { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; align-items: start; }
  .visitanos .envoltura > * { grid-column: 1; }
  .visitanos .fachada { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .visitanos .fachada img { aspect-ratio: 4 / 3; object-fit: cover; }
  .visitanos .visita-grid { grid-template-columns: 1fr; }
}
.horario td { white-space: nowrap; }

/* ── Redes ──────────────────────────────────────────────────────────── */
.redes-fila { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.redes-fila a { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; text-decoration: none; }
.redes-fila svg { width: 22px; height: 22px; }
.redes-claro a { background: var(--cielo); color: #fff; }
.redes-oscuro a, .pie .redes-oscuro a { background: var(--dorado); color: var(--cielo-3); }

/* ── Pie ────────────────────────────────────────────────────────────── */
.pie { background: var(--cielo-3); color: #E4E6EE; }
.pie-in { display: grid; gap: 1.8rem; padding-top: 2.6rem; padding-bottom: 1.4rem; }
.pie p { margin: 0 0 .35rem; }
.pie a { color: #E4E6EE; }
.pie-id a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; padding: .45rem 0; }
.pie-marca { display: flex; align-items: center; gap: .6rem; }
.pie-marca .monograma { width: 2.8rem; height: 2.8rem; }
.pie-marca .marca-w { font-size: 2.4rem; }
.pie-nombre { font-weight: 700; }
.pie-horario { list-style: none; padding: 0; margin: 0; }
.credito { text-align: center; font-size: .86rem; color: #C9CCD8; padding: 1rem 16px 5.5rem; margin: 0; border-top: 1px solid rgba(255,255,255,.12); }
.credito a { color: var(--dorado); }
@media (min-width: 820px) { .pie-in { grid-template-columns: 1.3fr 1fr; } .credito { padding-bottom: 1.4rem; } }

/* ── WhatsApp flotante ──────────────────────────────────────────────── */
.wa-flotante { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.3); border: 2px solid #fff; }
.wa-flotante svg { width: 32px; height: 32px; }
@supports (animation-timeline: scroll()) {
  .wa-flotante { animation: waIn linear both; animation-timeline: scroll(); animation-range: 0 350px; }
  @keyframes waIn { from { opacity: 0; transform: scale(.6); pointer-events: none; } to { opacity: 1; } }
}

.calif-txt a, .tel { display: inline-block; padding: .55rem 0; }

@media (max-width: 599px) {
  .portada-horas { display: none; }
  .marca-w { font-size: 1.8rem; }
  .monograma { width: 2.1rem; height: 2.1rem; }
}
@media (max-width: 400px) {
  .nav a { padding: .5rem .36rem; }
  .nav { padding-right: 0; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 599px) {
  .portada-in { gap: 1.6rem; }
  .portada .acciones { margin: 1.1rem 0 .9rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media (max-height: 480px) { .barra { position: relative; } }