/* ============================================================
   ELS PORXOS — CAPA DE DISEÑO
   Prefijo .px-  ·  CSS puro + 12 líneas de IntersectionObserver
   Concepto: fotografía a sangre; cabecera y tipografía sobreimpresas
   e integradas en la imagen mediante degradados.
   ============================================================ */

/* ============================================================
   1. CABECERA — integrada sobre la foto arriba, sólida al bajar
   Por DEFECTO es sólida (la de siempre). El JS añade .px-sobre-foto
   mientras el centinela del inicio está en pantalla. Si el JS no
   corre, la cabecera se queda sólida: degradación segura.
   ============================================================ */
.w3-top{transition:background-color .28s ease, box-shadow .28s ease}
.px-sobre-foto,
.px-sobre-foto .w3-bar,
.px-sobre-foto .w3-container{background:transparent!important;box-shadow:none!important}
/* Degradado propio: funde la cabecera con la foto */
.px-sobre-foto::before{content:"";position:absolute;inset:0;z-index:-1;
	background:linear-gradient(180deg,rgba(18,13,10,.74) 0%,rgba(18,13,10,.44) 55%,rgba(18,13,10,0) 100%)}
.px-sobre-foto .menufront,
.px-sobre-foto .w3-bar-item,
.px-sobre-foto .w3-button,
.px-sobre-foto .icono,
.px-sobre-foto .icono-xl{color:#fff!important}
/* El CTA de reserva conserva su color: es lo único que debe destacar */
.px-sobre-foto .w3-theme-l6{background:#982119!important;color:#fff!important}
/* Idiomas y teléfono: filete fino en vez de caja blanca */
.px-sobre-foto .w3-theme-l3,
.px-sobre-foto .w3-theme-l4,
.px-sobre-foto .w3-theme-l5{background:transparent!important;color:#fff!important;
	border:1px solid rgba(255,255,255,.45);border-radius:2px}
.px-sobre-foto .w3-theme-l4{border-color:#fff;background:rgba(255,255,255,.14)!important}
.px-sobre-foto .w3-theme-l5:hover{background:rgba(255,255,255,.16)!important}
/* Logo: blanco solo mientras la cabecera va sobre la foto */
.px-logo-blanco{display:none}
.px-sobre-foto .px-logo-color{display:none}
.px-sobre-foto .px-logo-blanco{display:inline-block}
/* Centinela: marca el tramo en que la cabecera va integrada */
.px-centinela{position:absolute;top:0;left:0;width:1px;height:220px;pointer-events:none}

/* ============================================================
   2. HERO DE PORTADA — foto a sangre con paneo lento
   ============================================================ */
.px-hero{position:relative;min-height:100svh;overflow:hidden;background:#120d0a;display:flex}
.px-hero-fotos{position:absolute;inset:0}
.px-hero-fotos img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
	will-change:transform,opacity}
.px-hero-fotos img:nth-child(1){animation:px-a 40s infinite}
.px-hero-fotos img:nth-child(2){animation:px-b 40s infinite 8s}
.px-hero-fotos img:nth-child(3){animation:px-b 40s infinite 16s}
.px-hero-fotos img:nth-child(4){animation:px-b 40s infinite 24s}
.px-hero-fotos img:nth-child(5){animation:px-b 40s infinite 32s}
/* La primera arranca VISIBLE: es el LCP y no puede esperar a la animación */
@keyframes px-a{0%{opacity:1;transform:scale(1.05)}18%{opacity:1}23%{opacity:0}
	95%{opacity:0;transform:scale(1.16)}100%{opacity:1;transform:scale(1.05)}}
@keyframes px-b{0%{opacity:0;transform:scale(1.14)}3%{opacity:1}18%{opacity:1}
	23%{opacity:0;transform:scale(1.03)}100%{opacity:0}}
.px-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(180deg,rgba(18,13,10,.62) 0%,rgba(18,13,10,.34) 26%,
	rgba(18,13,10,.52) 58%,rgba(18,13,10,.86) 100%)}

.px-hero-txt{position:relative;z-index:2;width:100%;align-self:flex-end;
	padding:0 6vw clamp(56px,9vh,96px);max-width:1180px;text-align:left}
/* Pozo de sombra: eleva el contraste del peor píxel sin dibujar una caja */
.px-hero-txt::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;pointer-events:none;
	background:radial-gradient(ellipse 70% 62% at 32% 62%,rgba(12,8,6,.66) 0%,
		rgba(12,8,6,.44) 48%,rgba(12,8,6,0) 80%)}
.px-hero-txt *{text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)}
.px-eyebrow{color:#f0d9a8;font-family:var(--font-texto);font-size:13px;letter-spacing:.18em;
	text-transform:uppercase;margin:0 0 20px}
.px-hero h1{font-family:var(--font-titulares);color:#fff;font-weight:400;line-height:1.05;
	letter-spacing:-.02em;font-size:clamp(2rem,4.9vw,4.05rem);margin:0 0 22px;
	max-width:17ch;text-wrap:balance}
