/*
 * educAAlergicus · Proposta D (simplificada)
 * Una secció per tema, la mateixa a la portada i a la seva pestanya.
 * Requereix camp.css, camp-b.css i camp-c.css.
 */

/* ---------- Seccions ---------- */
.d-seccio { padding-block: clamp(3.5rem, 8vw, 6rem); }
.d-seccio--crema { background: var(--wp--preset--color--crema); }
.d-seccio--pressec { background: #FDF6EF; }
.d-seccio--blau { background: #DCE9EF; }
.d-seccio--final { background: var(--wp--preset--color--crema); padding-top: clamp(2.5rem, 6vw, 4rem); }
.c-cap + .d-seccio { padding-top: clamp(2.5rem, 6vw, 4rem); }
.d-seccio + .d-seccio--final { border-top: 0; }

.d-cap-seccio { margin-bottom: clamp(1.75rem, 4vw, 2.75rem) !important; }
.d-cap-seccio > * { margin: 0 !important; }
.d-cap-seccio > * + * { margin-top: 0.6rem !important; }
.d-titol { font-size: clamp(1.875rem, 1.3rem + 2.2vw, 3rem); max-width: 20ch; }
.d-cap-seccio__entrada { max-width: 44rem; font-size: var(--wp--preset--font-size--large); line-height: 1.55; color: var(--wp--preset--color--cafe); }
.d-pagina .camp-avantitol { color: var(--wp--preset--color--salmo-text); }

/* ---------- El curs ---------- */
.d-maneres { gap: clamp(1rem, 3vw, 2rem) !important; }
.d-nota {
	margin-top: 1.5rem !important;
	padding: 1rem 1.25rem;
	border-radius: 16px;
	background: #FFFFFF;
	font-size: 1rem;
	line-height: 1.55;
	box-shadow: 0 2px 10px rgba(74, 55, 50, 0.05);
}

/* ---------- El camí: preguntes ---------- */
.d-historia .c-historia { margin-top: 0 !important; }
.d-llegenda { margin: 1.25rem auto 1.75rem !important; }
.d-etapa__nom {
	margin: 0.9rem 0 0 !important;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--cafe);
}
.d-etapa .d-etapa__pregunta {
	margin-top: 0.35rem !important;
	font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
	line-height: 1.25;
	font-weight: 900;
	color: var(--wp--preset--color--xocolata);
}
.d-etapa .d-etapa__pregunta a { color: inherit; text-decoration: none; }
.d-etapa .d-etapa__pregunta a:focus-visible { outline: 2px solid var(--wp--preset--color--salmo-text); outline-offset: 3px; border-radius: 4px; }
/* Tota la targeta és clicable */
.d-etapa:has(a) { cursor: pointer; }
.d-etapa--directe .c-nomes-5h, .camp-etapa-targeta--directe.d-etapa .c-nomes-5h { margin-top: 0.75rem !important; }
@media (max-width: 599px) {
	.d-pagina .camp-seccio-cami .camp-etapa-targeta__text { display: block; }
}

/* ---------- Per a centres ---------- */
.d-centres { gap: clamp(2rem, 5vw, 4rem); }
.d-xips { list-style: none; margin: 1.25rem 0 0 !important; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.d-xips li {
	padding: 0.35rem 0.9rem;
	border-radius: 999px;
	background: #FFFFFF;
	font-weight: 800;
	font-size: 0.9375rem;
	box-shadow: 0 2px 8px rgba(74, 55, 50, 0.06);
}
.d-xips__nota { margin-top: 0.6rem !important; font-size: 0.9375rem; color: var(--wp--preset--color--cafe); }
.d-centres .c-simple { margin-top: 1.75rem !important; }

/* ---------- La formadora ---------- */
.d-formadora { gap: clamp(2rem, 5vw, 4rem); }
.d-formadora__nom { margin: 0 !important; font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem); font-weight: 900; color: var(--wp--preset--color--xocolata); }

/* ---------- Contacte ---------- */
.d-contacte {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 28px;
	background: var(--wp--preset--color--salmo-suau);
}
.d-contacte__text > * + * { margin-top: 0.75rem; }
.d-contacte__entrada { font-size: 1.125rem; line-height: 1.55; max-width: 40rem; }
.d-contacte .c-correu { margin-top: 1.5rem !important; transform: rotate(-1deg); }
.d-contacte__il .camp-contacte-il { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
	.d-contacte__il svg { animation: c-flota 6s ease-in-out infinite; }
}
@media (max-width: 781px) {
	.d-contacte { grid-template-columns: minmax(0, 1fr); }
	.d-contacte__il { max-width: 18rem; margin: 0 auto; }
}
.d-etapa__fletxa { display: inline-block; margin-left: 0.2em; color: var(--wp--preset--color--salmo-text); transition: transform 0.25s ease; }
.d-etapa:hover .d-etapa__fletxa { transform: translateX(4px); }
@media (max-width: 599px) {
	.d-llegenda { justify-content: flex-start; text-align: left; align-items: flex-start; }
	.d-llegenda .c-llegenda-5h__mostra { margin-top: 0.2rem; }
}

/* =========================================================
 * El curs (fusionat amb el camí): subtítols, «Què aprendreu»,
 * etiqueta «Cada etapa conté» i targetes emergents simples.
 * ========================================================= */
.d-subtitol {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: clamp(2.75rem, 6vw, 4.25rem) auto 1.25rem !important;
	font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
	font-weight: 900;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--xocolata);
}
.d-subtitol::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: var(--wp--preset--color--linia); }
.d-cap-seccio + .d-subtitol, .d-seccio > .d-subtitol:first-child { margin-top: 0 !important; }

