/* Pàgines interiors de La Carral (mòdul 05): públics, salut, qui som, contacte, condicions. També la carrega /estiu (mòdul 10).
   Capçalera sobre blau marí amb el títol subratllat amb el traç a mà i la foto amb l'arc de la masia. Classes pròpies amb prefix pag-. */

/* ---------- capçalera ---------- */
.pag-cap { background: var(--mari); color: var(--crema); padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 80px); }
.pag-cap-mur { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.pag-cap-mur > * { min-width: 0; }
.pag-cap h1 { color: var(--crema); margin: 0; text-shadow: none; font-size: clamp(2.4rem, 5.4vw, 4.2rem); }
.pag-cap h1 em { color: #f0b39f; }
.pag-cap h1::after { content: ''; display: block; width: min(220px, 60%); height: 14px; margin-top: 14px; background: var(--terracota);
  -webkit-mask: var(--trac) center / 100% 100% no-repeat; mask: var(--trac) center / 100% 100% no-repeat; }
.pag-cap p { max-width: 58ch; color: var(--lila); }
.pag-cap-intro { font-size: clamp(1.08rem, 1.5vw, 1.22rem); margin: 18px 0 0; }
.pag-cap-foto { --vr: 30%; aspect-ratio: 4 / 4.6; }
.pag-cap .botons { margin-top: 26px; }
.pag-cap .etiqueta-prop { color: #f0b39f; }
.pag-cap-curta { padding-bottom: clamp(32px, 5vw, 56px); }
.pag-cap-curta .pag-cap-mur { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) {
  .pag-cap-mur { grid-template-columns: 1fr; }
  .pag-cap-foto { --vr: 34%; aspect-ratio: 16 / 11; order: -1; }
}
/* compatibilitat amb la capçalera antiga (/estiu): .pag-cap > .mur.pag-cap-text + .ratlla */
.pag-cap > .pag-cap-text { padding-block: 0 8px; }
.pag-cap > .ratlla { display: none; }

/* fitxa ràpida sota el títol: quan, per a qui, preu… */
.pag-fitxa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 26px 0 0; border-top: 1px solid rgba(217, 210, 230, .22); }
.pag-fitxa > div { padding: 12px 0; border-bottom: 1px solid rgba(217, 210, 230, .22); min-width: 0; }
.pag-fitxa dt { font-size: .84rem; color: var(--lila); }
.pag-fitxa dd { margin: 2px 0 0; color: var(--crema); font-weight: 500; line-height: 1.4; }
.pag-fitxa .etiqueta-prop { margin-left: 0; }
@media (max-width: 520px) { .pag-fitxa { grid-template-columns: 1fr; } }

/* ---------- cos ---------- */
.pag-dues { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: start; }
.pag-dues > * { min-width: 0; }
.pag-dues h2 { margin-bottom: 14px; }
@media (max-width: 860px) { .pag-dues { grid-template-columns: 1fr; } }
.llista-ratlla { list-style: none; padding: 0; margin: 0 0 20px; border-top: 1px solid var(--crema-3); }
.llista-ratlla li { padding: 14px 0; border-bottom: 1px solid var(--crema-3); }
.sub { font-size: 1.35rem; margin: 0 0 12px; color: var(--mari); }
.sub + .llista-ratlla { margin-bottom: 28px; }
.sub-gran { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 14px; }
.text-llarg p:not(.entradeta) { max-width: 62ch; }
.foto-sola { margin-top: 20px; }
.foto-sola img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }

/* taules de preus i horaris (en text, mai en imatge) */
.taula-mur { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.taula-mur.una { grid-template-columns: minmax(0, 1fr); }
.taula-mur > * { min-width: 0; }
@media (max-width: 860px) { .taula-mur { grid-template-columns: 1fr; } }
.pag-taula { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.pag-taula th, .pag-taula td { text-align: left; padding: 12px 10px 12px 0; border-bottom: 1px solid var(--crema-3); vertical-align: baseline; }
.pag-taula thead th { font-size: .84rem; font-weight: 600; color: var(--tinta-2); border-bottom-color: var(--tinta-3); }
.pag-taula tbody th { font-weight: 500; }
.pag-taula .n { text-align: right; white-space: nowrap; padding-right: 0; padding-left: 12px; }
.pag-taula.preus td { font: 400 1.2rem/1.2 var(--display); color: var(--mari); }
.pag-taula.dia th { width: 9.5ch; white-space: nowrap; color: var(--terracota-fosc); font-weight: 600; }
.pag-taula.dades tbody th { font-weight: 600; }
.preus-notes .llista-ratlla { margin-bottom: 12px; }
@media (max-width: 520px) { .pag-taula.dades thead { display: none; } .pag-taula.dades tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--crema-3); }
  .pag-taula.dades th, .pag-taula.dades td { border: 0; padding: 2px 0; } .pag-taula.dades td:last-child { color: var(--terracota-fosc); font-weight: 600; } }

/* zona on els mòduls de grups hi posen el calendari i el pressupost */
.zona-reserva { scroll-margin-top: 80px; }
.zona-reserva:not(:has(.bloc:not([data-bloc="assistent-flotant"]))) { display: contents; }

/* com funciona: passos numerats (la seqüència és informació) */
.pag-passos { list-style: none; margin: 0; padding: 0; counter-reset: pas; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 28px clamp(20px, 3vw, 36px); }
.pag-passos > li { counter-increment: pas; min-width: 0; border-top: 1px solid var(--tinta-3); padding-top: 14px; }
.pag-passos > li::before { content: counter(pas); display: block; font: 400 2.6rem/1 var(--display); color: var(--terracota-fosc); margin-bottom: 10px; }
.pag-passos h3 { font-size: 1.3rem; margin-bottom: 8px; color: var(--mari); }
.pag-passos p { margin: 0; color: var(--tinta-2); font-size: .98rem; }
.pag-passos .etiqueta-prop { margin-left: 0; }

/* formats (empreses, gent gran) i models (AFA): columnes amb filet, sense caixes */
.pag-formats, .pag-models { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 clamp(20px, 3vw, 36px); }
.pag-formats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pag-formats.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pag-formats > li, .pag-models > li { border-top: 2px solid var(--mari); padding: 16px 0 22px; min-width: 0; }
.pag-formats h3, .pag-models h3 { font-size: 1.4rem; margin-bottom: 8px; color: var(--mari); }
.pag-formats p, .pag-models p { margin: 0 0 8px; color: var(--tinta-2); }
.pag-formats-preu { font-weight: 600; color: var(--terracota-fosc) !important; font-variant-numeric: tabular-nums; }
.pag-models { grid-template-columns: 1fr; }
.pag-models > li { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: 16px; align-items: baseline; border-top-width: 1px; border-color: var(--crema-3); }
.pag-models > li:first-child { border-top: 2px solid var(--mari); }
.pag-models .pag-models-nota { display: block; }
@media (max-width: 960px) { .pag-formats, .pag-formats.tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pag-formats, .pag-formats.tres { grid-template-columns: 1fr; } }

/* horari d'un dia (gent gran) */
.pag-horari { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--crema-3); }
.pag-horari li { display: grid; grid-template-columns: 7ch minmax(0, 1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--crema-3); align-items: baseline; }
.pag-horari-h { font: 400 1.3rem/1 var(--display); color: var(--terracota-fosc); font-variant-numeric: tabular-nums; }