.px-hero h1 em{font-style:italic;color:#f0d9a8}
.px-sub{font-family:var(--font-texto);color:#f2ece6;font-size:clamp(1rem,1.5vw,1.22rem);
	max-width:58ch;margin:0 0 34px;line-height:1.6}
.px-cta{display:flex;gap:14px;flex-wrap:wrap}
.px-btn{display:inline-block;padding:15px 32px;font-family:var(--font-texto);font-size:15px;
	letter-spacing:.03em;text-decoration:none;border:1px solid transparent;
	transition:background .18s,color .18s,border-color .18s}
.px-btn-1{background:#982119;color:#fff}
.px-btn-1:hover,.px-btn-1:focus-visible{background:#7a1a14}
.px-btn-2{border-color:rgba(255,255,255,.7);color:#fff}
.px-btn-2:hover,.px-btn-2:focus-visible{background:#fff;color:#1c1613}
/* Si el banner de cookies va a salir (PHP lo sabe), se reserva su hueco */
body.px-con-banner .px-hero-txt{padding-bottom:calc(clamp(56px,9vh,96px) + 150px)}

/* ============================================================
   3. CARTAS Y MENÚS — foto fija propia por página
   ============================================================ */
.px-carta{position:relative;min-height:100svh;background:#120d0a}
.px-carta-foto{position:fixed;inset:0;z-index:0}
.px-carta-foto img{width:100%;height:100%;object-fit:cover}
.px-carta-foto::after{content:"";position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(14,10,8,.74) 0%,rgba(14,10,8,.56) 30%,rgba(14,10,8,.64) 100%)}
.px-carta-cont{position:relative;z-index:1;padding:24px 5vw clamp(56px,9vh,96px)}
/* Panel semitransparente: el contenido contrasta y la foto sigue viéndose */
.px-panel{max-width:860px;margin:0 auto;padding:clamp(38px,5vw,64px) clamp(26px,4vw,54px);
	background:rgba(16,11,9,.60);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}

/* Marco de la carta, en blanco — mismas piezas, tinta blanca */
.px-marco{position:relative;padding:56px 42px}
.px-marco span{position:absolute;pointer-events:none}
.px-marco .px-esq{width:67px;height:60px;background-repeat:no-repeat;background-size:100% 100%}
.px-marco .px-tl{top:0;left:0;background-image:url("../img/Filigrana-Superior-Izquierda-blanco.webp")}
.px-marco .px-tr{top:0;right:0;background-image:url("../img/Filigrana-Superior-Derecha-blanco.webp")}
.px-marco .px-bl{bottom:0;left:0;background-image:url("../img/Filigrana-Inferior-Izquierda-blanco.webp")}
.px-marco .px-br{bottom:0;right:0;background-image:url("../img/Filigrana-Inferior-Derecha-blanco.webp")}
.px-marco .px-h{left:67px;right:67px;height:24px;background-repeat:repeat-x;background-size:auto 100%;
	background-image:url("../img/Marco-Superior-Inferior-blanco.webp")}
.px-marco .px-arriba{top:0}
.px-marco .px-abajo{bottom:0}
.px-marco .px-v{top:60px;bottom:60px;width:24px;background-repeat:repeat-y;background-size:100% auto;
	background-image:url("../img/Marco-Izquierdo-Derecho-blanco.webp")}
.px-marco .px-izq{left:0}
.px-marco .px-der{right:0}

.px-panel h1{font-family:var(--font-titulares);color:#fff;font-weight:400;text-align:center;
	font-size:clamp(1.9rem,4vw,3rem);letter-spacing:.04em;margin:0 0 14px}
.px-sep{display:block;margin:0 auto 34px;max-width:180px}
.px-panel h2{font-family:var(--font-titulares);color:#f0d9a8;font-weight:400;text-align:center;
	font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:.16em;text-transform:uppercase;
	margin:40px 0 20px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.22)}
.px-plato{display:flex;align-items:baseline;gap:14px;padding:9px 0}
.px-plato .px-n{color:#fff;font-family:var(--font-texto);font-size:1.02rem;line-height:1.4}
.px-plato .px-guia{flex:1;border-bottom:1px dotted rgba(255,255,255,.3);transform:translateY(-4px)}
.px-plato .px-p{color:#f0d9a8;font-family:var(--font-titulares);font-size:1.05rem;
	white-space:nowrap;font-variant-numeric:tabular-nums}
.px-vacia{color:#f2ece6;text-align:center;padding:24px 0;font-family:var(--font-texto)}
/* Breadcrumb sobre la foto */
.px-migas{position:relative;z-index:1;padding:calc(92px + 2vh) 5vw 0}
.px-migas nav{max-width:860px;margin:0 auto}
.px-migas a,.px-migas span{color:#e8ded2;font-size:14px;text-decoration:none}
.px-migas a:hover,.px-migas a:focus-visible{color:#fff;text-decoration:underline}

/* ============================================================
   4. RESPONSIVE
   ============================================================ */
@media (max-width:768px){
	.px-hero-txt{padding:0 7vw clamp(48px,9vh,88px)}
	.px-btn{width:100%;text-align:center}
	body.px-con-banner .px-hero-txt{padding-bottom:calc(48px + 168px)}
	.px-marco{padding:38px 22px}
	.px-marco .px-esq{width:42px;height:38px}
	.px-marco .px-h{left:42px;right:42px;height:16px}
	.px-marco .px-v{top:38px;bottom:38px;width:16px}
	.px-carta-cont{padding:20px 4vw 60px}
	.px-migas{padding:calc(84px + 2vh) 4vw 0}
	.px-panel{padding:30px 18px}
	.px-plato{flex-wrap:wrap;gap:6px}
	.px-plato .px-guia{display:none}
	.px-plato .px-p{margin-left:auto}
}

/* ============================================================
   5. ACCESIBILIDAD — sin movimiento: primera foto fija, todo legible
   ============================================================ */
@media (prefers-reduced-motion:reduce){
	.px-hero-fotos img{animation:none!important;opacity:0}
	.px-hero-fotos img:first-child{opacity:1;transform:none}
	.w3-top{transition:none}
}