/* Què aprendreu + «Cada etapa conté» (etiqueta d'aliment) */
.d-apren {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	margin: 0 auto !important;
}
.d-apren .d-subtitol { margin-top: 0 !important; }
.d-apren__dims { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.d-apren__dims li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); border-radius: 16px; background: var(--d-c); overflow: hidden; }
.d-apren__dims .is-entendre { --d-c: #DCE9EF; --d-f: #B4CCD8; --d-t: #3F6170; }
.d-apren__dims .is-prevenir { --d-c: #D6E8DC; --d-f: #B9D6C2; --d-t: #3F6B52; }
.d-apren__dims .is-reconeixer { --d-c: #FBECC4; --d-f: #F6D58A; --d-t: #7A5A00; }
.d-apren__dims .is-actuar { --d-c: #F9DDD6; --d-f: #F0B4A8; --d-t: #9C4F42; }
.d-apren__et {
	display: grid;
	place-items: center;
	padding: 0.6rem 0.4rem;
	background: var(--d-f);
	font-size: 0.875rem;
	font-weight: 900;
	line-height: 1.2;
	text-align: center;
	color: var(--wp--preset--color--xocolata);
}
.d-apren__text { padding: 0.85rem 1.1rem; font-size: 1.0625rem; line-height: 1.45; color: var(--wp--preset--color--xocolata); }
.d-apren__text strong { font-weight: 900; color: var(--d-t); }

.d-apren__dre { display: flex; justify-content: center; padding-top: 0.75rem; }
.d-conte { width: min(100%, 24rem); }
.d-conte__taula { margin: 0.25rem 0 0; }
.d-conte__taula > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid var(--wp--preset--color--xocolata); }
.d-conte__taula > div:last-child { border-bottom: 0; }
.d-conte__taula dt { font-weight: 900; }
.d-conte__taula dd { margin: 0; line-height: 1.45; }
.d-conte__traces strong {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--salmo);
	text-decoration-thickness: 3px;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.d-apren.is-preparat:not(.is-play) .d-apren__dims li,
	.d-apren.is-preparat:not(.is-play) .d-conte,
	.d-apren.is-preparat:not(.is-play) .d-conte__taula > div,
	.d-apren.is-preparat:not(.is-play) .d-conte__traces { opacity: 0; }
	.d-apren.is-play .d-apren__dims li { animation: d-entra-esq 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 0.15s); }
	.d-apren.is-play .d-conte { animation: d-enganxa 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both 0.5s; }
	.d-apren.is-play .d-conte__taula > div { animation: d-entra 0.4s ease both; animation-delay: calc(1.1s + var(--i) * 0.25s); }
	.d-apren.is-play .d-conte__traces { animation: d-segell 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) both 2.3s; }
}
@keyframes d-enganxa { from { opacity: 0; transform: rotate(12deg) scale(0.85) translateY(-14px); } to { opacity: 1; transform: rotate(-2deg); } }
@keyframes d-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes d-entra-esq { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes d-segell { from { opacity: 0; transform: scale(1.25) rotate(-2deg); } to { opacity: 1; transform: none; } }

@media (max-width: 781px) { .d-apren { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 479px) {
	.d-apren__dims li { grid-template-columns: 4.25rem minmax(0, 1fr); }
	.d-conte__taula > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
}

/* Targetes emergents: pregunta i què s'hi tracta */
.camp-etapa-pop .d-pop__pregunta { font-size: 1.1875rem; font-weight: 900; line-height: 1.3; color: var(--wp--preset--color--xocolata); }
.camp-etapa-pop .d-pop__clau {
	margin-top: 1.1rem;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8C5F54;
}
.camp-etapa-pop .d-pop__clau + .d-pop__text { margin-top: 0.35rem; }
.camp-etapa-pop .d-pop__text { font-size: 1.0625rem; line-height: 1.55; }
.camp-etapa-pop .d-pop__enllac { margin-top: 1.1rem; }

/* Textos que apareixen en fer scroll (camp-d.js) */
@media (prefers-reduced-motion: no-preference) {
	.d-txt { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
	.d-txt.is-visible { opacity: 1; transform: none; }
}

/* Línia de suport sota el subtítol de les preguntes */
.d-subtitol + .d-suport { margin: -0.5rem auto 0 !important; font-size: 1.125rem; line-height: 1.55; color: var(--wp--preset--color--cafe); }
.d-suport + .d-llegenda { margin-top: 1rem !important; }

/* Llegenda de les sessions alineada a l'esquerra, amb el subtítol */
.d-suport + .d-llegenda { justify-content: flex-start; text-align: left; max-width: var(--wp--style--global--wide-size) !important; }

/* Entrada d'El curs: apareix sencera, més lenta que la resta de textos */
@media (prefers-reduced-motion: no-preference) {
	.d-txt.d-paraules { transform: translateY(28px); transition-duration: 1.4s, 1.4s; }
	.d-txt.d-paraules.is-visible { transform: none; }
}

/* =========================================================
 * Accés al curs
 * ========================================================= */
.d-acces-seccio { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.d-acces {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
	margin: 0 auto !important;
}
.d-acces__principal > * { margin: 0 !important; }
.d-acces__titol { margin-top: 0.4rem !important; font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); }
.d-acces__entrada { margin-top: 0.75rem !important; font-size: var(--wp--preset--font-size--large); line-height: 1.5; color: var(--wp--preset--color--cafe); }
.d-acces__estat > * { margin: 0 !important; }

/* Formulari */
.d-login {
	margin-top: 1.75rem !important;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: var(--b-filet);
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 6px 6px 0 var(--wp--preset--color--pressec);
	display: grid;
	gap: 1.1rem;
}
.d-login p { margin: 0; }
.d-login__camp { display: grid; gap: 0.4rem; }
.d-login label { font-weight: 800; font-size: 1rem; color: var(--wp--preset--color--xocolata); }
.d-login input[type="text"], .d-login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.65rem 0.9rem;
	border: 1.5px solid #C9B3B0;
	border-radius: 12px;
	background: var(--wp--preset--color--crema);
	font: inherit;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--xocolata);
}
.d-login input:focus-visible { outline: 3px solid var(--wp--preset--color--salmo); outline-offset: 1px; border-color: var(--wp--preset--color--xocolata); background: #FFFFFF; }
.d-login__clau { position: relative; display: block; }
.d-login__clau input { padding-right: 5.5rem !important; }
.d-login__veure {
	position: absolute;
	right: 0.35rem;
	top: 50%;
	transform: translateY(-50%);
	min-height: 2.5rem;
	padding: 0 0.8rem;
	border: 0;
	border-radius: 9px;
	background: none;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--wp--preset--color--salmo-text);
	cursor: pointer;
}
.d-login__veure:hover { background: var(--wp--preset--color--salmo-suau); }
.d-login__veure:focus-visible { outline: 2px solid var(--wp--preset--color--salmo-text); }
.d-login__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1rem; }
.d-login label.d-login__recorda { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.d-login__recorda input { width: 1.2rem; height: 1.2rem; accent-color: var(--wp--preset--color--xocolata); }
.d-login__oblit { font-weight: 800; font-size: 0.9375rem; color: var(--wp--preset--color--salmo-text); }
.d-boto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0.7rem 1.75rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--xocolata);
	color: #FFFFFF !important;
	font: inherit;
	font-size: 1.0625rem;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.d-boto:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--wp--preset--color--salmo); }
