/*
Theme Name: Benestar Laboral
Theme URI: https://benestarlaboral.cat/
Description: Tema fill de Twenty Twenty-Five per a Benestar Laboral (Marta Herrero). Colors i tipografia de la presentació corporativa.
Author: Benestar Laboral
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Text Domain: benestar
*/

:root {
	--bl-petroli: var(--wp--preset--color--primary);
	--bl-fosc: var(--wp--preset--color--navy);
	--bl-menta: var(--wp--preset--color--mint);
	--bl-daurat: var(--wp--preset--color--gold);
	--bl-os: var(--wp--preset--color--base-2);
	--bl-gris: var(--wp--preset--color--muted);
	--bl-radi: 18px;
	--bl-ombra: 0 10px 30px rgba(15, 61, 82, 0.08);
	--bl-ample: 1200px;
}

body { -webkit-font-smoothing: antialiased; }
.bl-main { margin-top: 0; }
.bl-main > .wp-block-post-content > *:first-child { margin-top: 0; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }
img { height: auto; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* ---------- Capçalera ---------- */
.bl-capcalera { background: #fff; border-bottom: 1px solid rgba(15, 74, 87, 0.08); position: sticky; top: 0; z-index: 50; }
.bl-capcalera__dins { max-width: var(--bl-ample); margin: 0 auto; padding: 14px clamp(16px, 4vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bl-marca { text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.bl-marca__nom { font-family: var(--wp--preset--font-family--literata); font-weight: 600; font-size: 1.45rem; color: var(--bl-petroli); }
.bl-marca__sub { font-size: 0.78rem; color: var(--bl-gris); letter-spacing: 0.02em; margin-top: 3px; }
.bl-menu__check { position: absolute; opacity: 0; pointer-events: none; }
.bl-menu__boto { display: none; }
.bl-menu__panell { display: flex; align-items: center; gap: 28px; }
.bl-menu__panell ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.bl-menu__panell nav a { text-decoration: none; color: var(--wp--preset--color--contrast); font-weight: 600; font-size: 0.97rem; }
.bl-menu__panell nav a:hover, .bl-menu__panell nav a[aria-current] { color: var(--bl-menta); }
.bl-idiomes { display: flex; gap: 4px; font-size: 0.85rem; font-weight: 700; }
.bl-idiomes a { text-decoration: none; color: var(--bl-gris); padding: 4px 7px; border-radius: 6px; }
.bl-idiomes a.actiu { color: var(--bl-petroli); background: var(--wp--preset--color--mint-soft); }

.bl-boto { display: inline-block; background: var(--bl-daurat); color: var(--bl-fosc); font-weight: 700; text-decoration: none; border-radius: 999px; padding: 0.85rem 1.6rem; transition: background 0.15s, color 0.15s; }
.bl-boto:hover { background: var(--bl-fosc); color: #fff; }
.bl-boto--petit { padding: 0.6rem 1.15rem; font-size: 0.92rem; }

@media (max-width: 960px) {
	.bl-menu__boto { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; cursor: pointer; border-radius: 10px; }
	.bl-menu__boto span:not(.screen-reader-text) { display: block; height: 2px; width: 24px; margin: 0 auto; background: var(--bl-petroli); border-radius: 2px; }
	.bl-menu__check:focus-visible + .bl-menu__boto { outline: 2px solid var(--bl-menta); }
	.bl-menu__panell { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; align-items: flex-start; gap: 18px; padding: 18px clamp(16px, 4vw, 40px) 26px; border-bottom: 1px solid rgba(15, 74, 87, 0.1); box-shadow: 0 16px 30px rgba(15, 61, 82, 0.08); }
	.bl-menu__check:checked ~ .bl-menu__panell { display: flex; }
	.bl-menu__panell ul { flex-direction: column; gap: 14px; }
	.bl-menu__panell nav a { font-size: 1.1rem; }
}

/* ---------- Seccions ---------- */
.bl-sec { padding-top: clamp(56px, 8vw, 104px) !important; padding-bottom: clamp(56px, 8vw, 104px) !important; margin-top: 0 !important; margin-bottom: 0 !important; }
.bl-sec--os { background: var(--bl-os); }
.bl-sec--menta { background: var(--wp--preset--color--mint-soft); }
.bl-sec--fosc { background: var(--bl-fosc); color: #E9F1F2; }
.bl-sec--fosc h1, .bl-sec--fosc h2, .bl-sec--fosc h3 { color: #fff; }
.bl-sec--fosc a:not(.wp-element-button) { color: #fff; }
.bl-sec > .alignwide { max-width: var(--bl-ample); }
.bl-centre { text-align: center; }
.bl-centre.bl-intro, .bl-centre .bl-intro { margin-left: auto; margin-right: auto; }
.bl-intro { font-size: 1.15rem; color: var(--bl-gris); max-width: 720px; }
.bl-sec--fosc .bl-intro { color: #BFD6DA; }

.bl-etiqueta { display: inline-block; font-size: 0.78rem !important; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--bl-menta); border-radius: 999px; padding: 6px 14px; margin-bottom: 0.6rem !important; }
.bl-etiqueta--daurat { background: var(--bl-daurat); color: var(--bl-fosc); }
.bl-etiqueta--fosc { background: var(--bl-fosc); }
p.bl-etiqueta + h1, p.bl-etiqueta + h2 { margin-top: 0.5rem; }

/* Hero */
.bl-hero { background: linear-gradient(180deg, #fff 0%, var(--bl-os) 100%); }
.bl-hero h1 { margin-top: 0.4rem; }
.bl-hero h1 em { font-style: italic; font-weight: 500; color: var(--bl-menta); }
.bl-hero .wp-block-columns { align-items: center !important; gap: clamp(32px, 5vw, 72px); }
.bl-hero__img img { border-radius: 28px; box-shadow: var(--bl-ombra); width: 100%; object-fit: cover; aspect-ratio: 542 / 584; }
.bl-hero__punts { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 10px; }
.bl-hero__punts li { padding-left: 32px; position: relative; font-weight: 600; }
.bl-hero__punts li::before { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--bl-menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* Xifres */
.bl-xifres { gap: 20px !important; }
.bl-xifres .wp-block-column { background: #fff; border-radius: var(--bl-radi); padding: 26px 24px; box-shadow: var(--bl-ombra); }
.bl-xifra { font-family: var(--wp--preset--font-family--literata); font-size: clamp(2.2rem, 4vw, 2.9rem); font-weight: 600; color: var(--bl-petroli); line-height: 1; margin: 0 0 8px !important; }
.bl-xifres p:last-child { margin: 0; color: var(--bl-gris); font-size: 0.95rem; }

/* Targetes */
.bl-targetes { gap: 24px !important; }
.bl-targeta { background: #fff; border-radius: var(--bl-radi); box-shadow: var(--bl-ombra); padding: 30px 28px !important; display: flex; flex-direction: column; }
.bl-sec--os .bl-targeta, .bl-sec--menta .bl-targeta { background: #fff; }
.bl-targeta h3 { font-family: var(--wp--preset--font-family--literata); font-size: 1.45rem; font-weight: 600; color: var(--bl-petroli); margin-top: 0.4rem; }
.bl-targeta p { color: var(--bl-gris); }
.bl-targeta .bl-targeta__img img { border-radius: 12px; aspect-ratio: 16 / 7; object-fit: cover; width: 100%; }
.bl-targeta .bl-perfil { color: var(--wp--preset--color--contrast); font-weight: 700; font-size: 0.95rem; }
.bl-targeta .wp-block-buttons { margin-top: auto; padding-top: 10px; }
.bl-enllac a, a.bl-enllac { font-weight: 700; text-decoration: none; color: var(--bl-petroli); }
.bl-enllac a::after { content: " →"; }

/* Passos */
.bl-passos { gap: 20px !important; counter-reset: pas; }
.bl-passos .wp-block-column { background: #fff; border-radius: var(--bl-radi); padding: 28px 24px; box-shadow: var(--bl-ombra); position: relative; counter-increment: pas; }
.bl-passos .wp-block-column::before { content: counter(pas); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--mint-soft); color: var(--bl-petroli); font-family: var(--wp--preset--font-family--literata); font-weight: 600; font-size: 1.3rem; margin-bottom: 14px; }
.bl-passos .wp-block-column:last-child { background: var(--bl-fosc); color: #E9F1F2; }
.bl-passos .wp-block-column:last-child h3 { color: #fff; }
.bl-passos .wp-block-column:last-child::before { background: var(--bl-daurat); color: var(--bl-fosc); }
.bl-passos h3 { margin: 0 0 6px; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.bl-passos p { margin: 0; }

/* Destacat */
.bl-destacat { background: #fff; border-radius: var(--bl-radi); padding: clamp(24px, 4vw, 40px) !important; box-shadow: var(--bl-ombra); border: 2px solid rgba(224, 165, 38, 0.55); }
.bl-destacat h3 { color: #A9740B; font-family: var(--wp--preset--font-family--literata); font-size: 1.5rem; margin-top: 0; }

/* Imatges de banda */
.bl-banda img { width: 100%; border-radius: 22px; object-fit: cover; aspect-ratio: 1376 / 420; box-shadow: var(--bl-ombra); }

/* Aprenentatges (3 columnes) */
.bl-aprenen { gap: 28px !important; }
.bl-aprenen .wp-block-column { border-top: 3px solid var(--wp--preset--color--mint-soft); padding-top: 18px; }
.bl-aprenen h3 { font-size: 1.12rem; margin: 0 0 6px; }
.bl-aprenen p { margin: 0; color: var(--bl-gris); }

/* Qui som */
.bl-marta img { border-radius: 24px; box-shadow: var(--bl-ombra); width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.bl-cita { border: 0 !important; padding: 0 !important; margin: 0 0 1.4rem !important; }
.bl-cita p { font-family: var(--wp--preset--font-family--literata); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.3; color: var(--bl-petroli); }
.bl-credencials { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.bl-credencials li { background: var(--wp--preset--color--mint-soft); color: var(--bl-petroli); font-weight: 700; font-size: 0.92rem; padding: 8px 14px; border-radius: 999px; }

/* Preguntes freqüents */
.bl-faq .wp-block-details { background: #fff; border-radius: 14px; padding: 18px 22px; box-shadow: 0 4px 16px rgba(15, 61, 82, 0.06); margin-top: 12px; }
.bl-faq summary { font-weight: 700; cursor: pointer; color: var(--bl-petroli); font-size: 1.05rem; }
.bl-faq .wp-block-details p { color: var(--bl-gris); margin: 12px 0 0; }

/* Crida final */
.bl-cta h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.bl-cta .wp-block-buttons { justify-content: center; }
.bl-cta__contacte { margin-top: 1.6rem !important; font-weight: 600; }
.bl-cta__contacte a { color: var(--bl-daurat) !important; text-decoration: none; }

/* Formulari */
.bl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; background: #fff; padding: clamp(22px, 4vw, 38px); border-radius: var(--bl-radi); box-shadow: var(--bl-ombra); }
.bl-form__camp { display: flex; flex-direction: column; gap: 6px; }
.bl-form__camp--ample { grid-column: 1 / -1; }
.bl-form label { font-weight: 700; font-size: 0.92rem; color: var(--bl-petroli); }
.bl-form input[type=text], .bl-form input[type=email], .bl-form input[type=tel], .bl-form select, .bl-form textarea { font: inherit; padding: 12px 14px; border: 1.5px solid #D5DEDF; border-radius: 10px; background: #fff; color: var(--wp--preset--color--contrast); width: 100%; box-sizing: border-box; }
.bl-form input:focus, .bl-form select:focus, .bl-form textarea:focus { outline: none; border-color: var(--bl-menta); box-shadow: 0 0 0 3px rgba(62, 156, 140, 0.18); }
.bl-form__consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 0.9rem; color: var(--bl-gris); }
.bl-form__consent label { font-weight: 400; color: var(--bl-gris); font-size: 0.9rem; }
.bl-form__consent input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.bl-form button { grid-column: 1 / -1; justify-self: start; border: 0; cursor: pointer; font: inherit; font-weight: 700; background: var(--bl-daurat); color: var(--bl-fosc); border-radius: 999px; padding: 0.95rem 1.9rem; }
.bl-form button:hover { background: var(--bl-fosc); color: #fff; }
.bl-form__mel { position: absolute !important; left: -9999px !important; }
.bl-avis { padding: 16px 20px; border-radius: 12px; font-weight: 600; margin-bottom: 20px; }
.bl-avis--ok { background: var(--wp--preset--color--mint-soft); color: var(--bl-petroli); }
.bl-avis--error { background: #FBEAEA; color: #8A1F1F; }
.bl-dades-contacte { list-style: none; padding: 0; display: grid; gap: 14px; }
.bl-dades-contacte strong { display: block; color: var(--bl-petroli); }
@media (max-width: 700px) { .bl-form { grid-template-columns: 1fr; } }

/* ---------- Peu ---------- */
.bl-peu { background: var(--bl-fosc); color: #BFD6DA; font-size: 0.95rem; }
.bl-peu a { color: #fff; text-decoration: none; }
.bl-peu a:hover { color: var(--bl-daurat); }
.bl-peu__dins { max-width: var(--bl-ample); margin: 0 auto; padding: 56px clamp(16px, 4vw, 40px) 30px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; }
.bl-peu__nom { font-family: var(--wp--preset--font-family--literata); color: #fff; font-size: 1.4rem; font-weight: 600; margin: 0 0 10px; }
.bl-peu__titol { color: #fff; font-weight: 700; margin: 0 0 10px; }
.bl-peu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.bl-peu__marca p:last-child { max-width: 420px; }
.bl-peu__baix { max-width: var(--bl-ample); margin: 0 auto; padding: 18px clamp(16px, 4vw, 40px) 28px; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 0.85rem; }
.bl-peu__baix p { margin: 0; }
.bl-peu__legals { display: flex; gap: 18px; }
@media (max-width: 800px) { .bl-peu__dins { grid-template-columns: 1fr; gap: 26px; } }

/* Pàgines de text (legals) */
.bl-text { padding-top: 56px; padding-bottom: 80px; }
.bl-404 { padding-top: 80px; padding-bottom: 120px; }

/* ---------- Ajustos després de la revisió visual ---------- */
.bl-targeta p.bl-etiqueta, p.bl-etiqueta { align-self: flex-start; width: fit-content; color: #fff; }
.bl-targeta p.bl-etiqueta--daurat, p.bl-etiqueta--daurat { color: var(--bl-fosc); }
.bl-sec:has(.bl-xifres) { padding-top: 40px !important; padding-bottom: 56px !important; }
.bl-hero { padding-bottom: clamp(40px, 6vw, 72px) !important; }
h2 + .bl-cita, h1 + .bl-intro + .bl-cita { margin-top: 1rem !important; }
.bl-sec--menta .bl-cita p { color: var(--bl-petroli); }
/* Etiqueta i entradeta alineades amb el títol a les seccions d'una columna */
.is-layout-constrained > p.bl-etiqueta:not(.has-text-align-center) { margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; }
.is-layout-constrained > .bl-intro:not(.has-text-align-center) { max-width: var(--wp--style--global--content-size); }
.bl-banda { margin-bottom: 2.5rem !important; }