/* Plantilla "Restaurante / mariscos" — oscura y editorial: negro cálido, dorado, titulares en
   Oranienbaum, texto en Libre Baskerville, fotografía a sangre y animaciones de revelado.
   Vive en el CSS de cada página (el cliente la edita). /assets/sitio/demo/restaurante = fotos de muestra de la plantilla.
   Para otro tono basta con cambiar --brand / --pm-gold aquí. */
:root {
    --brand: #d9b06c;
    --pm-bg: #0d0d0d;
    --pm-bg2: #141414;
    --pm-gold: #d9b06c;
    --pm-cream: #f5efe4;
    --pm-text: #ebe5d9;
    --pm-mute: rgba(235, 229, 217, .66);
    --pm-display: "Oranienbaum", Georgia, "Times New Roman", serif;
    --pm-body: "Libre Baskerville", Georgia, "Times New Roman", serif;
}
body.sitio { background: var(--pm-bg); color: var(--pm-text); font-family: var(--pm-body); font-size: 15px; line-height: 1.85; }
body.sitio h1, body.sitio h2, body.sitio h3, body.sitio h4 { font-family: var(--pm-display); font-weight: 400; }
body.sitio p { margin: 0 0 1.1rem; }

/* ------------------------------------------------------------ encabezado */
.sitio-nav { position: fixed; left: 0; right: 0; top: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .88), rgba(13, 13, 13, 0)); border: 0; backdrop-filter: none; }
.sitio-nav.is-scrolled { background: rgba(13, 13, 13, .94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(217, 176, 108, .18); }
.sitio-nav__in { max-width: 1440px; padding: 1.5rem 3rem; transition: padding .35s ease; }
.sitio-nav.is-scrolled .sitio-nav__in { padding: .65rem 3rem; }
.sitio-nav__brand { flex-direction: column; gap: 0; font-family: var(--pm-display); font-weight: 400; font-size: 2.2rem; letter-spacing: .16em; text-transform: uppercase; color: #fff; line-height: 1; text-align: center; transition: font-size .35s ease; }
.sitio-nav__brand::after { content: "Mariscos · Parrilla · Bar"; font-size: .6rem; letter-spacing: .4em; color: var(--pm-gold); margin-top: .6rem; }
.sitio-nav.is-scrolled .sitio-nav__brand { font-size: 1.45rem; }
.sitio-nav.is-scrolled .sitio-nav__brand::after { display: none; }
.sitio-nav__links a { color: var(--pm-gold); font-weight: 700; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; opacity: 1; }
.sitio-nav__links a:hover, .sitio-nav__links a[aria-current="page"] { color: #fff; }
.sitio-nav__toggle { color: var(--pm-gold); }
@media (min-width: 861px) {
    .sitio-nav__menu { display: contents; margin: 0; }
    .sitio-nav__links { flex: 1; gap: 1.8rem; }
    .sitio-nav__links--izq { order: 1; justify-content: flex-start; }
    .sitio-nav__brand { order: 2; padding: 0 2rem; }
    .sitio-nav__links--der { order: 3; justify-content: flex-end; }
}
@media (max-width: 860px) {
    .sitio-nav { background: rgba(13, 13, 13, .96); }
    .sitio-nav__in, .sitio-nav.is-scrolled .sitio-nav__in { padding: .8rem 1.2rem; }
    .sitio-nav__menu { background: #0d0d0d; border-color: rgba(217, 176, 108, .2); }
    .sitio-nav__brand { font-size: 1.3rem; align-items: flex-start; }
    .sitio-nav__brand::after { display: none; }
}
.sitio-foot { background: #070707; color: var(--pm-mute); font-size: .8rem; letter-spacing: .06em; }
.sitio-foot a { color: var(--pm-gold); }

/* ------------------------------------------------------------ piezas comunes */
.pm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.pm-sec { padding: 7rem 0; position: relative; }
.pm-sec--alt { background: var(--pm-bg2); }
.pm-sec--cream { background: var(--pm-cream); color: #1d1913; }
.pm-sec--cream .pm-lead { color: rgba(29, 25, 19, .72); }
.pm-sec--cream .pm-h2 { color: #1d1913; }
.pm-kicker { display: block; font-family: var(--pm-display); font-size: .95rem; letter-spacing: .36em; text-transform: uppercase; color: var(--pm-gold); margin-bottom: 1.1rem; }
.pm-sec--cream .pm-kicker { color: #9a7228; }
.pm-h1 { font-size: clamp(2.9rem, 6.4vw, 5.6rem); line-height: 1.03; color: #fff; margin: 0 0 1.6rem; letter-spacing: .005em; }
.pm-h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.1; color: #fff; margin: 0 0 1.4rem; }
.pm-sub { font-family: var(--pm-display); font-size: 1.7rem; color: var(--pm-gold); margin: 0 0 2.4rem; }
.pm-lead { font-size: 1rem; color: var(--pm-mute); max-width: 540px; }
.pm-center { text-align: center; }
.pm-center .pm-lead { margin-left: auto; margin-right: auto; }
.pm-orn { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 0 auto 2.6rem; color: var(--pm-gold); }
.pm-orn::before, .pm-orn::after { content: ""; width: 72px; height: 1px; background: linear-gradient(90deg, transparent, var(--pm-gold)); }
.pm-orn::after { background: linear-gradient(270deg, transparent, var(--pm-gold)); }
.pm-orn i { font-size: .8rem; }
.pm-btn { display: inline-block; padding: 1.05rem 2.4rem; background: var(--pm-gold); color: #1a1409; font-family: var(--pm-body); font-size: .7rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--pm-gold); cursor: pointer; transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease; }
.pm-btn:hover { background: #ecc98c; border-color: #ecc98c; transform: translateY(-3px); box-shadow: 0 14px 30px rgba(217, 176, 108, .25); }
.pm-btn--line { background: transparent; color: var(--pm-gold); }
.pm-btn--line:hover { background: var(--pm-gold); color: #1a1409; }
.pm-sec--cream .pm-btn--line { color: #1d1913; border-color: #1d1913; }
.pm-sec--cream .pm-btn--line:hover { background: #1d1913; color: #fff; }

/* ------------------------------------------------------------ portada */
.pm-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--pm-bg); }
.pm-hero__img { position: absolute; right: 0; top: 0; width: 64%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: pmKen 24s ease-out both; }
.pm-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--pm-bg) 0%, var(--pm-bg) 33%, rgba(13, 13, 13, .6) 52%, rgba(13, 13, 13, 0) 80%), linear-gradient(0deg, var(--pm-bg) 0%, rgba(13, 13, 13, 0) 24%); }
.pm-hero__txt { position: relative; z-index: 2; max-width: 1440px; width: 100%; margin: 0 auto; padding: 9rem 3rem 6rem; }
.pm-hero__txt .pm-h1 { max-width: 9.5em; }
.pm-scroll { position: absolute; z-index: 2; bottom: 1.8rem; left: 3rem; font-size: .62rem; letter-spacing: .34em; text-transform: uppercase; color: var(--pm-mute); display: flex; align-items: center; gap: 1rem; }
.pm-scroll::before { content: ""; width: 54px; height: 1px; background: var(--pm-gold); transform-origin: left; animation: pmLinea 2.4s ease-in-out infinite; }
@keyframes pmKen { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes pmLinea { 0%, 100% { transform: scaleX(.25); } 50% { transform: scaleX(1); } }
@media (max-width: 860px) {
    .pm-hero__img { width: 100%; opacity: .5; object-position: 70% 50%; }
    .pm-hero::before { background: linear-gradient(0deg, var(--pm-bg) 6%, rgba(13, 13, 13, .55) 70%, rgba(13, 13, 13, .8)); }
    .pm-hero__txt { padding: 8rem 1.4rem 5rem; }
    .pm-scroll { left: 1.4rem; }
}

/* portada corta (páginas interiores) con foto de fondo */
.pm-cabecera { position: relative; display: grid; place-items: center; text-align: center; min-height: 52vh; padding: 9rem 1.4rem 4rem; overflow: hidden; background: var(--pm-bg) center/cover no-repeat; }
.pm-cabecera::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .7), rgba(13, 13, 13, .55) 55%, var(--pm-bg)); }
.pm-cabecera > * { position: relative; z-index: 1; }
.pm-cabecera--menu { background-image: url("/assets/sitio/demo/restaurante/sala-madera.jpg"); }
.pm-cabecera--galeria { background-image: url("/assets/sitio/demo/restaurante/copas.jpg"); }
.pm-cabecera--reservas { background-image: url("/assets/sitio/demo/restaurante/sala-azul.jpg"); }

/* ------------------------------------------------------------ dos columnas con foto */
.pm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
.pm-split--inv > :first-child { order: 2; }
@media (max-width: 860px) { .pm-split { grid-template-columns: 1fr; gap: 2.4rem; } .pm-split--inv > :first-child { order: 0; } .pm-sec { padding: 4.6rem 0; } }
.pm-foto { position: relative; margin: 0; overflow: hidden; }
.pm-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.pm-foto:hover img { transform: scale(1.05); }
.pm-foto--alta { aspect-ratio: 4 / 5; }
.pm-foto--ancha { aspect-ratio: 16 / 10; }
.pm-foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1.4rem 1.3rem; background: linear-gradient(0deg, rgba(0, 0, 0, .82), transparent); font-family: var(--pm-display); font-size: 1.25rem; color: #fff; }
.pm-foto figcaption span { display: block; font-family: var(--pm-body); font-size: .62rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--pm-gold); margin-bottom: .2rem; }
.pm-marco { position: relative; }
.pm-marco::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(217, 176, 108, .55); pointer-events: none; }

/* ------------------------------------------------------------ información (sobre crema) */
.pm-info { display: grid; gap: 3.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1100px; margin: 0 auto; padding: 0 2rem; text-align: center; }
.pm-info__ico { font-size: 1.9rem; color: #9a7228; display: block; margin-bottom: .8rem; }
.pm-info h3 { font-size: 1.35rem; letter-spacing: .14em; text-transform: uppercase; color: #1d1913; margin: 0 0 1rem; }
.pm-info .erp-datos li { justify-content: center; }
.pm-info .erp-datos i { display: none; }
.pm-info .erp-horario li { border-color: rgba(29, 25, 19, .14); }
.pm-sec--cream .erp-datos a { color: #1d1913; }
.pm-sec--cream .erp-horario li span:first-child { font-weight: 700; }

/* ------------------------------------------------------------ menú en papel oscuro */
.pm-menu { display: grid; grid-template-columns: 1.7fr 1fr; gap: 4rem; align-items: start; max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 980px) { .pm-menu { grid-template-columns: 1fr; } }
.pm-menu--full { grid-template-columns: 1fr; max-width: 1240px; }
.pm-menu .erp-menu-grid { gap: 0 3.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pm-menu .erp-menu__cat { font-family: var(--pm-display); font-size: 1.5rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--pm-gold); padding-top: 2rem; margin-bottom: .8rem; }
.pm-menu .erp-menu li { border-color: rgba(217, 176, 108, .2); padding: 1rem 0; }
.pm-menu .erp-menu__nombre { font-family: var(--pm-body); font-size: .78rem; letter-spacing: .1em; color: #fff; }
.pm-menu .erp-menu__precio { color: var(--pm-gold); font-family: var(--pm-display); font-size: 1.1rem; }
.pm-menu .erp-menu__desc { font-size: .78rem; font-style: italic; opacity: .62; line-height: 1.6; }
.pm-menu__lado { display: grid; gap: 1.6rem; position: sticky; top: 7rem; }
.pm-menu__lado .pm-foto { aspect-ratio: 4 / 3; }
.pm-nota { font-size: .72rem; font-style: italic; color: var(--pm-mute); text-align: center; max-width: 640px; margin: 3rem auto 0; line-height: 1.7; }

/* ------------------------------------------------------------ platón */
.pm-precios { list-style: none; margin: 1.8rem 0 2.2rem; padding: 0; }
.pm-precios li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid rgba(217, 176, 108, .25); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.pm-precios strong { font-family: var(--pm-display); font-weight: 400; font-size: 1.6rem; color: var(--pm-gold); letter-spacing: 0; }
.pm-platos { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.8rem; }
.pm-platos h4 { font-size: 1.05rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pm-gold); margin: 0 0 .6rem; }
.pm-platos p { font-size: .82rem; color: var(--pm-mute); line-height: 1.75; margin: 0; }
@media (max-width: 560px) { .pm-platos { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ bandas con parallax */
.pm-banda { position: relative; padding: 11rem 1.4rem; text-align: center; background: var(--pm-bg) center/cover fixed no-repeat; overflow: hidden; }
.pm-banda::before { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 8, .58); }
.pm-banda > * { position: relative; z-index: 1; }
.pm-banda--sala { background-image: url("/assets/sitio/demo/restaurante/sala-azul.jpg"); }
.pm-banda--copas { background-image: url("/assets/sitio/demo/restaurante/copas.jpg"); }
.pm-banda .pm-lead { margin-left: auto; margin-right: auto; color: rgba(255, 255, 255, .8); }
@media (max-width: 860px) { .pm-banda { background-attachment: scroll; padding: 6rem 1.4rem; } }

/* ------------------------------------------------------------ cifras y tres bloques */
.pm-tres { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1100px; margin: 3.4rem auto 0; padding: 0 2rem; text-align: center; }
.pm-tres i { font-size: 1.8rem; color: var(--pm-gold); display: block; margin-bottom: 1rem; }
.pm-tres h3 { font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 .7rem; }
.pm-tres p { color: var(--pm-mute); font-size: .88rem; margin: 0; }

/* ------------------------------------------------------------ galería */
.pm-galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 250px; gap: 12px; max-width: 1360px; margin: 0 auto; padding: 0 1rem; }
.pm-galeria .pm-foto { height: 100%; }
.pm-galeria .g-2x2 { grid-column: span 2; grid-row: span 2; }
.pm-galeria .g-2h { grid-column: span 2; }
.pm-galeria .g-2v { grid-row: span 2; }
@media (max-width: 860px) { .pm-galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; } }

/* ------------------------------------------------------------ opiniones */
.pm-quotes { display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); max-width: 1100px; margin: 3.4rem auto 0; padding: 0 2rem; }
.pm-quote { margin: 0; text-align: center; }
.pm-quote::before { content: "“"; display: block; font-family: var(--pm-display); font-size: 4.4rem; line-height: .6; color: var(--pm-gold); margin-bottom: .6rem; }
.pm-quote p { font-style: italic; font-size: 1rem; line-height: 1.9; color: var(--pm-text); }
.pm-quote footer { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--pm-gold); }

/* ------------------------------------------------------------ pie */
.pm-foot { background: #080808; padding: 6rem 0 3rem; border-top: 1px solid rgba(217, 176, 108, .2); }
.pm-foot__grid { display: grid; gap: 3.4rem; grid-template-columns: 1.3fr 1fr 1fr; max-width: 1240px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 860px) { .pm-foot__grid { grid-template-columns: 1fr; } }
.pm-foot__logo { font-family: var(--pm-display); font-size: 2rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 1rem; }
.pm-foot h4 { font-size: 1.1rem; letter-spacing: .2em; text-transform: uppercase; color: var(--pm-gold); margin: 0 0 1.2rem; }
.pm-foot p { color: var(--pm-mute); font-size: .85rem; }
.pm-foot .erp-horario li { border-color: rgba(255, 255, 255, .1); font-size: .85rem; }
.pm-foot .erp-datos { margin-bottom: 1.4rem; font-size: .85rem; }
.pm-foot__zonas { max-width: 1240px; margin: 4rem auto 0; padding: 2rem 2rem 0; border-top: 1px solid rgba(255, 255, 255, .08); text-align: center; font-size: .72rem; letter-spacing: .08em; color: rgba(235, 229, 217, .45); }

/* ------------------------------------------------------------ formulario de reservas */
.pm-reserva { display: grid; grid-template-columns: 1.15fr 1fr; gap: 5rem; max-width: 1180px; margin: 0 auto; padding: 0 2rem; align-items: start; }
@media (max-width: 900px) { .pm-reserva { grid-template-columns: 1fr; gap: 3rem; } }
.pm-reserva .sw-form { background: rgba(255, 255, 255, .03); border: 1px solid rgba(217, 176, 108, .35); border-radius: 0; padding: 2.6rem; color: var(--pm-text); gap: 1.3rem; }
.pm-reserva .sw-field label { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--pm-gold); }
.pm-reserva .sw-field input, .pm-reserva .sw-field textarea { background: #0a0a0a; border: 1px solid rgba(255, 255, 255, .16); border-radius: 0; color: #fff; font-family: var(--pm-body); color-scheme: dark; }
.pm-reserva .sw-field input:focus, .pm-reserva .sw-field textarea:focus { border-color: var(--pm-gold); box-shadow: 0 0 0 3px rgba(217, 176, 108, .18); }
.pm-reserva .sw-btn { background: var(--pm-gold); border-color: var(--pm-gold); color: #1a1409; border-radius: 0; justify-content: center; font-size: .72rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; padding: 1.1rem; }
.pm-reserva .sw-btn:hover { box-shadow: 0 14px 30px rgba(217, 176, 108, .25); }
.pm-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 520px) { .pm-fila { grid-template-columns: 1fr; } }
.pm-reserva .sitio-estado.ok { color: #9be39b; }
.pm-reserva .sitio-estado.error { color: #ff9b9b; }