/* La Carral · Casa de colònies, natura i convivència — estils base de la web pública (i base del panell).
   Marca d'Erika Escudero (P2_LACARRAL.pdf, 20-10-2026): crema, terracota i blau marí; Averia Libre (títols, com el logo) + Outfit (text).
   Gest propi: el TRAÇ A MÀ de la façana (línia irregular, com el dibuix del logo). Classe .ratlla. Vegeu GUIA-MODULS.md › Marca. */

@font-face { font-family: 'Averia Libre'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/AveriaLibre-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Averia Libre'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/AveriaLibre-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Averia Libre'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/AveriaLibre-300-italic.woff2) format('woff2'); }
@font-face { font-family: 'Averia Libre'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/AveriaLibre-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/Outfit-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: 'Outfit'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/Outfit-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; }

:root {
  /* marca (mostrejats del PDF d'Erika) */
  --crema: #fef6e6;           /* fons de pàgina (paper del logo) */
  --crema-2: #f6e8cc;         /* seccions alternes */
  --crema-3: #e8d5b0;         /* vores i separadors sobre crema */
  --terracota: #b66046;       /* camps de color, l'acció principal, «avui» */
  --terracota-fosc: #8e4330;  /* terracota per a text i botons amb text blanc (contrast AA) */
  --mari: #312e42;            /* blau marí del logo: text fort, accions, camps foscos */
  --mari-2: #4a4662;          /* hover */
  --mari-3: #232032;          /* peu i panell */
  --pissarra: #3f4d62;        /* blau de la samarreta: camps secundaris */
  --lila: #d9d2e6;            /* text i traços sobre fosc */
  --malva: #eee2f3;           /* tint pàl·lid (la pantalla de la maqueta d'Instagram) */
  --blanc: #ffffff;
  --verd: #4d6b45;            /* lliure, pagat, correcte */
  --vermell: #a3392b;         /* errors */
  /* tinta */
  --tinta: #262434;
  --tinta-2: #4a475a;
  --tinta-3: #5e5a6c;
  --linia: #e6d8bd;
  --display: 'Averia Libre', Georgia, 'Times New Roman', serif;
  --sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mur: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radi: 10px;
  --ombra: 0 10px 30px -12px rgba(35, 32, 50, .35);
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
  /* el traç a mà (contorn irregular de la façana): per a .ratlla i el subratllat dels títols de les pàgines */
  --trac: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 14' preserveAspectRatio='none'%3E%3Cpath d='M1 8.5c38-2.6 61 1.9 104-.6s52-3.4 96-.9 63 2.7 104 .4 49-3.6 92-1.4 58 2.9 102 .9 47-1.8 100-.3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--crema); color: var(--tinta); font: 400 1.0625rem/1.6 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--mari-2); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--mari); text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; letter-spacing: -.005em; margin: 0; text-wrap: balance; color: var(--tinta); }
h1 { font-size: clamp(2.5rem, 6.4vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.15; }
h2 em, h1 em { font-style: italic; font-weight: 300; color: var(--terracota-fosc); }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
::selection { background: var(--lila); color: var(--mari-3); }
:focus-visible { outline: 3px solid var(--terracota); outline-offset: 3px; border-radius: 2px; }
.sr, .salta:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.salta { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--blanc); padding: 10px 16px; }
.mur { width: 100%; max-width: var(--mur); margin-inline: auto; padding-inline: var(--gutter); }
.entradeta { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--tinta-2); max-width: 60ch; }
.num { font-variant-numeric: tabular-nums; }
.ic { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
html { scrollbar-color: var(--mari-2) var(--crema-2); }

/* ---------- el gest propi: el traç a mà ----------
   Una línia irregular dibuixada a mà, com el contorn de la façana del logo. Una per vista (sota una foto de capçalera o un títol gran).
   Color = currentColor. No la facis servir de decoració repetida. */
.ratlla { display: block; height: 14px; color: var(--terracota);
  background: currentColor;
  -webkit-mask: var(--trac) center / 100% 100% no-repeat; mask: var(--trac) center / 100% 100% no-repeat; }
.ratlla.curta { width: min(220px, 60%); }

/* ---------- botons i camps ---------- */
.boto { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 48px; padding: 0 1.4em; border: 2px solid var(--mari); border-radius: 999px;
  background: var(--mari); color: var(--blanc); font: 600 1rem/1.1 var(--sans); text-decoration: none; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease); }
