/* Alba C. Paz, fotografia. 15/10/2026 : palette d'Alba « granate, blanc i negre, com a molt un gris fosc ».
   Pro et net, mais vivant ; les photos gardent la vedette. Thème clair uniquement. */
:root{
  --blanco:#ffffff; --hueso:#f6f4f2; --negro:#141414; --gris:#3a3836; --gris2:#77726e; --linea:#e7e3df;
  --granate:#7b1e2b; --granate2:#5e1520;
  --sans:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:Georgia, "Times New Roman", serif;
  color-scheme:only light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;color:var(--negro);background:var(--blanco);font:400 16px/1.6 var(--sans);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--granate)}
.envoltura{max-width:1320px;margin-left:auto;margin-right:auto;padding-left:28px;padding-right:28px}
.saut{position:absolute;left:-999px;top:8px;background:var(--negro);color:#fff;padding:8px 14px;border-radius:6px;z-index:60}
.saut:focus{left:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* en-tête */
.cab{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:22px;padding:14px 28px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:baseline;gap:9px;text-decoration:none;margin-right:auto;line-height:1}
.marca b{font:800 23px/1 var(--sans);letter-spacing:-.04em;color:var(--negro)}
.marca i{font:italic 400 17px/1 var(--serif);color:var(--granate)}
.menu{display:flex;gap:2px}
.menu a{color:var(--negro);text-decoration:none;font-size:14.5px;padding:7px 11px;border-radius:999px;transition:background .2s,color .2s}
.menu a:hover{background:var(--hueso);color:var(--granate)}
.menu a[aria-current="page"]{color:var(--granate);font-weight:700}
.menu-btn{display:none;align-items:center;gap:8px;font:700 14px/1 var(--sans);background:none;border:1.5px solid var(--negro);border-radius:999px;padding:8px 13px;color:var(--negro);cursor:pointer}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:14px;height:2px;background:currentColor;position:relative}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-5px}.menu-btn span::after{top:5px}
.idiomas{display:flex;gap:2px;border:1.5px solid var(--negro);border-radius:999px;padding:2px}
.idiomas a{font:700 11.5px/1 var(--sans);letter-spacing:.06em;color:var(--negro);text-decoration:none;padding:6px 8px;border-radius:999px}
.idiomas a[aria-current]{background:var(--negro);color:#fff}
.apercu{position:fixed;right:14px;bottom:14px;z-index:40;background:var(--granate);color:#fff;font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.18)}

/* boutons */
.boton{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;border:1.5px solid var(--negro);
  color:var(--negro);text-decoration:none;font:700 15px/1 var(--sans);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.boton:hover{background:var(--negro);color:#fff}
.boton svg{width:18px;height:18px}
.boton--lleno{background:var(--granate);border-color:var(--granate);color:#fff}
.boton--lleno:hover{background:var(--negro);border-color:var(--negro)}
.boton--claro{border-color:#fff;color:#fff}
.boton--claro:hover{background:#fff;color:var(--granate)}

/* accueil */
.portada{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;max-width:1320px;margin:0 auto;padding:44px 28px 40px;min-height:calc(100vh - 70px)}
.lugar{font:700 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gris2);margin:0 0 18px}
.nombre{margin:0;font:800 clamp(64px,10.4vw,168px)/.86 var(--sans);letter-spacing:-.065em;color:var(--negro)}
.nombre span{display:block}
.nombre span+span{color:var(--granate)}
.oficio{margin:16px 0 0;font:800 clamp(28px,3.8vw,56px)/1 var(--sans);letter-spacing:-.045em;color:var(--gris)}
.oficio em{font:italic 400 .8em/1 var(--serif);letter-spacing:0;color:var(--granate)}
.frase{max-width:36ch;font-size:19px;line-height:1.5;margin:26px 0 30px;color:var(--gris)}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.portada-foto{margin:0;position:relative}
.portada-foto img{width:100%;border-radius:3px;box-shadow:0 30px 60px -30px rgba(20,20,20,.45)}
.portada-foto::after{content:"";position:absolute;inset:auto -14px -14px auto;width:42%;height:30%;border:2px solid var(--granate);border-radius:3px;z-index:-1}

.puertas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:30px;padding-bottom:70px}
.puerta{display:flex;flex-direction:column;text-decoration:none;color:var(--negro);border:1px solid var(--linea);border-radius:4px;overflow:hidden;background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.puerta:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(20,20,20,.4)}
.puerta-img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--hueso)}
.puerta-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.puerta:hover .puerta-img img{transform:scale(1.04)}
.puerta-txt{display:flex;flex-direction:column;gap:6px;padding:18px 20px 22px}
.puerta-txt b{font:800 24px/1.05 var(--sans);letter-spacing:-.035em}
.puerta-txt span{color:var(--gris);font-size:15px}
.puerta-txt i{font-style:normal;font-weight:700;color:var(--granate);margin-top:6px}

.tira{display:flex;gap:10px;overflow:hidden;padding:16px 0;background:var(--negro);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tira span{flex:none;height:112px;border-radius:2px;overflow:hidden;opacity:.92}
.tira img{height:112px;width:auto}

/* pages intérieures */
.pag-cab{padding-top:64px;padding-bottom:10px}
.pag-cab h1,.sobre h1,.legal h1{margin:0 0 14px;font:800 clamp(44px,6.4vw,96px)/.92 var(--sans);letter-spacing:-.055em;color:var(--negro)}
.pag-cab h1::after{content:"";display:block;width:64px;height:4px;background:var(--granate);margin-top:22px}
.pag-cab p{max-width:58ch;margin:18px 0 0;color:var(--gris);font-size:18px}
.sous-nav{display:flex;flex-wrap:wrap;gap:8px;padding-top:26px;padding-bottom:6px}
.sous-nav a{font:700 14px/1 var(--sans);padding:10px 16px;border-radius:999px;border:1.5px solid var(--negro);color:var(--negro);text-decoration:none;transition:background .2s,color .2s,border-color .2s}
.sous-nav a small{font-weight:400;opacity:.6;margin-left:3px}
.sous-nav a:hover{background:var(--granate);border-color:var(--granate);color:#fff}
.sous-nav .sous-nav-prints{border-color:var(--granate);color:var(--granate)}
.bloque{padding-top:56px;padding-bottom:30px}
.bloque-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 30px;flex-wrap:wrap;margin-bottom:26px;border-bottom:1px solid var(--linea);padding-bottom:18px}
.bloque-cab h2{margin:0;font:800 clamp(30px,3.6vw,50px)/1 var(--sans);letter-spacing:-.045em}
.bloque-cab p{margin:0;max-width:54ch;color:var(--gris);font-size:16.5px}
.expo{color:var(--granate);font-weight:700}

/* grille de photos, légende sous la photo */
.muro{list-style:none;margin:0;padding:0;columns:4 240px;column-gap:18px}
.pieza{break-inside:avoid;margin:0 0 22px}
.pieza a{display:block;overflow:hidden;border-radius:2px;background:var(--hueso)}
.pieza img{width:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pieza a:hover img,.pieza a:focus-visible img{transform:scale(1.03)}
.pieza-pie{margin:9px 0 0;font-size:13.5px;line-height:1.35;color:var(--negro)}
.pieza-pie b{font-weight:700}
.pieza-pie i{font-style:normal;color:var(--gris2)}

/* prints */
.prints{background:var(--granate);color:#fff;padding:70px 0 80px;margin-top:50px}
.prints .bloque-cab{border-color:rgba(255,255,255,.3)}
.prints .bloque-cab h2{color:#fff}
.prints .bloque-cab p{color:rgba(255,255,255,.9)}
.prints .muro{columns:5 180px}
.prints .pieza a{background:var(--granate2)}
.prints .pieza-pie{color:#fff}.prints .pieza-pie i{color:rgba(255,255,255,.75)}
.prints .boton{margin-top:14px}

/* vidéo */
.video-marco{position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;background:#111}
.video-marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:#111 center/cover no-repeat;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#fff}
.video-play::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.35);transition:background .2s}
.video-play:hover::before{background:rgba(0,0,0,.2)}
.video-btn,.video-play small{position:relative}
.video-btn{display:inline-flex;align-items:center;gap:10px;background:var(--granate);padding:15px 24px;border-radius:999px;font:700 16px/1 var(--sans)}
.video-btn svg{width:20px;height:20px;fill:#fff}
.video-play small{font-size:12.5px;opacity:.85}
.videos{display:grid;gap:34px 28px}
@media (min-width:900px){.videos{grid-template-columns:1fr 1fr}}
.video-item{margin:0}
.video-item figcaption{margin-top:12px;color:var(--gris);font-size:16px}
.redes-lista{margin:0 0 18px;padding-left:18px}
.redes-botones{display:flex;flex-wrap:wrap;gap:12px;margin:0}

/* qui sóc */
.sobre{padding:70px 0 90px}
.sobre-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.sobre-foto{margin:0;transform:rotate(-2.5deg);background:#fff;padding:14px 14px 54px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);max-width:440px}
.sobre p{font-size:18px;line-height:1.6;max-width:56ch;margin:0 0 16px;color:var(--gris)}
.material{font:700 13px/1.4 var(--sans)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--granate)!important;margin-top:24px!important}
.sobre blockquote{margin:26px 0 0;font:italic 400 26px/1.3 var(--serif);color:var(--granate);max-width:30ch}

/* bande « Parlem » */
.parlem{background:var(--negro);color:#fff;padding:54px 0}
.parlem-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.parlem p{margin:0;font:italic 400 clamp(24px,3vw,38px)/1.2 var(--serif);max-width:28ch}
.parlem .boton--claro:hover{color:var(--negro)}

/* contact */
.contacto{padding-top:34px;padding-bottom:90px}
.pictos{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,300px));gap:14px}
.pictos a{display:grid;grid-template-columns:44px 1fr;column-gap:12px;align-items:center;padding:16px;border-radius:8px;border:1.5px solid var(--negro);color:var(--negro);text-decoration:none;transition:border-color .2s,color .2s}
.pictos a:hover{border-color:var(--granate);color:var(--granate)}
.pictos svg{grid-row:span 2;width:40px;height:40px}
.pictos b{font-size:16.5px;overflow-wrap:anywhere}
.pictos span{font-size:13.5px;color:var(--gris2)}
.formulario{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;max-width:880px}
.formulario p{margin:0}
.formulario .ancho{grid-column:1 / -1}
.formulario label{display:block;font:700 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px;color:var(--gris2)}
.formulario input,.formulario select,.formulario textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--negro);background:#fff;border:1.5px solid var(--linea);border-radius:6px;padding:13px 14px}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{outline:2px solid var(--granate);outline-offset:-1px;border-color:var(--granate)}
.envio{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.envio small{color:var(--gris2)}
.trampa{position:absolute!important;left:-9999px}
.aviso{padding:13px 16px;border-radius:8px;font-weight:700;margin:0 0 20px}
.aviso--ok{background:#e4f3ea;color:#1f6b3d}
.aviso--ko{background:#f6e3e5;color:var(--granate)}

/* avís legal */
.legal{padding:70px 28px 90px;max-width:820px}
.legal p{font-size:17px}

/* pied */
.pie{background:var(--negro);color:#cfcac6;padding:44px 0;border-top:1px solid #2a2a2a}
.pie-in{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:baseline;justify-content:space-between}
.pie p{margin:0;font-size:14px}
.pie a{color:#fff}
.pie-marca b{font:800 22px/1 var(--sans);letter-spacing:-.04em;color:#fff}
.pie-marca i{font:italic 400 16px/1 var(--serif);color:#d8a3ab;margin-left:6px}

/* visionneuse */
.caja{position:fixed;inset:0;z-index:80;background:rgba(14,14,14,.95);display:flex;align-items:center;justify-content:center;padding:40px 70px}
.caja[hidden]{display:none}
.caja-fig{margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
.caja-fig img{max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;border-radius:2px}
.caja-fig figcaption{color:#ece8e4;font-size:14.5px;text-align:center}
.caja button{position:absolute;background:none;border:0;color:#fff;cursor:pointer;font:300 46px/1 var(--sans);padding:10px 16px;opacity:.8}
.caja button:hover{opacity:1}
.caja-x{top:12px;right:14px;font-size:30px!important}
.caja-ant{left:8px;top:50%;transform:translateY(-50%)}
.caja-sig{right:8px;top:50%;transform:translateY(-50%)}

/* tablette / mobile */
@media (max-width:1000px){
  .menu-btn{display:inline-flex}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--linea);padding:8px 16px 16px;box-shadow:0 14px 30px -18px rgba(0,0,0,.3)}
  .menu.abierto{display:flex}
  .menu a{font-size:17px;padding:13px 8px;border-radius:0;border-bottom:1px solid var(--linea)}
  .puertas{grid-template-columns:1fr}
}
@media (max-width:900px){
  .portada{grid-template-columns:1fr;min-height:0;padding-top:28px;gap:30px}
  .portada-foto{max-width:520px}
  .sobre-in{grid-template-columns:1fr;gap:36px}
  .sobre-foto{max-width:340px;margin:0 auto}
}
@media (max-width:600px){
  .envoltura,.cab{padding-left:16px;padding-right:16px}
  .portada{padding-left:16px;padding-right:16px}
  .cab{gap:10px}
  .marca i{display:none}
  .muro,.prints .muro{columns:2;column-gap:10px}
  .pieza{margin-bottom:16px}
  .pieza-pie{font-size:12.5px}
  .formulario{grid-template-columns:1fr}
  .caja{padding:50px 8px}
  .caja-ant,.caja-sig{top:auto!important;bottom:8px;transform:none!important}
  .frase{font-size:17px}
  .pag-cab{padding-top:40px}
  .legal{padding-left:16px;padding-right:16px}
}