/* ============================================================
   Grup Scout Parpalló — estils compartits (multipàgina)
   Paleta i tipografia: veure el pla de disseny.
   ============================================================ */

/* Tipografia allotjada al propi lloc (SIL OFL 1.1, assets/fonts/OFL-*.txt). Els fitxers són
   variables: Bricolage porta wght 200-800 i opsz 12-96; Caveat, wght 400-700.
   Bricolage va amb "optional" i precàrrega: si no arriba a temps la primera vegada, eixa pàgina
   es queda en la pila del sistema i la següent ja la té. Amb "swap", en canviar de font el text
   es repartix en altres línies i les àncores es mouen. Caveat només fa reclams d'una línia. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:optional;
  src:url("/assets/fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-display:optional;
  src:url("/assets/fonts/bricolage-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/fonts/caveat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* la cérvola real del grup, recolorable en qualsevol fons (via màscara) */
.cierva{display:inline-block;aspect-ratio:499/313;background-color:currentColor;
  -webkit-mask:url("/assets/img/cierva.png") center/contain no-repeat;
  mask:url("/assets/img/cierva.png") center/contain no-repeat}
:root{
  /* escala unificada de verds */
  --verd-nit:#1F3529;    /* fons profund, seccions fosques, footer */
  --verd:#4F683C;        /* el verd del grup, un punt més fosc: 4,7:1 amb la calcària en els dos sentits */
  --verd-fulla:#3E6B4A;  /* verd clar, acent, secció Tropa */
  --verd-boira:#6A8571;  /* verd grisós, hints */

  --roig:#A93A2C;        /* Roig Pañoleta  — acció */
  --roig-fosc:#8C2E22;
  --ocre:#C0862F;        /* Ocre Parpalló  — el traç */
  --ocre-clar:#D6A24E;   /* decoració i fons; com a text només sobre verd-nit massís */
  --ocre-llum:#F7E5C0;   /* l'ocre com a text sobre el verd del cos */
  --negre:#211C16;       /* Negre Manganès — text */
  --calcaria:#E6E0D2;    /* Calcària       — fons */
  --calcaria-2:#EFEADF;  /* plaqueta clara */
  --calcaria-3:#DBD3C2;  /* vora de pedra  */
  --vora-camp:#7F7766;   /* vora dels camps: 3:1 sobre el paper i sobre el blanc */
  --text-suau:#4A4136;   /* text secundari sobre paper */

  /* colors PROVISIONALS de secció (model estàndard — per confirmar) */
  --s-manada:#7A5C0E;
  --s-tropa:var(--verd-fulla);
  --s-escoltes:#9C3B30;
  --s-clan:#6B3550;

  /* tipografia: una família i una escala */
  --font:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mano:"Caveat","Bricolage Grotesque",cursive; /* només reclams breus i decoratius */
  --fs-xs:.875rem;
  --fs-sm:.9375rem;
  --fs-base:clamp(1.0625rem,1rem + .3vw,1.125rem);
  --fs-lg:clamp(1.125rem,1rem + .6vw,1.3rem);
  --fs-h3:clamp(1.25rem,1.1rem + .8vw,1.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 2.2vw,2.75rem);
  --fs-h1:clamp(2.25rem,1.6rem + 3.5vw,4rem);

  --max:1120px;
  --pas:clamp(3.2rem,7vw,5.4rem);
}