.boto:hover { background: var(--mari-2); border-color: var(--mari-2); color: var(--blanc); text-decoration: none; }
.boto:active { transform: translateY(1px); }
.boto.linia { background: transparent; color: var(--mari); }
.boto.linia:hover { background: var(--malva); color: var(--mari); }
.boto.clar { background: var(--blanc); border-color: var(--blanc); color: var(--mari); }
.boto.clar:hover { background: var(--malva); border-color: var(--malva); }
.boto.terracota { background: var(--terracota-fosc); border-color: var(--terracota-fosc); color: var(--blanc); }
.boto.terracota:hover { background: var(--terracota); border-color: var(--terracota); color: var(--blanc); }
.boto.petit { min-height: 44px; padding: 0 1em; font-size: .92rem; }
.boto.gran { min-height: 56px; font-size: 1.08rem; padding: 0 1.8em; }
.boto[disabled], .boto[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.boto.carrega { position: relative; color: transparent !important; }
.boto.carrega::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid var(--blanc); border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(1turn); } }
.enllac-fort { font-weight: 600; color: var(--mari); text-decoration: underline; text-underline-offset: .25em; }

label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=email], input[type=date], input[type=number], select, textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #cdbb98; border-radius: var(--radi); background: var(--blanc); color: var(--tinta); font: 400 1rem var(--sans); }
textarea { min-height: 96px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--pissarra); outline-offset: 0; border-color: var(--mari-2); }
.camp { margin-bottom: 16px; }
.camp small { display: block; color: var(--tinta-3); font-size: .86rem; margin-top: 4px; }
.error { color: var(--vermell); font-weight: 600; }
input[type=checkbox], input[type=radio] { accent-color: var(--mari); width: 20px; height: 20px; }