.d-boto:focus-visible { outline: 3px solid var(--wp--preset--color--salmo); outline-offset: 3px; }
.d-login__envia .d-boto { width: 100%; }

/* Amb sessió: progrés */
.d-progres {
	margin-top: 1.75rem !important;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: var(--b-filet);
	border-radius: 22px;
	background: #FFFFFF;
	box-shadow: 6px 6px 0 var(--wp--preset--color--pressec);
	display: grid;
	gap: 1rem;
}
.d-progres p { margin: 0; }
.d-progres__cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; }
.d-progres__etapa { font-size: 1.25rem; font-weight: 900; color: var(--wp--preset--color--xocolata); }
.d-progres__pill { display: inline-block; margin-right: 0.5rem; padding: 0.15rem 0.7rem; border-radius: 999px; font-size: 0.875rem; vertical-align: 0.15em; }
.d-progres__pill.is-prevenir { background: #D6E8DC; color: #3F6B52; }
.d-progres__compte { font-size: 0.9375rem; font-weight: 700; color: var(--wp--preset--color--cafe); }
.d-progres__barra { height: 10px; border-radius: 10px; background: var(--wp--preset--color--linia); overflow: hidden; }
.d-progres__barra span { display: block; height: 100%; border-radius: 10px; background: var(--wp--preset--color--salvia-text); }
.d-progres__punts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.35rem; }
.d-progres__punts li { display: grid; place-items: center; height: 2rem; border-radius: 10px; background: var(--wp--preset--color--crema); font-weight: 900; font-size: 0.875rem; color: var(--wp--preset--color--cafe); }
.d-progres__punts li.is-fet { background: #D6E8DC; color: #3F6B52; }
.d-progres__punts li.is-ara { background: var(--wp--preset--color--xocolata); color: #FFFFFF; }
.d-acces__info { margin-top: 1rem !important; padding: 1rem 1.25rem; border-radius: 16px; background: #FFFFFF; }
.d-acces__info p { margin: 0; line-height: 1.5; }
.d-acces__info-titol { font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--rosa-terros); margin-bottom: 0.25rem !important; }
.d-acces__surt { margin-top: 1.25rem !important; }
.d-acces__surt a { font-weight: 800; color: var(--wp--preset--color--salmo-text); }

/* Ajuda */
.d-acces__ajuda { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 22px; background: var(--wp--preset--color--salmo-suau); }
.d-acces__ajuda > * { margin: 0 !important; }
.d-acces__il { max-width: 15rem; margin: 0 auto 1rem !important; }
.d-acces__il img { width: 100%; height: auto; display: block; }
.d-acces__ajuda-titol { font-size: 1.375rem; font-weight: 900; color: var(--wp--preset--color--xocolata); }
.d-acces__passos { margin-top: 1rem !important; }
.d-acces__problemes { margin-top: 1.25rem !important; padding-top: 1rem; border-top: 1px solid #E8BFB4; line-height: 1.5; }
.d-acces__problemes a { font-weight: 800; color: var(--wp--preset--color--salmo-text); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: no-preference) {
	.d-acces__estat:not([hidden]) { animation: d-entra 0.45s ease both; }
}
@media (max-width: 781px) {
	.d-acces { grid-template-columns: minmax(0, 1fr); }
}
.d-login__oblit { display: inline-flex; align-items: center; min-height: 2.75rem; }
/* Amb sessió: sense el bloc d'ajuda, una sola columna */
.d-acces[data-estat="dins"] { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.d-acces[data-estat="dins"] .d-acces__ajuda { display: none; }
/* La barra de crida del mòbil no té sentit a la pantalla d'accés */
body:has(main[data-pagina="acces"]:not([hidden])) .camp-barra-cta { display: none !important; }