/* El Nou Ramonet · Pàgina temporal "Aviat / Próximamente / Coming soon"
   Concepte: foto del plat a sang + panell de mar amb l'estampat de les estovalles.
   Prefix: px- */

@font-face{font-family:"Orelega One";src:url("../fonts/orelega-one.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Quicksand";src:url("../fonts/quicksand-var.woff2") format("woff2");font-weight:300 700;font-display:swap}

:root{
  --mar:#51b9ba;
  --tinta:#0f3239;
  --tinta-2:#0b272d;
  --corall:#d4442e;
  --corall-h:#b8361f;
  --escuma:#ffffff;
  --boira:#cfe3e2;
  --display:"Orelega One",Georgia,serif;
  --text:"Quicksand","Avenir Next","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--tinta);color:var(--escuma);font-family:var(--text);font-weight:500;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--mar);outline-offset:3px;border-radius:6px}
.px-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Disposició: foto | panell */
.px{min-height:100svh;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}

.px-photo{position:relative;overflow:hidden;background:#1b3a40}
.px-photo picture,.px-photo picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.px-photo picture img{animation:px-zoom 22s ease-out both}
.px-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,50,57,0) 55%,rgba(15,50,57,.9) 100%),linear-gradient(180deg,rgba(8,36,42,.45) 0%,rgba(8,36,42,0) 30%)}
.px-logo{position:absolute;z-index:1;top:max(28px,env(safe-area-inset-top,0px));left:max(28px,env(safe-area-inset-left,0px));width:clamp(96px,9vw,150px);height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}

.px-panel{position:relative;overflow:hidden;display:flex;align-items:center;
  background-color:var(--tinta);
  background-image:linear-gradient(rgba(15,50,57,.9),rgba(15,50,57,.94)),url("../img/patro-mari.webp");
  background-size:cover,cover;background-position:center;
  padding-block:clamp(48px,7vh,96px);
  padding-left:max(clamp(24px,4.5vw,72px),env(safe-area-inset-left,0px));
  padding-right:max(clamp(24px,4.5vw,72px),env(safe-area-inset-right,0px))}
.px-in{position:relative;z-index:1;width:100%;max-width:560px;display:grid;gap:clamp(20px,3vh,30px)}

.px-eyebrow{margin:0;font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mar)}
.px-eyebrow span{color:var(--boira);margin-inline:.35em}

/* Els tres idiomes alhora */
.px-trio{display:grid;gap:clamp(10px,1.6vh,16px)}
.px-line{margin:0;display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;gap:.9rem}
.px-tag{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--tinta);background:var(--mar);border-radius:999px;text-align:center;padding:.28rem 0;transform:translateY(-.35em)}
.px-t{font-family:var(--display);font-weight:400;line-height:1.06;text-wrap:balance;font-size:clamp(1.9rem,1.2rem + 2.3vw,3.3rem)}
.px-line:nth-child(2) .px-t{color:var(--mar)}
.px-line:nth-child(3) .px-t{color:var(--boira)}
.px-line{animation:px-up .8s cubic-bezier(.2,.7,.2,1) both}
.px-line:nth-child(2){animation-delay:.12s}
.px-line:nth-child(3){animation-delay:.24s}

.px-rope{height:6px;border:0;margin:0;width:100%;background:repeating-linear-gradient(115deg,var(--mar) 0 7px,transparent 7px 11px);opacity:.85}

.px-meanwhile{margin:0;font-size:1rem;line-height:1.6;color:var(--boira)}
.px-meanwhile i,.px-btn i{font-style:normal;color:var(--mar);margin-inline:.25em}

.px-ctas{display:flex;flex-wrap:wrap;gap:12px}
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:.8rem 1.6rem;border-radius:999px;background:var(--corall);color:#fff;font:700 1.05rem/1 var(--text);letter-spacing:.02em;text-decoration:none;border:2px solid transparent;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 12px 30px -12px rgba(212,68,46,.7)}
.px-btn:hover{background:var(--corall-h);transform:translateY(-1px)}
.px-btn i{color:rgba(255,255,255,.7)}
.px-btn svg{width:1.2em;height:1.2em}
.px-btn--line{background:transparent;border-color:rgba(255,255,255,.75);box-shadow:none;font-variant-numeric:tabular-nums}
.px-btn--line:hover{background:rgba(255,255,255,.1)}

.px-info{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:6px;border-top:1px solid rgba(255,255,255,.14)}
.px-info div{padding-top:14px}
.px-info dt{font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums}
.px-info dd{margin:.2rem 0 0;font-size:.88rem;color:var(--boira)}

.px-foot{margin:0;display:flex;gap:1.4rem;font-size:.88rem;font-weight:600}
.px-foot a{color:var(--boira);text-underline-offset:4px}
.px-foot a:hover{color:var(--escuma)}

/* Il·lustracions de les estovalles */
.px-ilu{position:absolute;pointer-events:none;height:auto;z-index:0;opacity:.95}
.px-ilu--peix{width:clamp(110px,10vw,170px);top:clamp(20px,5vh,56px);right:clamp(-30px,-1vw,-10px);transform:rotate(-8deg);animation:px-bob 8s ease-in-out infinite}
.px-ilu--pop{width:clamp(70px,5.5vw,88px);bottom:14px;right:18px;transform:rotate(10deg);animation:px-bob 9s ease-in-out -3s infinite}

@keyframes px-up{from{opacity:.001;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes px-zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes px-bob{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Mòbil i tauleta vertical */
@media (max-width:860px){
  .px{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .px-photo{height:min(46svh,420px)}
  .px-photo::after{background:linear-gradient(180deg,rgba(8,36,42,.35) 0%,rgba(8,36,42,0) 35%,rgba(15,50,57,.4) 70%,var(--tinta) 100%)}
  .px-logo{left:50%;top:auto;bottom:-6px;transform:translateX(-50%);width:112px}
  .px-panel{align-items:flex-start;padding-top:36px;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .px-in{margin-inline:auto;text-align:left}
  .px-eyebrow{text-align:center}
  .px-btn{flex:1 1 100%}
  .px-ilu--peix{display:none}
  .px-ilu--pop{width:70px;bottom:calc(18px + env(safe-area-inset-bottom,0px));right:16px}
}
@media (max-width:380px){.px-info{grid-template-columns:1fr}.px-line{grid-template-columns:2.3rem minmax(0,1fr);gap:.7rem}}