@media (max-width:760px){
  body{--fosc-des:68%}   /* al mòbil el contingut s'estira i el quadern cau més avall */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  /* El verd del grup es manté pla tota la primera meitat i només comença a
     enfosquir-se a partir del quadern del grup, cap al final de la pàgina.
     El punt exacte el calcula portada.js i el deixa a --fosc-des.
     Els valors d'ací són la reserva si el JS no s'executa. */
  background:var(--verd-nit);
  background-image:linear-gradient(180deg,var(--verd) 0%,var(--verd) var(--fosc-des,58%),var(--verd-nit) 100%);
  background-repeat:no-repeat;
  color:var(--calcaria-2);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
/* gra de pedra calcària, molt subtil */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- bilingüisme: valencià per defecte, castellà amb el toggle ---- */
.es{display:none}
[data-lang="es"] .va{display:none}
[data-lang="es"] .es{display:revert}

/* ---- tipografia ---- */
button,input,select,textarea{font-family:inherit}
h1,h2,h3,.display{font-weight:700;line-height:1.04;letter-spacing:-.01em;margin:0 0 .4em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 1rem;max-width:62ch}
.hand{font-family:var(--font-mano);font-weight:600;line-height:1.15}

a{color:var(--verd);text-decoration:none;font-weight:600}
a:hover,a:focus-visible{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8' viewBox='0 0 64 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q16 2 32 4 T62 4' fill='none' stroke='%23A93A2C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:100% .42em;background-position:0 100%;
}

/* ---- foc de teclat: anell blanc i fosc, perquè es veja sobre qualsevol fons ---- */
:root{--anell:0 0 0 2px #fff}
:focus-visible{outline:3px solid var(--negre);outline-offset:2px;box-shadow:var(--anell);border-radius:3px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.2rem)}
section{padding-block:var(--pas)}

/* ---- el traç: divisor amb "sempre a punt" en morse ---- */
/* codi morse: ...  .  --  .--.  .-.  .   /   .-   /   .--.  ..-  -.  -  */
.ratlla{height:24px;margin:0;border:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='424' height='24' viewBox='0 0 424 24'%3E%3Cg fill='%23C9463A'%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='20' cy='12' r='2'/%3E%3Ccircle cx='28' cy='12' r='2'/%3E%3Ccircle cx='44' cy='12' r='2'/%3E%3Crect x='58' y='10' width='12' height='4' rx='2'/%3E%3Crect x='74' y='10' width='12' height='4' rx='2'/%3E%3Ccircle cx='100' cy='12' r='2'/%3E%3Crect x='106' y='10' width='12' height='4' rx='2'/%3E%3Crect x='122' y='10' width='12' height='4' rx='2'/%3E%3Ccircle cx='140' cy='12' r='2'/%3E%3Ccircle cx='156' cy='12' r='2'/%3E%3Crect x='162' y='10' width='12' height='4' rx='2'/%3E%3Ccircle cx='180' cy='12' r='2'/%3E%3Ccircle cx='196' cy='12' r='2'/%3E%3Ccircle cx='228' cy='12' r='2'/%3E%3Crect x='234' y='10' width='12' height='4' rx='2'/%3E%3Ccircle cx='276' cy='12' r='2'/%3E%3Crect x='282' y='10' width='12' height='4' rx='2'/%3E%3Crect x='298' y='10' width='12' height='4' rx='2'/%3E%3Ccircle cx='316' cy='12' r='2'/%3E%3Ccircle cx='332' cy='12' r='2'/%3E%3Ccircle cx='340' cy='12' r='2'/%3E%3Crect x='346' y='10' width='12' height='4' rx='2'/%3E%3Crect x='370' y='10' width='12' height='4' rx='2'/%3E%3Ccircle cx='388' cy='12' r='2'/%3E%3Crect x='402' y='10' width='12' height='4' rx='2'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:min(100%,424px) auto;opacity:.9}

/* ---- botons ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1.02rem;white-space:nowrap;
  padding:.85em 1.35em;border-radius:12px 9px 13px 8px;border:2.5px solid transparent;cursor:pointer;
  font-family:inherit;line-height:1;text-align:center}
.btn-alta{background:var(--roig);color:#fff;border-color:var(--roig-fosc);box-shadow:0 2px 0 var(--roig-fosc)}
.btn-alta:hover,.btn-alta:focus-visible{background:var(--roig-fosc);background-image:none;transform:translateY(1px);box-shadow:0 1px 0 var(--roig-fosc)}
.btn-alta:focus-visible{box-shadow:var(--anell)}
.btn-ghost{background:transparent;color:var(--verd);border-color:var(--verd)}
.btn-ghost:hover,.btn-ghost:focus-visible{background:var(--verd);color:var(--calcaria-2);background-image:none}

/* ---- capçalera ---- */
.skip{position:absolute;left:-999px;top:0;background:var(--verd);color:#fff;padding:.7em 1em;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
header.top{position:sticky;top:0;z-index:40;background:var(--calcaria);
  border-bottom:2px solid var(--roig);
  transition:box-shadow .3s ease}
header.top.scrolled{box-shadow:0 6px 18px rgba(0,0,0,.08)}
.top .wrap{display:flex;align-items:center;gap:.5rem;padding-block:.5rem}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:800;
  font-size:1.06rem;color:var(--verd);line-height:1;background:none;letter-spacing:-.01em}
.brand::before{content:"";width:54px;height:34px;flex:none;
  /* insígnia oficial exportada de raw/media_1793443185275.pdf (scripts/logo/export-logo.py) */
  background:url("/assets/img/logo-parpallo-120.png") center/contain no-repeat;
  background-image:image-set(url("/assets/img/logo-parpallo-120.webp") 1x,url("/assets/img/logo-parpallo-240.webp") 2x)}
.brand small{display:block;font-weight:600;font-size:.75rem;color:var(--text-suau);letter-spacing:.02em}
.brand:hover,.brand:focus-visible{background-image:none}
.lang{display:inline-flex;align-items:center;gap:.35em;background:transparent;border:2px solid var(--verd);color:var(--verd);
  font-family:inherit;font-weight:700;font-size:.82rem;padding:.42em .6em;border-radius:9px;cursor:pointer;text-transform:uppercase;letter-spacing:.03em}
.lang:hover,.lang:focus-visible{background:var(--verd);color:var(--calcaria-2)}

/* El mòbil és la base: marca, menú desplegable i botó destacat. L'ordre visual és
   el del DOM, el mateix que recorre el tabulador: el botó de menú just abans del panell que obri. */
.top .brand{margin-right:auto}
.top .btn-alta{min-height:44px;padding:.55em .75em;font-size:.86rem}
.menu-toggle{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  background:transparent;border:2px solid var(--verd);border-radius:9px;color:var(--verd);cursor:pointer}
.menu-toggle:focus-visible,.menu-toggle[aria-expanded="true"]{background:var(--verd);color:var(--calcaria-2)}
@media (hover:hover){.menu-toggle:hover{background:var(--verd);color:var(--calcaria-2)}}
.menu-toggle svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.menu-toggle .tanca,.menu-toggle[aria-expanded="true"] .obri{display:none}
.menu-toggle[aria-expanded="true"] .tanca{display:inline}
/* tancat de base: sense JS s'obri més avall amb (scripting:none), així no hi ha cap parpelleig */
.nav-panel{display:none;position:absolute;top:100%;left:0;right:0;background:var(--calcaria);border-bottom:2px solid var(--roig);
  box-shadow:0 14px 24px rgba(18,14,8,.22);overflow-y:auto;overscroll-behavior:contain;
  max-height:calc(100vh - 4.5rem);max-height:calc(100dvh - 4.5rem)}
.menu-toggle[aria-expanded="true"] + .nav-panel{display:block}
.main-nav ul{list-style:none;margin:0;padding:0}
.main-nav a{display:flex;align-items:center;min-height:48px;padding:.4rem clamp(1.1rem,4vw,2.2rem);color:var(--negre);font-weight:600;
  font-size:1.05rem;border-bottom:1px solid var(--calcaria-3)}
.main-nav a:hover,.main-nav a:focus-visible{background-image:none;background-color:var(--calcaria-2)}
.main-nav a:focus-visible,.nav-panel .lang:focus-visible{outline-offset:-3px}
.main-nav a[aria-current]{font-weight:800;background-color:var(--calcaria-2);box-shadow:inset 5px 0 0 var(--roig)}
.nav-panel .lang{display:flex;min-height:44px;margin:.6rem clamp(1.1rem,4vw,2.2rem);padding:.4em .8em;font-size:.95rem;text-transform:none;letter-spacing:0}
.nav-panel .lbl{display:none}
.top .btn-alta[aria-current]{box-shadow:0 2px 0 var(--roig-fosc),0 0 0 2px var(--calcaria),0 0 0 4px var(--roig-fosc)}
.top .btn-alta[aria-current]:focus-visible{box-shadow:var(--anell)}
html.menu-obert .to-top{display:none}
@media (max-width:520px){.brand small{display:none}}
/* En 320 px no caben el nom i el botó destacat: queda la cérvola (el nom continua a l'aria-label). */
@media (max-width:359.98px){.top .brand>span{display:none}}
@media (min-width:1024px){
  .top .wrap{gap:.9rem;padding-block:.6rem}
  .top .brand{margin-right:0}
  .top .btn-alta{min-height:0;padding:.6em 1em;font-size:.92rem}
  .menu-toggle{display:none}
  .nav-panel,.menu-toggle[aria-expanded="true"] + .nav-panel{display:contents}
  .main-nav{margin:0 auto 0 1.1rem}
  .main-nav ul{display:flex;gap:1.1rem}
  .main-nav .nomes-panell{display:none}
  .main-nav a{display:inline;min-height:0;padding:0;border:0;font-size:.98rem}
  .main-nav a:hover,.main-nav a:focus-visible{background-color:transparent;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='8' viewBox='0 0 64 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5 Q16 2 32 4 T62 4' fill='none' stroke='%23A93A2C' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E")}
  .main-nav a:focus-visible,.nav-panel .lang:focus-visible{outline-offset:3px}
  .main-nav a[aria-current]{background-color:transparent;box-shadow:0 3px 0 var(--roig)}
  .nav-panel .lang{display:inline-flex;min-height:0;margin:0;padding:.42em .6em;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
  .nav-panel .lbl{display:inline}
  .nav-panel .lang-llarg{display:none}
}
/* Sense JavaScript: el botó no faria res, així que el menú queda sempre visible.
   Els navegadors sense (scripting) i sense JS conserven tots els enllaços al peu. */
@media (scripting:none){
  .menu-toggle,.nav-panel .lang{display:none}
}
@media (scripting:none) and (max-width:1023.98px){
  header.top{position:static}
  .top .wrap{flex-wrap:wrap}
  .nav-panel{display:block;flex-basis:100%;position:static;max-height:none;overflow:visible;background:none;border:0;box-shadow:none}
  .main-nav ul{display:flex;flex-wrap:wrap;gap:0 1rem}
  .main-nav a{min-height:44px;padding:0;border:0}
  .main-nav a[aria-current]{background-color:transparent;box-shadow:inset 0 -3px 0 var(--roig)}
}

/* ---- hero ---- */
.hero{background:var(--calcaria);position:relative;overflow:hidden}
.hero .grid{display:grid;gap:2rem}
.hero .kicker{font-family:var(--font-mano);font-size:1.5rem;color:var(--roig);transform:rotate(-2deg);margin-bottom:.2rem}
.hero .lead{font-size:clamp(1.1rem,.9rem + .8vw,1.35rem);max-width:34ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:.4rem 0 1.4rem}
.factstrip{display:grid;grid-template-columns:1fr;gap:.1rem;border-top:2px solid var(--calcaria-3);border-bottom:2px solid var(--calcaria-3);padding:.9rem 0}
.fact{display:flex;gap:.7rem;align-items:baseline;padding:.35rem 0}
.fact b{color:var(--ocre-llum);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;min-width:5.5rem;flex:none}
.pend{background:color-mix(in srgb,var(--ocre) 22%,var(--calcaria));border-bottom:2px dashed var(--ocre);
  /* El fons del marcador és clar. Sense color propi heretava el text clar del
     cos i sobre les seccions fosques quedava invisible (contrast 1.19:1). */
  color:var(--negre);
  padding:0 .25em;border-radius:3px;font-weight:600}
.hero-art{position:relative;min-height:230px;display:flex;align-items:center;justify-content:center}
.hero-art .cervola{width:min(78%,320px);color:var(--verd);opacity:.92}
.photo{background:var(--calcaria-3);border:2px solid var(--calcaria-3);border-radius:10px 6px 12px 7px;position:relative;
  aspect-ratio:4/3;display:flex;align-items:flex-end;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo .ph{padding:.7rem .8rem;font-size:var(--fs-sm);color:var(--verd-nit);
  background:linear-gradient(0deg,color-mix(in srgb,var(--calcaria) 92%,transparent),transparent);width:100%}
.photo .tag{position:absolute;top:.5rem;left:.5rem;background:var(--negre);color:var(--calcaria-2);font-size:.72rem;
  font-weight:700;padding:.2em .5em;border-radius:5px;transform:rotate(-2deg)}
@media (min-width:820px){
  .hero .grid{grid-template-columns:1.15fr .85fr;align-items:center}
  .factstrip{grid-template-columns:1fr 1fr}
}

/* ---- portada: nom + cérvola darrere, verd i roig ---- */
/* fons en degradat: cel profund (verd-nit) → terra pañoleta (verd),
   perquè quan acabe la portada empalme sense salt amb el body */
.portada{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;
  background:transparent;color:var(--calcaria);overflow:hidden;padding:14vh 1.2rem 8vh}
/* la portada ja no porta gra propi: el de body::before la travessa i,
   si en posàvem un altre a sobre, es veia un escaló on començava i acabava */
.portada-photo{position:absolute;inset:0;
  background-image:linear-gradient(180deg,rgba(12,20,15,.72) 0%,rgba(12,20,15,.58) 45%,rgba(12,20,15,.88) 100%),url("/assets/img/historia-portada.webp");
  background-size:cover;background-position:center 30%}
.portada-art{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.portada-art svg{width:min(128%,980px);color:var(--ocre);opacity:.28}
.portada-art img{width:min(122%,940px);height:auto;object-fit:contain;opacity:.55}
.fed-logo{display:block;margin-top:1.1rem;width:min(220px,70%);height:auto;border-radius:6px}
.portada-inner{position:relative;z-index:1;max-width:22ch}
.portada .kicker2{font-family:var(--font-mano);font-size:clamp(1.4rem,4vw,2rem);color:var(--ocre-llum);margin:1rem 0 0;transform:rotate(-2deg)}
/* els títols de la portada entren amb un fos lent en cascada */
@media (prefers-reduced-motion:no-preference){
  .portada h1{opacity:0;animation:portada-fos 1.6s ease .2s forwards}
  .portada .rule{opacity:0;animation:portada-fos 1.4s ease 1.1s forwards}
  .portada .kicker2{opacity:0;animation:portada-fos 1.6s ease 1.7s forwards}
  @keyframes portada-fos{from{opacity:0}to{opacity:1}}
}
.portada h1{font-weight:800;font-size:clamp(2.3rem,8vw,5rem);
  color:#fff;margin:0;line-height:1.04;letter-spacing:-.02em}
.portada .rule{display:block;height:14px;width:min(62%,300px);margin:1.1rem auto .2rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8 Q30 3 60 7 T117 6' fill='none' stroke='%23C9463A' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.portada .sub{color:var(--calcaria-3);margin:.9rem auto 0;font-size:clamp(1.05rem,2.4vw,1.3rem);max-width:26ch}
.scroll-cue{position:absolute;left:0;right:0;bottom:4vh;color:var(--ocre-llum);font-family:var(--font-mano);
  font-size:1.4rem;font-weight:600;z-index:1}
.scroll-cue:hover,.scroll-cue:focus-visible{background-image:none;color:#fff}
@media (prefers-reduced-motion:no-preference){
  .scroll-cue{animation:bob 2.4s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
}

/* ---- intro (primer bloc d'informació) ---- */
.intro .lead{font-size:clamp(1.1rem,.9rem + .8vw,1.35rem);max-width:42ch}
.intro .actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:.6rem 0 1.4rem}
.intro h2{max-width:16ch}
.fed-strip{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.4rem;border-top:2px solid var(--calcaria-3)}
.fed-strip .lbl{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--ocre-llum);font-weight:700}
.fed-strip img{width:min(210px,62%);height:auto;border-radius:6px;display:block}

/* ---- blocs foscos ---- */
/* les bandes fosques comencen amb un fos suau des de --verd fins a --verd-nit,
   perquè no hi haja un tall recte quan es passa d'una secció clara a una fosca */
/* les bandes "fosques" no pinten cap fons: el degradat del body ja
   fa la feina, i així no hi ha cap costura enlloc. Només canvien el text. */
.dark{background:transparent;color:var(--calcaria-2)}
.dark h2,.dark h3{color:#fff}
.dark .ocre{color:var(--ocre-llum)}
.dark a:not(.btn){color:var(--ocre-llum)}
/* el paper dins d'una banda fosca torna a ser fons clar: els seus enllaços també */
.dark .full a,.dark .plaqueta a,.dark .fitxa-dades a,.dark form.alta a,.dark .prod a{color:var(--verd)}
.cova-bg{background:transparent;color:var(--calcaria-2)}
.cova-bg h2{color:#fff}

/* ---- "en un minut" ---- */
.minut{display:grid;gap:1.1rem;grid-template-columns:1fr}
.minut .q{background:var(--calcaria-2);border:2px solid var(--calcaria-3);border-radius:14px 9px 16px 10px;padding:1.1rem 1.2rem}
.minut .q h3{color:var(--roig);margin-bottom:.3rem}
.minut .q p{margin:0;font-size:1rem}
@media (min-width:680px){.minut{grid-template-columns:1fr 1fr}}

/* ---- seccions (home) ---- */
.seccions .grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
.plaqueta{position:relative;background:var(--calcaria-2);color:var(--negre);border:2px solid var(--calcaria-3);
  border-radius:16px 8px 18px 10px/10px 18px 8px 16px;padding:1.2rem 1.2rem 1.3rem;
  border-left:8px solid var(--sc,var(--ocre))}
.plaqueta .glyph{width:52px;height:52px;color:var(--sc,var(--verd));margin-bottom:.4rem}
.plaqueta .edat{font-weight:700;color:var(--sc,var(--verd));font-size:.9rem}
.plaqueta h3{margin:.1rem 0 .35rem;color:var(--negre)}
.plaqueta p{font-size:.98rem;margin:0 0 .7rem}
.manada{--sc:var(--s-manada)} .tropa{--sc:var(--s-tropa)}
.escoltes{--sc:var(--s-escoltes)} .clan{--sc:var(--s-clan)}
.selfloc{font-family:var(--font-mano);font-size:1.4rem;color:var(--ocre-llum);transform:rotate(-1.5deg);margin-top:.6rem}
/* targeta de secció com a enllaç a la seua pàgina */
a.plaqueta{color:var(--negre);font-weight:400;display:flex;flex-direction:column;height:100%;transition:transform .15s ease,box-shadow .15s ease}
a.plaqueta:hover,a.plaqueta:focus-visible{background-image:none;transform:translateY(-3px);box-shadow:0 12px 26px rgba(33,28,22,.14)}
a.plaqueta:focus-visible{box-shadow:var(--anell)}
.plaqueta .entrar{margin-top:auto;padding-top:.5rem;font-weight:700;color:var(--sc,var(--verd));display:inline-flex;gap:.4em}
.plaqueta .entrar .arr{transition:transform .15s ease}
a.plaqueta:hover .entrar .arr,a.plaqueta:focus-visible .entrar .arr{transform:translateX(4px)}
@media (min-width:640px){.seccions .grid{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.seccions .grid{grid-template-columns:1fr 1fr 1fr}}

/* ---- qui ho porta ---- */
.equip{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1rem;margin-top:1.4rem}
.pers{text-align:center}
.pers .face{width:100%;aspect-ratio:1;border-radius:50%;background:color-mix(in srgb,var(--calcaria) 70%,#fff);
  border:2px dashed var(--ocre-clar);display:flex;align-items:center;justify-content:center;
  color:var(--verd-nit);font-size:var(--fs-sm);margin-bottom:.4rem}
.pers b{display:block}
.pers span{font-size:.85rem;opacity:.85}

/* ---- d'on venim + tally ---- */
.venim .grid{display:grid;gap:1.6rem}
.quote{border-left:8px solid var(--ocre);padding:.4rem 0 .4rem 1.1rem;
  font-size:1.25rem;line-height:1.25;color:#fff}
.quote cite{display:block;font-style:normal;font-size:var(--fs-sm);color:var(--ocre-llum);margin-top:.5rem}
.tally{display:flex;flex-wrap:wrap;gap:5px 4px;max-width:420px;margin:.4rem 0 .6rem}
.tally i{display:inline-block;width:4px;height:26px;background:var(--ocre-clar);border-radius:2px}
.tally i:nth-child(2n){transform:rotate(4deg)} .tally i:nth-child(3n){transform:rotate(-5deg)} .tally i:nth-child(7n){transform:rotate(2deg)}
.tally i.fifth{margin-right:14px;box-shadow:9px 0 0 -1px var(--ocre-clar);position:relative}
.tally-cap{font-size:var(--fs-sm);color:var(--ocre-llum)}
@media (min-width:820px){.venim .grid{grid-template-columns:1fr 1fr;align-items:center}}

/* ---- història: el quadern del grup (interactiu) ---- */
.quadern{max-width:620px;margin-top:1.6rem}
.quadern:focus-visible{outline-offset:6px;border-radius:8px}
.fulls{position:relative}
.full{background:var(--calcaria-2);color:var(--negre);border-radius:5px;padding:1.5rem 1.5rem 1.7rem;
  position:relative;box-shadow:0 14px 34px rgba(0,0,0,.3);margin-bottom:1.1rem}
.js .fulls{display:grid;grid-template-columns:minmax(0,1fr)}
/* Totes les pàgines ocupen la mateixa cel·la: l'alçària és la de la més llarga i els botons no
   es mouen en passar pàgina. Les imatges de les pàgines ocultes continuen sense descarregar-se. */
.js .full{grid-area:1/1;margin-bottom:0;visibility:hidden}
.js .full.on{visibility:visible}
.js .full:not(.on) img{display:none}
/* cinta adhesiva a les cantonades */
.full::before,.full::after{content:"";position:absolute;top:-9px;width:58px;height:20px;
  background:color-mix(in srgb,var(--ocre) 55%,transparent);opacity:.75;border-radius:2px}
.full::before{left:26px;transform:rotate(-5deg)}
.full::after{right:26px;transform:rotate(4deg)}
.full .pagina{color:var(--roig);font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;margin:0}
.full h3{color:var(--negre);margin:.1rem 0 .5rem}
.full p{margin:0 0 .7rem}
.full .foto-scrap{aspect-ratio:4/3;background:var(--calcaria-3);border:7px solid #fff;box-shadow:0 5px 14px rgba(0,0,0,.18);
  transform:rotate(-1.6deg);display:flex;align-items:flex-end;justify-content:center;padding:.6rem;margin:.9rem 0 1.1rem;
  color:var(--verd);font-size:var(--fs-sm);text-align:center;overflow:hidden}
.full .foto-scrap img{width:100%;height:100%;object-fit:cover;display:block;padding:0}
.full .nota{font-size:var(--fs-sm);font-weight:600;color:var(--verd);margin:.4rem 0 0}
.full .retall{margin:.6rem 0 0;background:#ece5d6;border:1px dashed #b7ab92;padding:1rem 1.1rem;
  font-size:1.0625rem;line-height:1.45;color:#2a2620;
  box-shadow:2px 3px 0 rgba(0,0,0,.08);transform:rotate(-.5deg)}
.full .retall cite{display:block;margin-top:.6rem;font-style:normal;font-weight:600;color:var(--roig);font-size:var(--fs-sm)}
.full .tally{margin:.6rem 0}
.full .tally i{background:var(--verd)}
.full .tally i.fifth{box-shadow:9px 0 0 -1px var(--verd)}
.quadern-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;margin-top:.4rem}
.js .quadern-nav{margin-top:1rem}
.qbtn{min-width:44px;min-height:44px;background:transparent;border:2px solid var(--ocre-llum);color:var(--ocre-llum);border-radius:9px;
  padding:.5em .9em;font-weight:700;cursor:pointer;white-space:nowrap}
.qbtn:hover:not(:disabled),.qbtn:focus-visible{background:var(--ocre-llum);color:var(--verd-nit);background-image:none}
.qbtn:disabled{opacity:.5;cursor:default}
.dots{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem}
/* el punt es veu igual, però l'àrea que es pot prémer és de 24 px */
.dots button{display:grid;place-items:center;width:24px;height:24px;border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0}
.dots button::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid var(--ocre-llum)}
.dots button[aria-current="true"]::before{background:var(--ocre-llum)}
.dots button:focus-visible{border-radius:50%}
/* Mòbil: en una sola fila i en l'ordre del DOM, el mateix que recorre el tabulador. Els botons
   es queden en la fletxa; el nom continua per als lectors de pantalla. */
@media (max-width:520px){
  .quadern-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.4rem}
  .qbtn{padding:0}
  .qbtn .va,.qbtn .es{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (max-width:359.98px){.dots{display:grid;grid-template-columns:repeat(4,24px);justify-content:center}}
/* sense JS: el quadern es llig com una llista de pàgines */
.quadern:not(.js-ready) .quadern-nav{display:none}
@media (prefers-reduced-motion:no-preference){
  .js .full.on{animation:full-in .35s ease}
  @keyframes full-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---- la cova: banda teaser (home) ---- */
.cova-teaser{background:transparent;color:#fff;position:relative;overflow:hidden;text-align:center}
.cova-teaser .cervola-big{width:min(38%,140px);color:var(--ocre-llum);margin:0 auto 1rem;display:block}
.cova-teaser .kick{font-family:var(--font-mano);font-size:1.6rem;color:var(--ocre-llum);margin:0 0 .3rem}
.cova-teaser h2{color:#fff}
.cova-teaser p{margin:0 auto 1.4rem;color:var(--calcaria-3);max-width:46ch}
.cova-teaser .btn-ghost{color:#fff;border-color:var(--ocre-clar)}
.cova-teaser .btn-ghost:hover,.cova-teaser .btn-ghost:focus-visible{background:var(--ocre-clar);color:var(--verd-nit)}

/* ---- la cova: immersió estil Apple (pàgina cova.html) ---- */
.cova-immersio{background:var(--verd-nit);color:#fff;position:relative}
.cova-immersio .escena{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;
  padding:clamp(1.5rem,6vw,4rem);text-align:center;overflow:hidden}
.cova-immersio .foto{position:absolute;inset:0;z-index:0;background:#2a1f14 center/cover no-repeat}
.cova-immersio .foto::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,8,5,.35),rgba(10,8,5,.8))}
.cova-immersio .foto::after{content:attr(data-label);position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;
  font-size:var(--fs-sm);color:var(--ocre-llum)}
.cova-immersio .txt{position:relative;z-index:1;max-width:24ch}
.cova-immersio .crumb{position:absolute;top:calc(1rem + env(safe-area-inset-top));left:0;right:0;text-align:center;color:var(--calcaria-3);font-size:.9rem}
.cova-immersio .crumb a{color:var(--ocre-llum)}
.cova-immersio .kick{font-family:var(--font-mano);font-size:1.7rem;color:var(--ocre-llum);margin:0 0 .5rem}
.cova-immersio .big{font-weight:700;line-height:1.04;
  font-size:clamp(2rem,6.5vw,4.4rem);margin:0;color:#fff;letter-spacing:-.01em}
.cova-immersio .sub{font-size:clamp(1rem,2.4vw,1.35rem);color:var(--calcaria-3);margin-top:1.1rem}
.cova-immersio .scrollhint{font-family:var(--font-mano);color:var(--ocre-llum);margin-top:2.2rem;font-size:1.4rem}
.cova-immersio .btn{margin-top:1.6rem}
.cova-immersio .tornar{display:block;margin-top:1.1rem;color:var(--ocre-llum);font-weight:600}
.cova-immersio .cervola-big{width:min(46%,170px);color:var(--ocre-llum);margin:0 auto 1rem;display:block}
@media (prefers-reduced-motion:no-preference){
  .js .cova-immersio .txt{opacity:0;transform:translateY(36px);transition:opacity .9s ease,transform .9s ease}
  .js .cova-immersio .escena.in .txt{opacity:1;transform:none}
  .js .cova-immersio .foto{transform:scale(1.09);transition:transform 1.6s ease}
  .js .cova-immersio .escena.in .foto{transform:scale(1)}
  .js .cova-immersio .escena-intro .crumb{opacity:1}
}

/* ---- pàgines de secció ---- */
.sec-hero{background:var(--calcaria);color:var(--negre);border-top:7px solid var(--sc,var(--ocre))}
.crumb{font-size:var(--fs-sm);margin-bottom:1.4rem}
.crumb a{color:var(--verd)} .crumb span{font-weight:700}
.sec-hero-grid{display:grid;gap:2rem}
.glyph-big{width:82px;height:82px;color:var(--sc,var(--verd));margin-bottom:.5rem}
.sec-hero .edat{font-weight:700;color:var(--sc,var(--verd));font-size:1.05rem;margin:0}
.sec-hero h1{color:var(--negre);margin:.1rem 0 .5rem}
.sec-hero .lede{margin-bottom:1.2rem}
@media (min-width:820px){.sec-hero-grid{grid-template-columns:1fr 1fr;align-items:center}}
.sec-content{max-width:760px}
.sec-content>p{font-size:1.15rem}
.sec-facts{display:grid;gap:1.1rem;margin-top:1.6rem}
.sec-facts>div{background:var(--calcaria-2);color:var(--negre);border:2px solid var(--calcaria-3);border-left:6px solid var(--sc,var(--ocre));
  border-radius:12px 8px 12px 8px;padding:1rem 1.1rem}
.sec-facts b{display:block;color:var(--sc,var(--verd));margin-bottom:.15rem}
.sec-facts p{margin:0}
.sec-facts .resp-face{display:inline-block;width:30px;height:30px;border-radius:50%;background:var(--calcaria-3);
  border:2px dashed var(--ocre);vertical-align:-9px;margin-right:.4rem}
@media (min-width:680px){.sec-facts{grid-template-columns:1fr 1fr}}
.sec-switcher h2{font-size:1.5rem}
.switch-grid{display:grid;gap:.8rem;grid-template-columns:1fr;margin-top:1rem}
.switch{display:flex;align-items:center;gap:.6rem;background:var(--calcaria-2);border:2px solid var(--calcaria-3);
  border-left:8px solid var(--sc,var(--ocre));border-radius:10px;padding:.9rem 1rem;color:var(--negre);font-weight:700;
  transition:transform .15s ease}
.switch small{font-weight:600;color:var(--text-suau)}
.switch:hover,.switch:focus-visible{background:var(--calcaria-3);background-image:none;transform:translateX(4px)}
@media (min-width:680px){.switch-grid{grid-template-columns:repeat(2,1fr)}}
.sec-cta{text-align:center}
.sec-cta .btn{margin-top:1rem}

/* ---- alta ---- */
.passos{display:grid;gap:1rem;grid-template-columns:1fr;margin:1.4rem 0}
.pas{display:flex;gap:.9rem;align-items:flex-start;background:color-mix(in srgb,var(--verd-nit) 88%,#000);
  border-radius:12px;padding:1rem 1.1rem}
.pas .n{font-weight:800;font-size:1.5rem;color:var(--ocre-llum);flex:none;line-height:1}
.pas p{margin:0;color:var(--calcaria-2)}
@media (min-width:760px){.passos{grid-template-columns:repeat(3,1fr)}}

form.alta{background:var(--calcaria-2);color:var(--negre);border:2px solid var(--calcaria-3);border-radius:16px;padding:clamp(1.1rem,3vw,2rem);max-width:720px}
form.alta fieldset{border:0;border-top:2px solid var(--calcaria-3);margin:0 0 1.4rem;padding:1.2rem 0 0}
form.alta legend{font-weight:700;color:var(--verd);font-size:1.15rem;padding:0}
.field{margin-bottom:1rem}
.field label{display:block;font-weight:700;margin-bottom:.3rem;font-size:var(--fs-sm)}
.field .help{font-size:var(--fs-xs);color:var(--text-suau);font-weight:400}
.field input,.field select,.field textarea{width:100%;font-size:1rem;padding:.7em .8em;
  border:2px solid var(--vora-camp);border-radius:9px;background:#fff;color:var(--negre)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--verd);outline:3px solid var(--negre);outline-offset:2px;box-shadow:var(--anell)}
.two{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:560px){.two{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.8rem;font-size:var(--fs-sm)}
.check input{width:1.3em;height:1.3em;margin-top:.15em;flex:none;accent-color:var(--verd)}
.req{color:var(--roig)}
.primerdia{background:rgba(0,0,0,.16);border:2px dashed var(--ocre-clar);border-radius:12px;padding:1.1rem 1.2rem;margin-top:1.6rem;color:var(--calcaria-2)}
.primerdia h3{color:#fff}

/* ---- cròniques ---- */
.cronica-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
.cronica{background:var(--calcaria-2);border:2px solid var(--calcaria-3);border-radius:14px 8px 16px 10px;overflow:hidden;display:flex;flex-direction:column}
.cronica .photo{border:0;border-radius:0;aspect-ratio:16/10}
.cronica .txt{padding:1rem 1.1rem 1.2rem}
.cronica h3{margin-bottom:.3rem}
.cronica .who{font-size:var(--fs-sm);font-weight:600;color:var(--roig)}
@media (min-width:720px){.cronica-grid{grid-template-columns:1fr 1fr}}

/* ---- calendari ---- */
.agenda{display:flex;flex-direction:column;gap:.2rem;max-width:640px}
.agenda .row{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:baseline;padding:.7rem 0;border-bottom:2px dotted var(--calcaria-3)}
.agenda .d{font-weight:700;color:var(--roig);min-width:4.5rem}
.agenda .portar{font-size:var(--fs-sm);color:var(--verd);margin-top:1rem}

/* ---- galeria ---- */
.galeria{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
.galeria .photo:nth-child(3n){aspect-ratio:1}
@media (min-width:680px){.galeria{grid-template-columns:repeat(4,1fr)}}

/* ---- peu ---- */
footer{background:transparent;color:var(--calcaria-2)}
footer .wrap{padding-block:var(--pas)}
footer a{color:var(--ocre-llum)}
.foot-grid{display:grid;gap:1.6rem;grid-template-columns:1fr}
.foot-grid h3{color:#fff}
/* Tots els enllaços de les columnes del peu van un davall de l'altre. S'exclou
   .brand, que és un flex amb la cérvola i el nom i es trencaria.
   fit-content: el traç roig de :hover ocupa el 100% de la caixa, no de la columna. */
.foot-grid > div > a:not(.brand){display:block;width:fit-content;max-width:100%;overflow-wrap:anywhere;margin-bottom:.4rem}
#contacte{scroll-margin-top:88px}
.made{font-family:var(--font-mano);font-size:1.3rem;color:var(--ocre-llum);margin-top:1.4rem}
/* el morse tanca la pàgina, just abans de la línia legal */
footer .ratlla{margin:2.4rem 0 1.6rem;opacity:.75}
.legal{font-size:var(--fs-xs);margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.legal a{display:inline-flex;align-items:center;min-height:24px}
/* la columna de contacte no baixa de l'amplària del correo, que si no es partiria */
@media (min-width:720px){.foot-grid{grid-template-columns:1.3fr minmax(max-content,1fr) 1fr}}

.eyebrow{font-family:var(--font-mano);font-weight:600;font-size:1.4rem;color:var(--ocre-llum);transform:rotate(-1.5deg);margin-bottom:.1rem}
.dark .eyebrow,.cova-bg .eyebrow{color:var(--ocre-llum)}
.sec-hero .eyebrow{color:var(--roig)}
.lede{font-size:var(--fs-lg);max-width:52ch;margin-bottom:.4rem}

/* ============================================================
   Experiència premium: revelat, progrés, elevació, tornar a dalt
   ============================================================ */
main section[id]{scroll-margin-top:88px}
.progress-bar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--roig);z-index:60;pointer-events:none;
  transition:width .08s linear}
header.top.revelat{box-shadow:0 8px 26px rgba(18,14,8,.22)}
.to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:55;width:64px;height:64px;
  border:0;background:transparent;padding:0;cursor:pointer;
  background-image:url("/assets/img/cierva-parche.png");background-size:contain;
  background-repeat:no-repeat;background-position:center;
  opacity:0;visibility:hidden;translate:0 12px;pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));
  transition:opacity .3s ease,translate .3s ease,transform .2s ease,filter .2s ease,visibility 0s linear .3s}
.to-top.show{opacity:1;visibility:visible;translate:0 0;pointer-events:auto;transition-delay:0s}
.to-top:hover,.to-top:focus-visible{transform:scale(1.08);filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
/* micro-interaccions més fines */
.btn{transition:transform .18s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.plaqueta .glyph,.plaqueta .cierva{transition:scale .25s ease}
a.plaqueta:hover .glyph,a.plaqueta:focus-visible .glyph{scale:1.06}
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;translate:0 24px;transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;translate:0 0}
}


/* ---- notícies (home) ---- */
.noticies-llista{display:grid;gap:1.1rem;grid-template-columns:1fr;margin:1.4rem 0 1.2rem}
.noticia{background:color-mix(in srgb,#000 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ocre-clar) 28%,transparent);
  border-left:6px solid var(--ocre-clar);border-radius:14px 8px 16px 10px;padding:1.1rem 1.2rem}
.noticia .data{font-size:var(--fs-sm);font-weight:600;color:var(--ocre-llum);margin:0 0 .2rem}
.noticia h3{color:#fff;margin:0 0 .4rem}
.noticia p{margin:0;color:var(--calcaria-2);font-size:1rem}
@media (min-width:760px){.noticies-llista{grid-template-columns:1fr 1fr}}

.ig-header{margin-top:2.2rem}
.ig-header h3{color:#fff;margin:.1rem 0 0}
/* Instagram sense incrustar: targetes pròpies que només enllacen. Res de l'exterior es carrega
   fins que qui visita ho decideix, i l'alçària de la pàgina ja no depén de Meta. */
.ig-targetes{display:grid;gap:1.1rem;grid-template-columns:1fr;margin:1rem 0 1.1rem}
@media(min-width:760px){.ig-targetes{grid-template-columns:1fr 1fr}}
a.ig-targeta{display:grid;grid-template-columns:auto 1fr;gap:.2rem .9rem;align-items:start;background:var(--calcaria-2);color:var(--negre);font-weight:400;
  border:2px solid var(--calcaria-3);border-left:6px solid var(--roig);border-radius:14px 8px 16px 10px;padding:1.1rem 1.2rem;
  transition:transform .15s ease,box-shadow .15s ease}
a.ig-targeta:hover,a.ig-targeta:focus-visible{background-image:none;transform:translateY(-2px);box-shadow:0 10px 22px rgba(0,0,0,.22)}
a.ig-targeta:focus-visible{box-shadow:var(--anell)}
.dark a.ig-targeta{color:var(--negre)}
.ig-targeta svg{grid-row:span 3;width:40px;height:40px;fill:none;stroke:var(--roig);stroke-width:1.8}
.ig-titol{font-weight:700;font-size:var(--fs-h3);line-height:1.15}
.ig-text{font-size:var(--fs-sm);color:var(--text-suau)}
.ig-accio{margin-top:.35rem;font-weight:700;color:var(--verd)}
.ig-peu{font-size:var(--fs-sm);margin:0 0 .5rem}
.nota-peu{font-size:var(--fs-sm)}

/* ============================================================
   WEB-5 · Pàgines afegides en WEB-2A/2B/3A/3B integrades en el
   llenguatge original: capçalera de paper (.sec-hero), contingut
   sobre el verd del cos i plaquetes de paper amb filet de color.
   ============================================================ */
/* dreceres de la pàgina, dins de la capçalera de paper: enllaços com els de la molla de pa */
.sec-hero .families-nav,.sec-hero .faq-cat-nav,.sec-hero .historia-nav,.sec-hero .transp-nav{
  list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin:1.3rem 0 0;padding:.9rem 0 0;border-top:2px solid var(--calcaria-3);justify-content:flex-start}
.sec-hero .families-nav a,.sec-hero .faq-cat-nav a,.sec-hero .historia-nav a,.sec-hero .transp-nav a{
  display:inline-flex;align-items:center;min-height:32px;gap:.35em;color:var(--verd);font-weight:700;font-size:var(--fs-sm);
  background:none;border:0;padding:0;border-radius:0;transform:none}
.sec-hero .families-nav a::before,.sec-hero .faq-cat-nav a::before,.sec-hero .historia-nav a::before,.sec-hero .transp-nav a::before{content:"→";color:var(--ocre)}
.sec-hero .families-nav a:hover,.sec-hero .faq-cat-nav a:hover,.sec-hero .historia-nav a:hover,.sec-hero .transp-nav a:hover{color:var(--verd);outline:0}
.sec-hero h1{max-width:20ch}
.sec-hero .lede{max-width:60ch}
/* crides finals de les pàgines noves: com la de les seccions */
.sec-cta .btn-group,.sec-cta > .wrap > div:not([class]){display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:1rem}
.sec-cta .btn-group .btn{margin-top:0;white-space:normal}
.dark.sec-cta .btn-ghost{color:var(--ocre-llum);border-color:var(--ocre-llum)}
.dark.sec-cta .btn-ghost:hover,.dark.sec-cta .btn-ghost:focus-visible{background:var(--ocre-llum);color:var(--verd-nit)}
.sec-cta p{margin-inline:auto}
.sec-hero div.families-nav a:first-child::before{content:none}
/* WEB-5 (correccions finals): accessos a FAQ, Calendari i Guia de famílies al final de la portada */
.recursos-families{margin:2.2rem auto 0;padding-top:1.4rem;border-top:2px solid color-mix(in srgb,var(--ocre-clar) 35%,transparent);max-width:46rem}
.recursos-families h3{font-size:1.1rem;color:#fff;margin:0 0 .8rem}
.recursos-families ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.recursos-families a{display:inline-flex;align-items:center;min-height:44px;padding:.45em 1em;border:2px solid var(--ocre-llum);border-radius:9px;color:var(--ocre-llum);font-weight:700}
.recursos-families a:hover,.recursos-families a:focus-visible{background:var(--ocre-llum);color:var(--verd-nit);background-image:none}
/* accés a la guia dins de la pàgina Famílies */
.sec-hero .guia-acces{margin:.4rem 0 0}
.sec-hero .guia-acces a{display:inline-flex;align-items:center;gap:.4em;min-height:44px;padding:.5em 1em;border:2px solid var(--verd);border-radius:9px;color:var(--verd);font-weight:700}
.sec-hero .guia-acces a:hover,.sec-hero .guia-acces a:focus-visible{background:var(--verd);color:var(--calcaria-2);background-image:none}
.full .retall-enllac{margin-top:.8rem}