/* comptador +/- */
.pas { display: inline-flex; align-items: center; border: 1.5px solid #cdbb98; border-radius: var(--radi); background: var(--blanc); }
.pas button { width: 44px; height: 44px; border: 0; background: none; font: 500 1.4rem/1 var(--sans); color: var(--mari); cursor: pointer; }
.pas button:disabled { color: #cdbb98; cursor: default; }
.pas output { min-width: 2.2ch; text-align: center; font: 600 1.1rem var(--sans); font-variant-numeric: tabular-nums; }

/* ---------- franja de la demo ---------- */
.franja-demo[hidden] { display: none; }
.franja-demo { background: var(--mari-3); color: var(--lila); font-size: .86rem; display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: center; align-items: center; padding: 8px var(--gutter); text-align: center; }
.franja-demo p { margin: 0; }
.franja-demo b { color: var(--blanc); font-weight: 600; }
.franja-demo a { color: var(--blanc); }
.franja-demo .fd-curt { display: none; }
/* dins els marcs de la proposta (iframes) no cal la franja de la demo ni el xat flotant */
.en-marc .franja-demo, .en-marc [data-franja], .en-marc .ast-llanca, .en-marc .ast-flot { display: none !important; }
.fd-enllacos { display: inline-flex; gap: 16px; }
@media (max-width: 760px) {
  .franja-demo { flex-wrap: nowrap; justify-content: space-between; gap: 12px; padding-block: 0; font-size: .82rem; text-align: left; white-space: nowrap; }
  .franja-demo p { overflow: hidden; text-overflow: ellipsis; min-width: 0; white-space: nowrap; text-wrap: nowrap; }
  .franja-demo a { display: inline-flex; align-items: center; min-height: 44px; }
  .franja-demo .fd-llarg { display: none; } .franja-demo .fd-curt { display: inline; }
}

/* ---------- capçalera ---------- */
.cap { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--crema) 95%, transparent); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--linia); }
.cap-mur { max-width: var(--mur); margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 20px; min-height: 72px; }
.cap-logo { color: var(--mari); display: block; width: var(--logo-cap, 128px); flex: none; }
.cap-logo svg { width: 100%; height: auto; display: block; }
.cap-nav { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.cap-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px 20px; flex-wrap: nowrap; white-space: nowrap; }
.cap-nav a { color: var(--tinta); text-decoration: none; font-weight: 500; font-size: .98rem; padding: 10px 0; display: inline-block; border-bottom: 2px solid transparent; }
.cap-nav a:hover { color: var(--mari); border-color: var(--pissarra); }
.cap-nav a[aria-current=page] { color: var(--mari); border-color: var(--terracota); }
.cap-idiomes { display: flex; gap: 2px; padding-left: 18px; border-left: 1px solid var(--linia); }
.cap-idiomes a { font-size: .82rem; font-weight: 600; letter-spacing: .04em; padding: 12px 0; min-width: 44px; text-align: center; color: var(--tinta-3); border: 0; }
.cap-idiomes a[aria-current=true] { color: var(--mari); text-decoration: underline; text-decoration-color: var(--terracota); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.cap-reserva { flex: none; }
.cap-obre { display: none; }
@media (max-width: 1180px) {
  .cap-mur { min-height: 64px; gap: 12px; }
  .cap-logo { width: min(calc(var(--logo-cap, 128px) * .8125), 32vw); }
  .cap-reserva { margin-left: auto; min-height: 44px; padding: 0 1em; }
  .cap-obre { display: grid; place-content: center; gap: 6px; width: 48px; height: 48px; border: 0; background: none; cursor: pointer; padding: 0; }
  .cap-obre span:not(.sr) { display: block; width: 24px; height: 2px; background: var(--mari); transition: transform .3s var(--ease); }
  .cap-obre[aria-expanded=true] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .cap-obre[aria-expanded=true] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
  .cap-nav { position: fixed; inset: 64px 0 auto 0; background: var(--crema); border-bottom: 1px solid var(--linia); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; margin: 0;
    max-height: calc(100dvh - 64px); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .3s var(--ease), visibility 0s .3s; }
  .cap-nav.obert { opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .3s var(--ease); }
  .cap-nav ul { flex-direction: column; gap: 0; }
  .cap-nav ul a { display: block; padding: 14px 0; font-family: var(--display); font-size: 1.6rem; line-height: 1.1; border-bottom: 1px solid var(--linia); }
  .cap-idiomes { border: 0; padding: 14px 0 0; gap: 8px; }
  .cap-idiomes a { padding: 12px 10px; font-size: .95rem; }
}

/* ---------- seccions ---------- */
.seccio { padding-block: clamp(64px, 9vw, 128px); }
.seccio-cap { display: grid; gap: 14px; margin-bottom: clamp(32px, 4vw, 56px); max-width: 62ch; }
.seccio-cap p { color: var(--tinta-2); font-size: 1.1rem; margin: 0; }
.sorra { background: var(--crema-2); }
.fosc { background: var(--mari); color: var(--malva); }
.fosc h1, .fosc h2, .fosc h3 { color: var(--blanc); }
.fosc a:not(.boto) { color: var(--blanc); }
.nota-exemple { font-size: .86rem; color: var(--tinta-3); }
.fosc .nota-exemple { color: var(--lila); }
.etiqueta-prop { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--terracota-fosc); border: 1px solid currentColor; border-radius: 3px; padding: 1px 6px; vertical-align: .15em; margin-left: .3em; }
.fosc .etiqueta-prop { color: #e9a58f; }

/* capçalera de pàgina interior: vegeu pagines.css */

/* ---------- peu ---------- */
.peu { background: var(--mari-3); color: var(--lila); padding-bottom: 28px; margin-top: 0; }
.peu-ratlla { color: var(--terracota); margin: 0 auto; max-width: var(--mur); }
.peu-graella { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-block: 64px 40px; }
.peu-graella > * { min-width: 0; }
.peu-marca svg { width: 180px; height: auto; color: var(--crema); margin-bottom: 18px; }
.peu-marca p { max-width: 34ch; }
.peu-registre { font-size: .86rem; color: var(--lila); opacity: .9; }
.peu h2 { font-size: 1.45rem; color: var(--blanc); margin-bottom: 12px; }
.peu a { color: var(--blanc); }
.peu ul { list-style: none; padding: 0; margin: 0; }
.peu li a { display: inline-block; padding: 7px 0; min-height: 44px; line-height: 30px; text-decoration-color: rgba(217, 210, 230, .45); }
.peu li a:hover { text-decoration-color: var(--terracota); }
.peu p a { display: inline-block; padding: 6px 0; }
.peu-avall { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .86rem; border-top: 1px solid rgba(217, 210, 230, .2); padding-top: 20px; }
.peu-avall a { display: inline-block; padding: 10px 0; }
@media (max-width: 960px) { .peu-graella { grid-template-columns: 1fr 1fr; } .peu-marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .peu-graella { gap: 28px 20px; } }

/* ---------- avisos ---------- */
.toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 20px); background: var(--mari-3); color: var(--blanc); padding: 14px 20px; border-radius: var(--radi); box-shadow: var(--ombra);
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .35s var(--ease); z-index: 90; max-width: calc(100vw - 32px); }
.toast.si { opacity: 1; transform: translate(-50%, 0); }
.avis { padding: 14px 16px; border-radius: var(--radi); background: var(--malva); color: var(--tinta); }
.avis.error { background: #f6ddd5; color: #6b2318; font-weight: 500; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }

.res-cap h1 em, .pag-cap h1 em, .fosc h1 em, .fosc h2 em { color: var(--lila); }

/* Demo: avís visible als formularis públics que demanen nom i telèfon */
.avis-dades { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radi, 10px); border: 1.5px solid #b5651d; background: #fff4e5; color: #6b3a0c; font-size: .95rem; font-weight: 600; line-height: 1.35; }
.avis-dades::before { content: "!"; flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #b5651d; color: #fff; font-weight: 700; }

/* Demo pública: botó d'enviar desactivat als formularis amb dades personals */
.boto.envia-off, .boto.envia-off:hover { background: #d5dadc; border-color: #d5dadc; color: #5b6468; cursor: not-allowed; transform: none; box-shadow: none; }
.avis-envia-off { margin: 8px 0 0; font-size: .92rem; font-weight: 600; color: #6b3a0c; }

/* Logo escrit (mentre no hi ha el SVG de la marca): mateixa lletra que el logo d'Erika */
.logo-text { display: inline-block; font: 400 1.9rem/1 var(--display); color: var(--mari); letter-spacing: -.01em; white-space: nowrap; }
.logo-text i { font-weight: 300; }
.cap-logo:has(.logo-text) { width: auto; }
.peu-marca .logo-text { color: var(--crema); font-size: 2.4rem; margin-bottom: 14px; }
.p-logo .logo-text { color: var(--crema); font-size: 1.4rem; }


/* ---------- web pública (mòdul 05): peces compartides per la portada i les pàgines ---------- */
/* Arc rebaixat de masia: la part de dalt de les fotos com una porta o una finestra de pedra. --vr = alçada de l'arc (en % de l'alçada) */
.volta { margin: 0; overflow: hidden; border-radius: 50% 50% 6px 6px / var(--vr, 22%) var(--vr, 22%) 6px 6px; background: var(--crema-3); }
.volta img { width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }
figcaption { font-size: .86rem; color: var(--tinta-3); margin-top: 8px; }
/* fotos: un mateix to càlid perquè les fotos de càmera d'acció semblin d'una sola mà */
.volta img, .foto img, .casa-foto img, .casa-mosaic img, .foto-sola img, .fotos-tira img { filter: saturate(.88) contrast(1.03) sepia(.06); }

.boto.linia-clara { background: transparent; color: var(--crema); border-color: color-mix(in srgb, var(--crema) 55%, transparent); }
.boto.linia-clara:hover { background: color-mix(in srgb, var(--crema) 10%, transparent); border-color: var(--crema); color: var(--blanc); }
.botons { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 0; }

/* carta de la nova etapa (portada i qui som) */
.etapa-mur { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.etapa-facana { width: 100%; height: auto; color: var(--terracota); }
.etapa-carta { max-width: 60ch; }
.etapa-carta h2 { margin-bottom: 22px; }
.etapa-carta p { font: 400 clamp(1.1rem, 1.5vw, 1.28rem)/1.6 var(--display); color: var(--tinta); }
.etapa-signa { margin-top: 26px; font-style: italic; color: var(--mari); display: grid; gap: 4px; }
.etapa-signa > span { font: 400 .92rem/1.4 var(--sans); font-style: normal; color: var(--tinta-2); }
@media (max-width: 860px) { .etapa-mur { grid-template-columns: 1fr; } .etapa-facana { max-width: 320px; } }

/* inventari: files amb una xifra i què vol dir (portada i qui som) */
.inventari { margin: 0; border-top: 1px solid var(--crema-3); display: grid; grid-template-columns: auto minmax(0, 1fr); }
.inventari > div { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 4px 22px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--crema-3); }
.inventari dt { font: 400 clamp(2rem, 3.6vw, 2.8rem)/1 var(--display); color: var(--terracota-fosc); font-variant-numeric: tabular-nums; }
.inventari dd { margin: 0; color: var(--tinta-2); }

/* com arribar: la ruta des de La Carral */
.arribar-mur { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.arribar-mur > * { min-width: 0; }
.arribar h2 { margin-bottom: 14px; }
.ruta { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; }
.ruta::before { content: ''; position: absolute; left: 6px; top: 18px; bottom: 18px; border-left: 2px dashed var(--terracota); }
.ruta li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--crema-3); }
.ruta li::before { content: ''; position: absolute; left: -26px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--crema); border: 2px solid var(--terracota); }
.sorra .ruta li::before { background: var(--crema-2); }
.ruta-lloc { font: 400 1.35rem/1.1 var(--display); color: var(--mari); }
.ruta-temps { font-weight: 600; color: var(--terracota-fosc); font-variant-numeric: tabular-nums; }
.ruta-km { color: var(--tinta-3); font-size: .92rem; font-variant-numeric: tabular-nums; min-width: 6ch; text-align: right; }
@media (max-width: 860px) { .arribar-mur { grid-template-columns: 1fr; } }