/* valors (qui som) */
.pag-valors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px clamp(18px, 3vw, 32px); margin: 0; }
.pag-valors > div { border-top: 2px solid var(--mari); padding-top: 14px; min-width: 0; }
.pag-valors dt { font: 400 1.4rem/1.15 var(--display); color: var(--mari); margin-bottom: 6px; }
.pag-valors dd { margin: 0; color: var(--tinta-2); font-size: .98rem; }
@media (max-width: 960px) { .pag-valors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pag-valors { grid-template-columns: 1fr; } }

/* tira de fotos (entitats): a la mòbil, es llisca */
.fotos-tira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); margin-top: clamp(28px, 4vw, 48px); }
.fotos-tira img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.fotos-tira figcaption { font: 400 1.1rem/1.2 var(--display); color: var(--mari); }
@media (max-width: 700px) {
  .fotos-tira { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .fotos-tira > figure { scroll-snap-align: start; }
}

/* preguntes freqüents */
.faq { border-top: 1px solid var(--crema-3); }
.faq details { border-bottom: 1px solid var(--crema-3); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: 16px; align-items: center; min-height: 56px; padding: 12px 0; font-weight: 600; color: var(--mari); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 18px; height: 18px; justify-self: end;
  background: var(--terracota-fosc); transition: transform .3s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 1v16M1 9h16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M9 1v16M1 9h16' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover span { text-decoration: underline; text-decoration-color: var(--terracota); text-underline-offset: .25em; }
.faq-r p { margin: 0 0 16px; color: var(--tinta-2); max-width: 64ch; }

/* tancament fosc de cada pàgina */
.final-mur { display: grid; gap: 14px; justify-items: start; max-width: 860px; }
.final h2 em { color: #f0b39f; }
.final p { color: var(--malva); margin: 0; font-size: 1.1rem; }
.final .final-dades { font-size: 1.15rem; }
.final .final-dades a { display: inline-block; padding: 8px 0; }

/* índex dins la pàgina (salut) */
.index-pag { padding-block: 22px 0; }
.index-pag ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--crema-3); }
.index-pag a { display: inline-block; padding: 12px 0; font-weight: 500; color: var(--mari); }
.guarda { margin-top: clamp(32px, 5vw, 56px); }

/* lletra més gran (gent gran) */
.lletra-gran main { font-size: 1.125rem; }
.lletra-gran .pag-taula, .lletra-gran .pag-passos p { font-size: 1.05rem; }

/* ---------- contacte ---------- */
.contacte { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 72px); }
.contacte > * { min-width: 0; }
.contacte-canals { display: grid; gap: 0; border-top: 1px solid var(--crema-3); margin-bottom: 14px; }
.canal { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--crema-3); color: var(--tinta); text-decoration: none; }
.canal span { font-size: .9rem; color: var(--tinta-2); }
.canal b { font: 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.25 var(--display); color: var(--mari); overflow-wrap: anywhere; }
.canal:hover b { color: var(--terracota-fosc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.contacte-horaris .sub-gran:not(:first-child) { margin-top: 28px; }
.adreca { font-size: 1.05rem; }
@media (max-width: 860px) { .contacte { grid-template-columns: 1fr; } }

/* ---------- condicions, privacitat i galetes ---------- */
.legal { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); padding-block: clamp(40px, 6vw, 80px); }
.legal > * { min-width: 0; }
.legal-index ol { list-style: none; margin: 0; padding: 0; position: sticky; top: 96px; border-top: 1px solid var(--crema-3); }
.legal-index li { border-bottom: 1px solid var(--crema-3); }
.legal-index a { display: block; padding: 12px 0; font-weight: 500; color: var(--mari); }
.legal-text { max-width: 72ch; }
.legal-text section { scroll-margin-top: 90px; padding-bottom: clamp(28px, 4vw, 48px); }
.legal-text section + section { border-top: 1px solid var(--crema-3); padding-top: clamp(28px, 4vw, 48px); }
.legal-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 16px; }
.legal-text h3 { font-size: 1.25rem; margin: 26px 0 8px; color: var(--mari); }
.esborrany { margin-bottom: 8px; background: #fbe6dc; color: #5f2618; }
.documents a { font-weight: 500; }
@media (max-width: 860px) { .legal { grid-template-columns: 1fr; } .legal-index ol { position: static; } }