/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 4.4
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* ============================================================
   CristinaConnecta — components ported from reference design
   (web1/index.html). Prefixed .cc- to avoid Flatsome clashes.
   ============================================================ */

.cc-eyebrow{font-family:'Raleway',sans-serif;font-size:.78rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:#B8854A;display:block;margin-bottom:.75rem}
.cc-lead{color:#8A7260;font-size:1.05rem;margin-top:.75rem}

/* feature row (text + aside) */
.cc-feature-row{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}

/* timeline */
.cc-timeline{display:flex;flex-direction:column;position:relative;padding-left:3rem}
.cc-timeline::before{content:'';position:absolute;left:12px;top:8px;bottom:8px;width:2px;background:linear-gradient(to bottom,#B8C99A,#EDE3D3);border-radius:2px}
.cc-timeline-item{position:relative;padding:1.25rem 0}
.cc-timeline-item::before{content:'';position:absolute;left:-2.1rem;top:1.65rem;width:12px;height:12px;border-radius:50%;background:#5C7A3E;border:3px solid #F5EDE0;box-shadow:0 0 0 3px #B8C99A}
.cc-timeline-item h4{font-family:'Lora',Georgia,serif;color:#2A2318;font-size:1rem;margin:0 0 .25rem}
.cc-timeline-item p{color:#8A7260;font-size:.92rem;margin:0;max-width:100%}

/* learning blocks */
.cc-learning-blocks{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
.cc-learning-block{background:#FDFAF6;border-radius:18px;padding:1.75rem 1.5rem;border-bottom:3px solid #B8C99A;text-align:center;box-shadow:0 4px 24px rgba(42,35,24,.06)}
.cc-learning-block:nth-child(2){border-bottom-color:#D4A06A}
.cc-learning-block:nth-child(3){border-bottom-color:#B8854A}
.cc-learning-block:nth-child(4){border-bottom-color:#5C7A3E}
.cc-learning-block h4{font-family:'Lora',Georgia,serif;font-size:.98rem;margin:0 0 .4rem;color:#2A2318}
.cc-learning-block p{font-size:.9rem;color:#8A7260;margin:0;max-width:100%}

/* why box */
.cc-why-box{background:linear-gradient(135deg,#EDE3D3,#F5EDE0);border-radius:24px;padding:3.5rem;border:1px solid rgba(184,197,154,.4);text-align:center}
.cc-why-box h2{font-family:'Lora',Georgia,serif;color:#2A2318;font-weight:600;margin:0}
.cc-why-box p{max-width:60ch;margin:1rem auto 0;color:#8A7260;font-size:1.05rem}
.cc-quote{font-family:'Lora',Georgia,serif;font-size:1.15rem;font-style:italic;color:#5C7A3E;border-left:3px solid #D4A06A;padding-left:1.25rem;margin:1.5rem auto;max-width:52ch;text-align:left}

/* persona grid */
.cc-persona-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.cc-persona-card{background:#FDFAF6;border-radius:18px;padding:1.75rem;border:1px solid rgba(184,197,154,.25);display:flex;gap:1rem;align-items:flex-start;box-shadow:0 4px 24px rgba(42,35,24,.05)}
.cc-persona-card .cc-p-icon{font-size:1.75rem;flex-shrink:0;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.cc-persona-card h4{font-family:'Lora',Georgia,serif;color:#2A2318;margin:0 0 .25rem;font-size:1.05rem}
.cc-persona-card p{color:#8A7260;font-size:.92rem;margin:0;max-width:100%}

/* study box */
.cc-study-box{background:#FDFAF6;border-radius:24px;padding:2.5rem;border:1px solid rgba(184,197,154,.3)}
.cc-study-box h3{margin:0 0 1.5rem;font-size:1rem;letter-spacing:.08em;text-transform:uppercase;color:#B8854A;font-family:'Raleway',sans-serif;font-weight:700}
.cc-study-list{display:flex;flex-direction:column;gap:.85rem}
.cc-study-list>div{display:flex;gap:.75rem;align-items:center;color:#8A7260}
.cc-study-list .cc-arrow{color:#5C7A3E;font-weight:700}

/* beyond grid */
.cc-beyond-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.cc-beyond-item{display:flex;align-items:center;gap:.85rem;background:#FDFAF6;border-radius:14px;padding:1.1rem 1.25rem;font-size:.95rem;font-weight:500;color:#2A2318;border:1px solid rgba(184,197,154,.25)}
.cc-beyond-item span:first-child{font-size:1.4rem}

/* cta */
.cc-cta{background:#EDE3D3;border-radius:28px;padding:3.5rem 3rem;text-align:center;max-width:800px;margin:0 auto}
.cc-cta h2{font-family:'Lora',Georgia,serif;color:#2A2318;margin:0 0 1rem}
.cc-cta p{color:#8A7260;margin:0 auto 2rem;max-width:54ch}
.cc-btn{display:inline-block;padding:.75rem 1.75rem;border-radius:50px;font-family:'Raleway',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.03em;background:#5C7A3E;color:#F5EDE0;border:2px solid #5C7A3E;transition:all .3s ease}
.cc-btn:hover{background:#2A2318;border-color:#2A2318;color:#F5EDE0}

@media (max-width:849px){
  .cc-feature-row{grid-template-columns:1fr;gap:2.5rem}
  .cc-learning-blocks{grid-template-columns:1fr 1fr}
  .cc-persona-grid{grid-template-columns:1fr}
  .cc-beyond-grid{grid-template-columns:1fr}
  .cc-why-box{padding:2.5rem 1.5rem}
  .cc-cta{padding:2.5rem 1.5rem}
}
@media (max-width:549px){
  .cc-learning-blocks{grid-template-columns:1fr}
}

/* ============================================================
   Inici (home) components
   ============================================================ */
/*.cc-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}*/
.cc-hero-grid h1{font-family:'Lora',Georgia,serif;color:#2A2318;font-size:clamp(2rem,5vw,3.4rem);font-weight:500;line-height:1.2;margin:.5rem 0 1.25rem}
.cc-hero-grid p{color:#8A7260;font-size:1.1rem;max-width:52ch;margin-bottom:2rem}
.cc-hero-btns{display:flex;flex-wrap:wrap;gap:.75rem}
.cc-hero-visual{display:flex;justify-content:center;align-items:center}
.cc-hero-visual svg{width:100%;max-width:440px;animation:ccFloat 6s ease-in-out infinite}
@keyframes ccFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.cc-hero-visual svg{animation:none}}

/* Hero sense imatge al costat (Contacte): el text ocupa tota l'amplada de la
   fila (1200px), igual que els paràgrafs d'entrada de Sobre mi i Serveis.
   Abans hi havia un límit de 900px que el feia semblar més estret que la resta. */
.cc-hero-wide p{max-width:none}

/* Home hero text column (replaces the old .cc-hero-grid wrapper) */
.cc-hero-text h1{font-family:'Lora',Georgia,serif;color:#2A2318;font-size:clamp(2rem,5vw,3.4rem);font-weight:500;line-height:1.2;margin:.5rem 0 1.25rem}
.cc-hero-text p{color:#8A7260;font-size:1.1rem;max-width:52ch;margin-bottom:2rem}

/* Home hero image (sits in its own Flatsome column, next to the text) */
.cc-hero-col{display:flex;align-items:center}
.cc-hero-img{width:100%;margin:0 0 0 auto}
.cc-hero-img img{width:100%;height:auto;display:block;border-radius:18px}
@media (max-width:849px){
  .cc-hero-img{margin:0 auto;max-width:420px}
}

.cc-btn-secondary{display:inline-block;padding:.75rem 1.75rem;border-radius:50px;font-family:'Raleway',sans-serif;font-size:.95rem;font-weight:600;letter-spacing:.03em;background:transparent;color:#5C7A3E;border:2px solid #B8C99A;transition:all .3s ease}
.cc-btn-secondary:hover{background:#B8C99A;color:#2A2318}

.cc-trust{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem 2.5rem}
.cc-trust-item{display:flex;align-items:center;gap:.75rem;color:#F5EDE0}
.cc-trust-item .cc-dot{width:8px;height:8px;background:#D4A06A;border-radius:50%;flex-shrink:0}
.cc-trust-item span{font-size:.9rem;font-weight:500}
.cc-trust-sep{color:#B8C99A;opacity:.5;font-size:1.4rem}

.cc-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.cc-card{background:#FDFAF6;border-radius:18px;padding:2rem;box-shadow:0 4px 24px rgba(42,35,24,.07);border:1px solid rgba(184,197,154,.25);transition:all .3s ease;position:relative;overflow:hidden}
.cc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#B8C99A,#5C7A3E);opacity:0;transition:opacity .3s ease}
.cc-card:hover{transform:translateY(-5px);box-shadow:0 8px 36px rgba(42,35,24,.13)}
.cc-card:hover::before{opacity:1}
.cc-card-icon{width:52px;height:52px;background:#F5EDE0;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:1.25rem;font-size:1.5rem}
.cc-card h3{font-family:'Lora',Georgia,serif;color:#2A2318;margin:0 0 .6rem;font-size:1.2rem}
.cc-card p{color:#8A7260;font-size:.95rem;margin:0;max-width:100%}
.cc-card-link{display:inline-block;font-size:.88rem;font-weight:600;color:#5C7A3E;margin-top:1rem;border-bottom:1px solid #B8C99A;padding-bottom:2px}
.cc-card-link:hover{color:#B8854A;border-color:#B8854A}

.cc-about-mini{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.cc-about-img{aspect-ratio:4/5;border-radius:24px;background:linear-gradient(135deg,#B8C99A,#5C7A3E);display:flex;align-items:center;justify-content:center;position:relative;max-width:360px}
.cc-about-img .cc-badge{position:absolute;bottom:-16px;right:-16px;background:#B8854A;color:#F5EDE0;border-radius:14px;padding:1rem 1.25rem;font-size:.85rem;font-weight:600;box-shadow:0 4px 24px rgba(42,35,24,.15);max-width:190px}

.cc-approach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.cc-approach-block{text-align:center;padding:2rem 1.25rem;background:#FDFAF6;border-radius:18px;box-shadow:0 4px 24px rgba(42,35,24,.06);border:1px solid rgba(184,197,154,.2)}
.cc-approach-num{font-family:'Lora',Georgia,serif;font-size:2.5rem;font-weight:600;color:#B8C99A;line-height:1;margin-bottom:.5rem}
.cc-approach-block h3{font-family:'Lora',Georgia,serif;font-size:1.1rem;margin:0 0 .4rem;color:#2A2318}
.cc-approach-block p{font-size:.9rem;color:#8A7260;margin:0;max-width:100%}

.cc-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.cc-blog-card{background:#FDFAF6;border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(42,35,24,.07);transition:all .3s ease;display:block}
.cc-blog-card:hover{transform:translateY(-5px);box-shadow:0 8px 36px rgba(42,35,24,.13)}
.cc-blog-img{aspect-ratio:16/9;background:linear-gradient(135deg,#EDE3D3,#B8C99A)}
.cc-blog-body{padding:1.5rem}
.cc-blog-tag{display:inline-block;font-size:.73rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#B8854A;background:rgba(184,133,74,.1);padding:.25rem .7rem;border-radius:50px;margin-bottom:.75rem}
.cc-blog-body h3{font-family:'Lora',Georgia,serif;font-size:1.1rem;margin:0 0 .5rem;color:#2A2318}
.cc-blog-body p{font-size:.9rem;color:#8A7260;margin:0;max-width:100%}
.cc-blog-meta{margin-top:1rem;font-size:.8rem;color:#C4B4A4;font-weight:500}
.cc-center{text-align:center;margin-top:2.5rem}

@media (max-width:849px){
  .cc-hero-grid{grid-template-columns:1fr;gap:2.5rem;text-align:center}
  .cc-hero-grid p{max-width:100%;margin-left:auto;margin-right:auto}
  .cc-hero-btns{justify-content:center}
  .cc-hero-visual{max-width:340px;margin:0 auto}
  .cc-cards-grid{grid-template-columns:1fr}
  .cc-about-mini{grid-template-columns:1fr;gap:3rem}
  .cc-about-img{margin:0 auto}
  .cc-approach-grid{grid-template-columns:1fr 1fr}
  .cc-blog-grid{grid-template-columns:1fr}
  .cc-trust{gap:1rem 1.25rem}
  .cc-trust-sep{display:none}
}

/* ============================================================
   Serveis + Contacte components
   ============================================================ */
.cc-narrow{max-width:800px;margin:0 auto;text-align:center}
.cc-narrow p{margin:1rem auto 0}
.cc-label{font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B8854A;margin-bottom:.75rem}

/* service blocks */
.cc-service-block{background:#FDFAF6;border-radius:24px;padding:3rem;box-shadow:0 4px 24px rgba(42,35,24,.07);margin-bottom:2rem;border-left:4px solid #5C7A3E;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.cc-service-block h2{font-family:'Lora',Georgia,serif;color:#2A2318;margin:0}
.cc-service-block p{color:#8A7260;max-width:100%}
.cc-service-tag{display:inline-block;padding:.25rem .75rem;border-radius:50px;font-size:.78rem;font-weight:600;background:rgba(92,122,62,.1);color:#5C7A3E;margin:.25rem .25rem 0 0}
.cc-service-list{list-style:none;padding:0;margin:0}
.cc-service-list li{display:flex;align-items:flex-start;gap:.6rem;font-size:.95rem;margin-bottom:.5rem;color:#8A7260}
.cc-service-list li::before{content:'→';color:#5C7A3E;font-weight:700;flex-shrink:0}
.cc-service-benefit{background:#F5EDE0;border-radius:12px;padding:1rem 1.25rem;margin-top:1.25rem;font-size:.9rem;font-weight:500;color:#2A2318;display:flex;gap:.5rem;align-items:flex-start}
.cc-service-benefit::before{content:'✦';color:#D4A06A;flex-shrink:0}

/* FAQ (native details/summary, no JS) */
.cc-faq{display:flex;flex-direction:column;gap:1rem;max-width:800px}
.cc-faq details{background:#FDFAF6;border-radius:18px;border:1px solid rgba(184,197,154,.3);overflow:hidden}
.cc-faq summary{list-style:none;cursor:pointer;padding:1.25rem 1.5rem;font-weight:600;color:#2A2318;font-size:.98rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cc-faq summary::-webkit-details-marker{display:none}
.cc-faq summary::after{content:'+';color:#B8854A;font-size:1.3rem;line-height:1;transition:transform .3s ease;flex-shrink:0}
.cc-faq details[open] summary::after{transform:rotate(45deg)}
.cc-faq summary:hover{color:#5C7A3E}
.cc-faq .cc-faq-a{padding:0 1.5rem 1.25rem;color:#8A7260;font-size:.95rem;text-align:left !important;}
.cc-narrow .cc-faq .cc-faq{text-align:left !important;}
/* contact info + process */
.cc-contact-info-item{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}
.cc-ci-icon{width:44px;height:44px;background:#EDE3D3;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.cc-ci-text{font-size:.95rem}
.cc-ci-text strong{display:block;font-weight:600;color:#2A2318;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.2rem}
.cc-process-steps{display:flex;flex-direction:column;gap:1.25rem}
.cc-step-item{display:flex;gap:1.25rem;align-items:flex-start;padding:1.25rem 1.5rem;background:#FDFAF6;border-radius:18px;border:1px solid rgba(184,197,154,.2)}
.cc-step-num{font-family:'Lora',Georgia,serif;font-size:1.8rem;font-weight:700;color:#C4B4A4;line-height:1;min-width:2rem}
.cc-step-item h4{font-family:'Lora',Georgia,serif;color:#2A2318;margin:0 0 .25rem}
.cc-step-item p{font-size:.9rem;color:#8A7260;margin:0;max-width:100%}

/* emotional close */
.cc-emotional{background:linear-gradient(135deg,#5C7A3E,#3d5228);color:#F5EDE0;border-radius:24px;padding:4rem 3rem;text-align:center}
.cc-emotional h2{color:#F5EDE0;font-family:'Lora',Georgia,serif;margin:0 0 1rem}
.cc-emotional p{color:rgba(245,237,224,.85);margin:0 auto 1rem;max-width:54ch}
.cc-emotional .cc-eyebrow{color:#B8C99A}
.cc-btn-ocre{display:inline-block;padding:.75rem 1.75rem;border-radius:50px;font-family:'Raleway',sans-serif;font-weight:600;background:#D4A06A;color:#2A2318;border:none;margin-top:1rem;transition:all .3s ease}
.cc-btn-ocre:hover{background:#F5EDE0;color:#2A2318}
.cc-anchor{display:block;height:0;scroll-margin-top:100px}

@media (max-width:849px){
  .cc-service-block{grid-template-columns:1fr;gap:1.5rem;padding:2rem}
  .cc-emotional{padding:3rem 1.5rem}
}

/* ============================================================
   Blog list — style Flatsome [blog_posts] like the reference
   ============================================================ */
.cc-bloglist .post-item{margin-bottom:1.75rem}
.cc-bloglist .col-inner{height:100%}
.cc-bloglist .box-blog-post{background:#FDFAF6;border-radius:18px;overflow:hidden;box-shadow:0 4px 24px rgba(42,35,24,.07);transition:transform .3s ease,box-shadow .3s ease;height:100%}
.cc-bloglist .box-blog-post:hover{transform:translateY(-5px);box-shadow:0 8px 36px rgba(42,35,24,.13)}
.cc-bloglist .box-image{border-radius:0 !important;margin:0}
.cc-bloglist .box-image .image-cover{border-radius:0 !important}
.cc-bloglist .badge{display:none !important}
.cc-bloglist .box-text{padding:1.3rem 1.4rem !important;text-align:left !important;background:#FDFAF6}
.cc-bloglist .post-title{font-family:'Lora',Georgia,serif !important;color:#2A2318;font-size:1.1rem;line-height:1.3;margin:0 0 .45rem}
.cc-bloglist .post-title a{color:#2A2318}
.cc-bloglist .post-title a:hover{color:#5C7A3E}
.cc-bloglist .from_the_blog_excerpt,.cc-bloglist .is-excerpt,.cc-bloglist .box-text p{color:#8A7260;font-size:.9rem;line-height:1.6;margin:0}
.cc-bloglist .post-meta,.cc-bloglist .entry-meta,.cc-bloglist .is-divider{color:#C4B4A4}
.cc-bloglist .is-divider{display:none}
.cc-bloglist .cat-label{display:none !important}
.cc-bloglist .from_the_blog_excerpt.show-on-hover,.cc-bloglist .from_the_blog_excerpt{opacity:1 !important;visibility:visible !important;position:static !important;transform:none !important;pointer-events:auto !important}

/* ============================================================
   Blog — featured (latest) article, large horizontal dark card
   ============================================================ */
.cc-featured .post-item{width:100% !important;margin:0}
.cc-featured .col-inner{height:100%}
.cc-featured .box-blog-post{display:flex;flex-direction:row-reverse;background:#2A2318;border-radius:24px;overflow:hidden;box-shadow:0 8px 36px rgba(42,35,24,.18);min-height:320px}
.cc-featured .box-image{flex:1 1 50%;margin:0;position:relative;overflow:hidden}
.cc-featured .box-image .image-cover{position:absolute !important;inset:0;padding:0 !important;height:100% !important;width:100%}
.cc-featured .box-image .image-cover a{display:block;height:100%}
.cc-featured .box-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cc-featured .badge{display:none !important}
.cc-featured .box-text{flex:1 1 50%;display:flex;flex-direction:column;justify-content:center;padding:3rem !important;text-align:left !important;background:transparent}
.cc-featured .box-text-inner::before{content:"Destacat";display:block;color:#D4A06A;font-size:.75rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.6rem}
.cc-featured .post-title{font-family:'Lora',Georgia,serif !important;font-size:1.7rem !important;line-height:1.25;margin:0 0 .6rem}
.cc-featured .post-title a{color:#F5EDE0 !important}
.cc-featured .post-title a:hover{color:#D4A06A !important}
.cc-featured .cat-label{display:none !important}
.cc-featured .from_the_blog_excerpt,.cc-featured .is-excerpt{opacity:1 !important;visibility:visible !important;position:static !important;transform:none !important;color:rgba(245,237,224,.82) !important;font-size:1rem;line-height:1.6}
.cc-featured .is-divider{display:none}
@media (max-width:849px){
  .cc-featured .box-blog-post{flex-direction:column;min-height:0}
  .cc-featured .box-image{flex:none;height:220px}
  .cc-featured .box-image .image-cover{position:relative !important;height:220px !important}
  .cc-featured .box-text{padding:2rem !important}
}

/* ============================================================
   Single blog article — reference article styling
   ============================================================ */
.single-post .badge{display:none !important}
.single-post .entry-image{border-radius:14px;overflow:hidden}
.single-post .entry-image img{border-radius:14px;display:block}
.single-post .entry-title{font-family:'Lora',Georgia,serif !important;color:#2A2318;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.2}
.single-post .entry-content{max-width:760px;margin-left:auto;margin-right:auto;color:#8A7260;font-size:1.05rem;line-height:1.8}
.single-post .entry-content h2{font-family:'Lora',Georgia,serif;color:#2A2318;font-size:1.5rem;margin:2.4rem 0 .8rem;line-height:1.3}
.single-post .entry-content h3{font-family:'Lora',Georgia,serif;color:#2A2318;margin:1.8rem 0 .6rem}
.single-post .entry-content p{margin-bottom:1.25rem}
.single-post .entry-content blockquote{font-family:'Lora',Georgia,serif;font-size:1.2rem;font-style:italic;color:#5C7A3E;border-left:3px solid #D4A06A;background:#EDE3D3;border-radius:0 12px 12px 0;padding:1.1rem 1.5rem;margin:2rem 0;max-width:100%}
.single-post .entry-content blockquote p{margin:0;color:#5C7A3E}
.single-post .entry-content img{border-radius:14px}
.single-post .entry-meta,.single-post .post-meta,.single-post .is-divider{color:#C4B4A4}
.single-post .from_the_blog_meta,.single-post .entry-meta a{color:#B8854A}

/* ============================================================
   Legal pages (cookies / privacy / legal notice)
   ============================================================ */
.cc-legal{max-width:760px;margin:0 auto}
.cc-legal h2{font-family:'Lora',Georgia,serif;color:#2A2318;font-size:1.35rem;margin:2.5rem 0 .75rem}
.cc-legal h2:first-child{margin-top:0}
.cc-legal p{color:#8A7260;margin:0 0 1rem;max-width:100%;line-height:1.7}
.cc-legal ul{margin:0 0 1.25rem;padding-left:1.15rem}
.cc-legal li{color:#8A7260;margin-bottom:.5rem;line-height:1.6}
.cc-legal strong{color:#2A2318;font-weight:600}
.cc-legal a{color:#5C7A3E;border-bottom:1px solid #B8C99A}
.cc-legal a:hover{color:#B8854A;border-color:#B8854A}
.cc-legal table{width:100%;border-collapse:collapse;margin:0 0 1.5rem;background:#FDFAF6;border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(42,35,24,.05)}
.cc-legal th{background:#EDE3D3;color:#2A2318;font-family:'Raleway',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:.85rem 1rem}
.cc-legal td{padding:.85rem 1rem;color:#8A7260;font-size:.93rem;border-top:1px solid rgba(184,197,154,.25);vertical-align:top;line-height:1.6}
.cc-legal-note{background:linear-gradient(135deg,#EDE3D3,#F5EDE0);border-left:3px solid #5C7A3E;border-radius:14px;padding:1.5rem 1.75rem;margin:0 0 2rem}
.cc-legal-note p{color:#2A2318}
.cc-legal-note p:last-child{margin-bottom:0}
.cc-placeholder{background:rgba(212,160,106,.22);color:#8a5a20;padding:.1rem .45rem;border-radius:5px;font-weight:600;font-size:.95em;border:1px dashed rgba(184,133,74,.5)}
@media (max-width:549px){
  .cc-legal table,.cc-legal thead,.cc-legal tbody,.cc-legal th,.cc-legal td,.cc-legal tr{display:block}
  .cc-legal thead{display:none}
  .cc-legal td{border-top:none;padding:.4rem 1rem}
  .cc-legal tr{border-top:1px solid rgba(184,197,154,.3);padding:.75rem 0}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

/* ============================================================
   HOVER UNIFICAT DELS BOTONS VERDS  (Bosc #5C7A3E -> Salvia #B8C99A)
   ------------------------------------------------------------
   Abans cada botó verd tenia un hover diferent:
     · .button.primary (menú "Parlem")  -> Flatsome l'enfosquia sol (#4A6232)
     · .cc-btn (home i pàgines)         -> passava a Nit (#2A2318)
     · #srfm-submit-btn (formulari)     -> el verd amb opacitat de SureForms
   Ara tots fan el mateix: fons Salvia amb text Nit (mateix patró que
   .cc-btn-secondary:hover, que ja funcionava així).
   El text passa a Nit perquè sobre Salvia el Crema no es llegiria.
   !important: el CSS que Flatsome genera al Customizer es carrega
   DESPRÉS d'aquest fitxer i, si no, guanyaria ell.
   ============================================================ */
.cc-btn:hover,
.button.primary:hover,
#srfm-submit-btn:hover,
.srfm-btn-frontend:hover,
.srfm-submit-button:hover {
	background-color: #B8C99A !important;
	border-color: #B8C99A !important;
	color: #2A2318 !important;
}

/* ============================================================
   JOC D'ICONES SVG (2026-07-31)
   Substitueixen els 13 emoji que feien d'icona a Inici, Sobre mi,
   Blog i Contacte. Els emoji els dibuixa cada sistema operatiu a la
   seva manera (i amb els seus colors), així que la mateixa pàgina es
   veia diferent a cada ordinador.

   Van com a fons i no dins del contingut, per dos motius:
     1. l'UX Builder no els pot trencar en editar la pàgina;
     2. un lector de pantalla els ignora, que és el que toca en una
        icona decorativa (els emoji sí que es llegeixen en veu alta:
        "planta de viver", "herba"... soroll pur al costat del títol).

   Totes en Bosc #5C7A3E i amb el mateix gruix de traç: un sol joc.
   ============================================================ */
.cc-ico {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 24px 24px;
}
.cc-card-icon.cc-ico {
	background-size: 26px 26px;
}

.cc-ico-brot      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21v-8'/%3E%3Cpath d='M12 13c0-3.3-2.7-6-6-6 0 3.3 2.7 6 6 6z'/%3E%3Cpath d='M12 13c0-2.8 2.2-5 5-5 0 2.8-2.2 5-5 5z'/%3E%3C/svg%3E"); }
.cc-ico-fulla     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 20C5 11 10 5 19 4c1 9-5 15-14 16z'/%3E%3Cpath d='M9 20c1-5 4-8 8-10'/%3E%3C/svg%3E"); }
.cc-ico-espurna   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 6.8L21 12l-6.8 2.2L12 21l-2.2-6.8L3 12l6.8-2.2z'/%3E%3C/svg%3E"); }
.cc-ico-proveta   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v6l-4.6 9.2A2 2 0 0 0 6.2 21h11.6a2 2 0 0 0 1.8-2.8L15 9V3'/%3E%3Cpath d='M8 3h8'/%3E%3Cpath d='M7.5 15h9'/%3E%3C/svg%3E"); }
.cc-ico-idea      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10.5a6.5 6.5 0 0 1-6.5 6.5H9l-4 3v-3.9A6.5 6.5 0 0 1 9 4h5.5A6.5 6.5 0 0 1 21 10.5z'/%3E%3C/svg%3E"); }
.cc-ico-bombeta   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a6.5 6.5 0 0 0-3.8 11.8c.5.4.8 1 .8 1.6V17h6v-1.6c0-.6.3-1.2.8-1.6A6.5 6.5 0 0 0 12 2z'/%3E%3Cpath d='M9.5 21h5'/%3E%3C/svg%3E"); }
.cc-ico-confianca { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7.5-3.9 7.5-9.8V5.2L12 2.4 4.5 5.2v7c0 5.9 7.5 9.8 7.5 9.8z'/%3E%3Cpath d='M9 12l2.2 2.2L15.5 10'/%3E%3C/svg%3E"); }
.cc-ico-correu    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7.5l8.5 5.5 8.5-5.5'/%3E%3C/svg%3E"); }
.cc-ico-maleti    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='7' width='19' height='13.5' rx='2.5'/%3E%3Cpath d='M15.5 7V5.5a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2V7'/%3E%3Cpath d='M2.5 12.5h19'/%3E%3C/svg%3E"); }
.cc-ico-ubicacio  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5s7-6 7-11a7 7 0 1 0-14 0c0 5 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10.5' r='2.6'/%3E%3C/svg%3E"); }
.cc-ico-llibres   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7c-1.5-1.5-3.5-2-6-2H4v12h2.5c2.2 0 4.1.6 5.5 2'/%3E%3Cpath d='M12 7c1.5-1.5 3.5-2 6-2h2v12h-2.5c-2.2 0-4.1.6-5.5 2'/%3E%3Cpath d='M12 7v12'/%3E%3C/svg%3E"); }
.cc-ico-paleta    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 0 0 0 18c1 0 1.7-.8 1.7-1.7 0-.4-.2-.8-.4-1.1-.3-.3-.4-.6-.4-1 0-.9.7-1.7 1.7-1.7H16a5 5 0 0 0 5-5c0-4.1-4-7.5-9-7.5z'/%3E%3Ccircle cx='7.5' cy='11.5' r='1.1'/%3E%3Ccircle cx='10.5' cy='7.8' r='1.1'/%3E%3Ccircle cx='15' cy='8.3' r='1.1'/%3E%3C/svg%3E"); }
.cc-ico-camina    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C7A3E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='4' r='2'/%3E%3Cpath d='M9.5 21l2.3-5.4-2.3-2.6 1-4.6'/%3E%3Cpath d='M11.8 15.6l3.2 1.7 1 3.7'/%3E%3Cpath d='M10.5 8.4l3.4-1 1.6 3.2 2.5 1'/%3E%3C/svg%3E"); }

/* El contenidor de «Més enllà de la tecnologia» és un <span> sense mida
   pròpia (el sostenia la mida de lletra de l'emoji): cal donar-li-la. */
.cc-beyond-item span.cc-ico {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	background-size: 24px 24px;
}

/* ============================================================
   CAPTURES DE LA PÀGINA DE PROJECTES (2026-07-31)
   Cada figura porta un max-width propi igual a l'amplada real
   de la captura, perquè no s'ampliï més enllà i es vegi borrosa
   (en van de 830 px a 1899 px).
   ============================================================ */
.cc-project-shot {
	margin: 2rem auto 0;
	max-width: 100%;
}
.cc-project-shot img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
	border: 1px solid rgba(184, 197, 154, .3);
	box-shadow: 0 4px 24px rgba(42, 35, 24, .07);
}
.cc-project-shot figcaption {
	font-family: 'Raleway', sans-serif;
	font-size: .88rem;
	color: #8A7260;
	text-align: center;
	margin-top: .85rem;
	line-height: 1.5;
}

/* ---- Lema sota el logotip (2026-08-17) ---- */
#logo.logo {
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

#logo .logo-tagline {
	margin: -1rem 0 0 4.8rem;
	font-family: 'Raleway', sans-serif;
	font-size: 0.55rem;
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.13em;
	line-height: 1.2;
	text-transform: uppercase;
	color: #8a7260;
	white-space: nowrap;
}

/* A mòbil el logotip va centrat i no hi cap: l'amaguem */
@media (max-width: 849px) {
	#logo .logo-tagline {
		display: none;
	}
}

/* ============================================================================
   CristinaConnecta — sistema de blocs per als articles del blog
   ============================================================================

   Com funciona
   ------------
   Cada bloc és una classe `cc-*`. L'agent escriu HTML amb aquestes classes i
   res més: ni estils inline, ni <style>, ni hex al cos de l'article. Així el
   dia que vulguis canviar l'aspecte dels articles, es canvia aquí i afecta
   tots els articles alhora, també els vells.

   Convivència amb el tema
   -----------------------
   - Cap regla toca selectors d'element nus (h2, p, table...). Tot va dins de
     `.cc-*`, així que el tema mana a fora i nosaltres manem a dins.
   - Els tokens van prefixats `--cc-` per no xocar amb els del tema.
   - Cap `!important` al cos. N'hi ha un de sol a `@media print`, per obrir
     les FAQ en paper: allà cal guanyar-li a la regla del navegador. Si algun
     bloc no s'aplica, és que el tema té un selector més específic; s'arregla
     afegint especificitat aquí, no a cops d'`!important`.

   Instal·lació
   ------------
   Aparença → Editor → Estils → CSS addicional, o millor, al `style.css` del
   tema fill. Les tipografies Lora i Raleway s'han de carregar al tema (mira
   el README).

   Contrast (comprovat, no estimat)
   --------------------------------
   Nit sobre Crema .............. 15.7:1   ✓ AAA
   Crema sobre Bosc fosc ......... 7.2:1   ✓ AAA
   Nit sobre Terra ............... 4.8:1   ✓ AA
   Nit sobre Salvia .............. 11.3:1  ✓ AAA
   Crema sobre Bosc .............. 4.2:1   ✗ només ≥24px — per això els
                                             botons fan servir Nit sobre
                                             Terra i les superfícies fosques
                                             fan servir Bosc fosc.
   ========================================================================= */

:root {
  /* Paleta de marca */
  --cc-bosc: #5c7a3e;
  --cc-bosc-fosc: #3e5429; /* derivat: superfícies fosques amb text Crema */
  --cc-fulla: #7a9e52;
  --cc-salvia: #b8c99a;
  --cc-terra: #b8854a;
  --cc-ocre: #d4a06a;
  --cc-crema: #f5ede0;
  --cc-nit: #2a2318;

  /* Tints derivats. Sempre a partir de la paleta, mai grisos neutres:
     un gris al mig d'un món càlid es veu brut. */
  --cc-superficie: color-mix(in srgb, var(--cc-salvia) 22%, var(--cc-crema));
  --cc-superficie-suau: color-mix(in srgb, var(--cc-salvia) 12%, var(--cc-crema));
  --cc-vora: color-mix(in srgb, var(--cc-bosc) 28%, transparent);
  --cc-vora-fina: color-mix(in srgb, var(--cc-bosc) 15%, transparent);
  --cc-text-suau: color-mix(in srgb, var(--cc-nit) 72%, var(--cc-crema));

  /* Tipografia */
  --cc-serif: "Lora", Georgia, "Times New Roman", serif;
  --cc-sans: "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Ritme vertical. Una sola escala, per no acabar amb 14 valors a ull. */
  --cc-s1: 0.375rem;
  --cc-s2: 0.75rem;
  --cc-s3: 1.125rem;
  --cc-s4: 1.75rem;
  --cc-s5: 2.5rem;
  --cc-s6: 3.5rem;

  --cc-radi: 10px;
  --cc-radi-petit: 6px;

  /* Ombres amb desplaçament i difuminat: la llum ve de dalt, com sempre. */
  --cc-ombra: 0 2px 4px -1px color-mix(in srgb, var(--cc-nit) 8%, transparent),
    0 8px 20px -6px color-mix(in srgb, var(--cc-nit) 12%, transparent);

  --cc-mida: 68ch; /* amplada de lectura còmoda */
  --cc-transicio: 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Amplada de lectura. Opcional: posa la classe al contenidor del contingut
   si el tema no la controla ja. */
.cc-article {
  max-width: var(--cc-mida);
  margin-inline: auto;
}

/* Els blocs respiren: sempre més aire a sobre que a sota, perquè cada bloc
   pertany al text que ve després, no al que ve abans. */
.cc-takeaway,
.cc-callout,
.cc-quote,
.cc-steps,
.cc-checklist,
.cc-table-wrap,
.cc-cta,
.cc-figure,
.cc-faq,
.cc-sources {
  margin-block: var(--cc-s5) var(--cc-s4);
  font-family: var(--cc-sans);
  color: var(--cc-nit);
}

/* ── Resum destacat ─────────────────────────────────────────────────────
   El bloc més important de la pàgina. És el que els cercadors generatius
   (ChatGPT, Perplexity, AI Overviews) extreuen per respondre, i el que
   llegeix qui té 20 segons. Per això va primer i per això té el pes
   tipogràfic més alt del cos de l'article.                              */

.cc-takeaway {
  position: relative;
  background: var(--cc-superficie);
  border: 1px solid var(--cc-vora-fina);
  border-radius: var(--cc-radi);
  padding: var(--cc-s4) var(--cc-s4) var(--cc-s3);
}

/* Barra curta a sobre en comptes del típic filet lateral de color. */
.cc-takeaway::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: var(--cc-s4);
  inline-size: 3.5rem;
  block-size: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--cc-terra);
}

.cc-takeaway__label {
  margin: 0 0 var(--cc-s2);
  font-family: var(--cc-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cc-bosc-fosc);
}

.cc-takeaway__text {
  margin: 0;
  font-family: var(--cc-serif);
  font-size: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ── Callouts ───────────────────────────────────────────────────────────
   Consell, avís i matís. Es distingeixen per icona i to, no per un filet
   de color a l'esquerra: aquell patró és el reflex de tothom i no diu res
   que la icona no digui millor.                                          */

.cc-callout {
  --cc-callout-accent: var(--cc-bosc);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--cc-s2) var(--cc-s3);
  align-items: start;
  padding: var(--cc-s3) var(--cc-s4);
  background: var(--cc-superficie-suau);
  border: 1px solid var(--cc-vora-fina);
  border-radius: var(--cc-radi);
}

.cc-callout::before {
  content: "";
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin-block-start: 0.1rem;
  background-color: var(--cc-callout-accent);
  -webkit-mask: var(--cc-callout-icon) center / contain no-repeat;
  mask: var(--cc-callout-icon) center / contain no-repeat;
}

.cc-callout > * {
  grid-column: 2;
  margin-block: 0;
}

.cc-callout > * + * {
  margin-block-start: var(--cc-s2);
}

.cc-callout p {
  line-height: 1.65;
}

.cc-callout--tip {
  --cc-callout-accent: var(--cc-bosc);
  --cc-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21.5h4'/%3E%3Cpath d='M12 2.5a7 7 0 0 0-4 12.7V17h8v-1.8a7 7 0 0 0-4-12.7z'/%3E%3C/svg%3E");
}

.cc-callout--warn {
  --cc-callout-accent: var(--cc-terra);
  --cc-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 2.6 20h18.8L12 3.2z'/%3E%3Cpath d='M12 9.5v4.5'/%3E%3Cpath d='M12 17.2h.01'/%3E%3C/svg%3E");
  background: color-mix(in srgb, var(--cc-ocre) 10%, var(--cc-crema));
  border-color: color-mix(in srgb, var(--cc-terra) 30%, transparent);
}

.cc-callout--note {
  --cc-callout-accent: var(--cc-fulla);
  --cc-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.3'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.4h.01'/%3E%3C/svg%3E");
}

/* ── Cita destacada ─────────────────────────────────────────────────────
   La cometa és tipogràfica, en Lora, no una icona. És el gest editorial
   que fa que la cita sembli premsa i no una caixa d'avís més.            */

.cc-quote {
  position: relative;
  margin-inline: 0;
  padding-inline-start: var(--cc-s5);
}

.cc-quote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -0.35em;
  inset-inline-start: -0.05em;
  font-family: var(--cc-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--cc-ocre);
  pointer-events: none;
}

.cc-quote p {
  margin: 0;
  font-family: var(--cc-serif);
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cc-bosc-fosc);
  text-wrap: pretty;
}

.cc-quote cite {
  display: block;
  margin-block-start: var(--cc-s2);
  font-family: var(--cc-sans);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 600;
  color: var(--cc-text-suau);
}

.cc-quote cite::before {
  content: "— ";
}

/* ── Passos numerats ────────────────────────────────────────────────────
   Per a processos on l'ordre importa de veritat. Si l'ordre és indiferent,
   fes servir una llista normal.                                          */

.cc-steps ol {
  counter-reset: cc-step;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-steps li {
  position: relative;
  counter-increment: cc-step;
  padding-inline-start: 3.25rem;
  padding-block: 0 var(--cc-s3);
  line-height: 1.65;
}

.cc-steps li:last-child {
  padding-block-end: 0;
}

.cc-steps li::before {
  content: counter(cc-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.15em;
  display: grid;
  place-items: center;
  inline-size: 2.125rem;
  block-size: 2.125rem;
  border-radius: 50%;
  background: var(--cc-bosc-fosc);
  color: var(--cc-crema);
  font-family: var(--cc-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Filet que connecta els passos: fa llegir la llista com una seqüència. */
.cc-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 1.0625rem;
  inset-block: 2.125rem var(--cc-s1);
  inline-size: 1px;
  background: var(--cc-vora);
}

/* ── Checklist ──────────────────────────────────────────────────────────  */

.cc-checklist ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cc-checklist li {
  position: relative;
  padding-inline-start: 2.25rem;
  padding-block-end: var(--cc-s2);
  line-height: 1.65;
}

.cc-checklist li:last-child {
  padding-block-end: 0;
}

.cc-checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.3em;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background-color: var(--cc-bosc);
  -webkit-mask: var(--cc-icona-check) center / contain no-repeat;
  mask: var(--cc-icona-check) center / contain no-repeat;
}

:root {
  --cc-icona-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.2 5.2L20 6.8'/%3E%3C/svg%3E");
  --cc-icona-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 9 6.5 6.5L18.5 9'/%3E%3C/svg%3E");
}

/* ── Taula comparativa ──────────────────────────────────────────────────
   Sempre dins de .cc-table-wrap: al mòbil una taula ampla ha de poder fer
   scroll dins del seu bloc, no empènyer la pàgina sencera.                */

.cc-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--cc-vora-fina);
  border-radius: var(--cc-radi);
  /* Ombra interior a la vora dreta: pista visual que hi ha més taula. */
  background:
    linear-gradient(to right, var(--cc-crema) 30%, transparent) left / 2rem 100% no-repeat,
    linear-gradient(to left, var(--cc-crema) 30%, transparent) right / 2rem 100% no-repeat,
    var(--cc-crema);
}

.cc-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  text-align: start;
}

.cc-table th,
.cc-table td {
  padding: var(--cc-s2) var(--cc-s3);
  text-align: start;
  vertical-align: top;
  line-height: 1.55;
}

.cc-table thead th {
  background: var(--cc-bosc-fosc);
  color: var(--cc-crema);
  font-family: var(--cc-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.cc-table tbody tr + tr td {
  border-block-start: 1px solid var(--cc-vora-fina);
}

.cc-table tbody tr:nth-child(even) {
  background: var(--cc-superficie-suau);
}

.cc-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--cc-bosc-fosc);
}

/* ── FAQ ────────────────────────────────────────────────────────────────
   El moment de moviment de l'article. És l'únic: la resta de blocs són
   estàtics, i per això aquest es nota.                                    */

.cc-faq {
  border-block-start: 1px solid var(--cc-vora-fina);
  padding-block-start: var(--cc-s4);
}

.cc-faq__title {
  font-family: var(--cc-serif);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 600;
  color: var(--cc-bosc-fosc);
  margin-block: 0 var(--cc-s3);
}

.cc-faq__item {
  border-block-end: 1px solid var(--cc-vora-fina);
}

.cc-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-s3);
  padding-block: var(--cc-s3);
  cursor: pointer;
  font-family: var(--cc-sans);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cc-nit);
  list-style: none;
  transition: color var(--cc-transicio);
}

/* Amaga el triangle per defecte als dos motors. */
.cc-faq__question::-webkit-details-marker {
  display: none;
}

.cc-faq__question::after {
  content: "";
  flex: 0 0 auto;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background-color: var(--cc-bosc);
  -webkit-mask: var(--cc-icona-chevron) center / contain no-repeat;
  mask: var(--cc-icona-chevron) center / contain no-repeat;
  transition: transform var(--cc-transicio);
}

.cc-faq__question:hover,
.cc-faq__question:focus-visible {
  color: var(--cc-bosc-fosc);
}

.cc-faq__item[open] .cc-faq__question::after {
  transform: rotate(180deg);
}

.cc-faq__answer {
  padding-block-end: var(--cc-s3);
  line-height: 1.7;
  color: var(--cc-text-suau);
  animation: cc-desplega var(--cc-transicio) both;
}

.cc-faq__answer p {
  margin-block: 0;
}

.cc-faq__answer p + p {
  margin-block-start: var(--cc-s2);
}

@keyframes cc-desplega {
  from {
    opacity: 0;
    transform: translateY(-0.375rem);
  }
}

/* ── Crida a l'acció ────────────────────────────────────────────────────
   Una per article i sempre al final. El botó fa servir text Nit sobre
   Terra (4.8:1) i no Crema (2.8:1), que no passaria AA.                   */

.cc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-s3);
  padding: var(--cc-s4);
  background: var(--cc-bosc-fosc);
  border-radius: var(--cc-radi);
  box-shadow: var(--cc-ombra);
}

.cc-cta p {
  flex: 1 1 16rem;
  margin: 0;
  font-family: var(--cc-serif);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--cc-crema);
  text-wrap: pretty;
}

.cc-cta__button {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--cc-terra);
  color: var(--cc-nit);
  border-radius: var(--cc-radi-petit);
  font-family: var(--cc-sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--cc-transicio),
    transform var(--cc-transicio);
}

.cc-cta__button:hover,
.cc-cta__button:focus-visible {
  background: var(--cc-ocre);
  transform: translateY(-1px);
}

.cc-cta__button:active {
  transform: translateY(0);
}

/* ── Figura ─────────────────────────────────────────────────────────────  */

.cc-figure {
  margin-inline: 0;
}

.cc-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--cc-radi);
  box-shadow: var(--cc-ombra);
}

.cc-figure figcaption {
  margin-block-start: var(--cc-s2);
  font-family: var(--cc-sans);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--cc-text-suau);
}

/* ── Fonts ──────────────────────────────────────────────────────────────
   Poc pes visual a propòsit: han de ser verificables, no protagonistes.  */

.cc-sources {
  border-block-start: 1px solid var(--cc-vora-fina);
  padding-block-start: var(--cc-s3);
  font-size: 0.875rem;
}

.cc-sources__title {
  font-family: var(--cc-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--cc-text-suau);
  margin-block: 0 var(--cc-s2);
}

.cc-sources__list {
  margin: 0;
  padding-inline-start: 1.125rem;
}

.cc-sources__list li {
  margin-block-end: var(--cc-s1);
  line-height: 1.5;
}

.cc-sources__list a {
  color: var(--cc-bosc-fosc);
  text-decoration-color: var(--cc-salvia);
  text-underline-offset: 0.2em;
}

.cc-sources__list a:hover {
  text-decoration-color: currentColor;
}

/* ── Focus visible ──────────────────────────────────────────────────────
   Un sol anell per a tots els blocs, en Terra perquè destaqui sobre el
   verd i sobre la crema.                                                  */

.cc-faq__question:focus-visible,
.cc-cta__button:focus-visible,
.cc-sources__list a:focus-visible {
  outline: 2px solid var(--cc-terra);
  outline-offset: 3px;
  border-radius: var(--cc-radi-petit);
}

/* ── Mòbil ──────────────────────────────────────────────────────────────  */

@media (max-width: 40rem) {
  .cc-takeaway,
  .cc-callout,
  .cc-cta {
    padding-inline: var(--cc-s3);
  }

  .cc-callout {
    gap: var(--cc-s2);
  }

  .cc-quote {
    padding-inline-start: var(--cc-s4);
  }

  .cc-cta {
    /* El botó a tota amplada: a una mà, la diana ha de ser gran. */
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cc-cta__button {
    text-align: center;
  }
}

/* ── Moviment reduït ────────────────────────────────────────────────────  */

@media (prefers-reduced-motion: reduce) {
  .cc-faq__answer {
    animation: none;
  }

  .cc-faq__question::after,
  .cc-cta__button {
    transition-duration: 1ms;
  }

  .cc-cta__button:hover {
    transform: none;
  }
}

/* ── Mode fosc ──────────────────────────────────────────────────────────
   Estrictament opcional i amb un sol interruptor: `data-cc-theme="dark"`
   a l'element <html>. Si el teu tema té mode fosc, fes que hi posi aquest
   atribut i prou.

       <html data-cc-theme="dark">

   Per què no `prefers-color-scheme` sol, i per què no `:has()`:
   el remapatge de tokens i les correccions que l'acompanyen han d'anar
   sempre junts. Si es disparen amb condicions diferents, els blocs
   s'inverteixen a mitges i el contrast se'n va en orris — text fosc sobre
   fons fosc. Un sol selector, per als dos, ho fa impossible.

   Si vols que segueixi la preferència del sistema, posa l'atribut des del
   tema amb tres línies de JS en comptes de duplicar la condició aquí.    */

:root[data-cc-theme="dark"] {
  --cc-crema: #211d16;
  --cc-nit: #ede5d6;
  --cc-bosc: #9dbb77;
  --cc-bosc-fosc: #b4cf8d;
  --cc-salvia: #4a5638;
  --cc-terra: #d9a468;
  --cc-ocre: #e0b483;
  --cc-superficie: color-mix(in srgb, var(--cc-salvia) 45%, var(--cc-crema));
  --cc-superficie-suau: color-mix(in srgb, var(--cc-salvia) 26%, var(--cc-crema));
  --cc-vora: color-mix(in srgb, var(--cc-bosc) 40%, transparent);
  --cc-vora-fina: color-mix(in srgb, var(--cc-bosc) 24%, transparent);
  --cc-text-suau: color-mix(in srgb, var(--cc-nit) 78%, var(--cc-crema));
}

/* En fosc, Bosc fosc passa a ser el to CLAR de la família, així que les
   superfícies que abans eren fosques amb text Crema s'han d'invertir. */
:root[data-cc-theme="dark"] .cc-cta,
:root[data-cc-theme="dark"] .cc-table thead th,
:root[data-cc-theme="dark"] .cc-steps li::before {
  background: var(--cc-salvia);
  color: var(--cc-nit);
}

:root[data-cc-theme="dark"] .cc-cta p {
  color: var(--cc-nit);
}

:root[data-cc-theme="dark"] .cc-callout--warn {
  background: color-mix(in srgb, var(--cc-terra) 16%, var(--cc-crema));
}

:root[data-cc-theme="dark"] .cc-table-wrap {
  background:
    linear-gradient(to right, var(--cc-crema) 30%, transparent) left / 2rem 100% no-repeat,
    linear-gradient(to left, var(--cc-crema) 30%, transparent) right / 2rem 100% no-repeat,
    var(--cc-crema);
}

/* ── Impressió ──────────────────────────────────────────────────────────  */

@media print {
  /* En paper no hi ha "desplegar": tot obert. Els navegadors amaguen el
     contingut tancat amb `content-visibility`, no amb `display`, així que
     cal desactivar les dues coses. */
  .cc-faq__item > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }

  .cc-faq__answer {
    animation: none;
  }

  .cc-faq__question::after,
  .cc-cta__button {
    display: none;
  }

  .cc-cta,
  .cc-table thead th {
    background: transparent;
    color: var(--cc-nit);
    border: 1px solid var(--cc-nit);
    box-shadow: none;
  }
}

.cc-faq__question {
  list-style: none;
  padding-inline: var(--cc-s4);
}

.cc-faq__question::marker {
  display: none;
  content: "";
}

.cc-faq__answer {
  padding-inline: var(--cc-s4);
}