/* =============================================================================
   CALM be.ESSENTIAL · landing
   Base: prototip d'Hermes (01_landing.html + estilos/tokens.css + componentes.css)
   Adaptacions: prefix calm_ en tot, valors literals (sense variables CSS) i tot
   scopat dins de .calm_page per a no afectar el header del tema ni el carret.
   ============================================================================= */

.calm_page { font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 300; line-height: 1.6; color: #000; background-color: #fff; -webkit-font-smoothing: antialiased; }
.calm_page, .calm_page *, .calm_page *::before, .calm_page *::after { box-sizing: border-box; }
:where(.calm_page) a { color: inherit; text-decoration: none; }
.calm_page :focus-visible { outline: 3px solid #0056b4; outline-offset: 3px; }

/* Scroll suau per als ancoratges de la landing. Va en html perque l'element que fa
   scroll es l'arrel; el :has() ho limita a les pagines que porten la landing. */
html:has(.calm_page) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.calm_page) { scroll-behavior: auto; } }
	.calm_page section[id] { scroll-margin-top: 24px; }

	/* --- Botó de carret flotant: la landing no porta el header del tema --------- */
	.calm_cart_float { position: fixed; top: 20px; right: 20px; z-index: 9999; width: 54px; height: 54px; border-radius: 50%; background-color: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .2); display: grid; place-items: center; cursor: pointer; }
		.calm_cart_float_icon { width: 22px; height: 20px; display: block; }
		.calm_cart_float .header_cart_number { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background-color: #ed939a; color: #000; font-size: 11px; font-weight: 700; line-height: 22px; text-align: center; }
	@media only screen and (max-width: 768px) { .calm_cart_float { top: 12px; right: 12px; width: 48px; height: 48px; } }

	/* --- Estructura ------------------------------------------------------------ */
	.calm_container { max-width: 1300px; margin: 0 auto; padding: 0 30px; }
	@media only screen and (max-width: 768px) { .calm_container { padding: 0 16px; } }
	.calm_section { padding: 72px 0; }
	@media only screen and (max-width: 768px) { .calm_section { padding: 48px 0; } }
	.calm_section_hero { padding-top: 24px; }
	.calm_section_respuesta { padding: 32px 0 0; }
	.calm_section_rutina { padding-top: 32px; }
	.calm_soft { background-color: #f2eee6; }

	/* --- Tipografia i utilitats ------------------------------------------------ */
	.calm_h2 { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase; }
	.calm_h3 { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
	.calm_lead { max-width: 60ch; font-size: 18px; font-weight: 300; color: #666; }
	.calm_eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #666; }
	.calm_section_title { display: flex; align-items: center; gap: 16px; margin: 0 0 24px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
	.calm_section_title::after { content: ''; flex: 1; height: 1px; background-color: #e4e4e4; }
	.calm_small { font-size: 12px; color: #666; }
	.calm_center { text-align: center; }
	.calm_center .calm_lead { margin-left: auto; margin-right: auto; }
	.calm_stack { display: grid; gap: 16px; }
	.calm_row { display: flex; flex-wrap: wrap; gap: 12px; }
	.calm_vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	/* --- Botons ---------------------------------------------------------------- */
	.calm_bt { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 28px; border: 2px solid #000; border-radius: 7px; background-color: #000; color: #fff; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
	.calm_bt:hover { background-color: #fff; color: #000; }
	.calm_bt_outline { background-color: transparent; color: #000; }
	.calm_bt_outline:hover { background-color: #000; color: #fff; }

	/* --- Píndoles d'actius ----------------------------------------------------- */
	.calm_pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 24px; }
		.calm_pill { display: inline-flex; align-items: center; min-height: 32px; padding: 0 16px; border-radius: 999px; background-color: #000; color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

	/* --- 1 · Cabecera ---------------------------------------------------------- */
	.calm_banner { border-radius: 12px; overflow: hidden; background-color: #ed939a; color: #000; }
		.calm_banner_inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center; padding: 72px 48px; }
		@media only screen and (max-width: 860px) { .calm_banner_inner { grid-template-columns: 1fr; padding: 48px 24px; } }
			.calm_banner_text { display: grid; justify-items: start; gap: 16px; }
				.calm_banner_text .calm_eyebrow { color: inherit; }
				.calm_banner_title { margin: 0; font-size: clamp(44px, 8vw, 96px); font-weight: 300; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
					.calm_banner_title small { display: block; margin-top: 12px; font-size: clamp(16px, 2.4vw, 26px); font-weight: 400; letter-spacing: .2em; }
					.calm_h1_desc { display: block; margin-top: 12px; font-size: clamp(14px, 1.7vw, 18px); font-weight: 400; line-height: 1.4; letter-spacing: .08em; text-transform: none; }
				.calm_banner_claim { margin: 8px 0; font-size: clamp(20px, 3vw, 30px); font-weight: 300; font-style: italic; }
				.calm_banner_txt { max-width: 46ch; }
				.calm_banner_text .calm_row { margin-top: 8px; }
			/* El PNG de la dona apoia en la vora inferior del bloc: el tall dels muscles queda ocult.
			   El fitxer porta ~10px de marge transparent a baix i es compensa amb el margin negatiu. */
			.calm_hero_img { align-self: end; margin-bottom: -82px; display: flex; justify-content: center; }
				.calm_woman { display: block; width: min(100%, 540px); height: auto; }
			@media only screen and (max-width: 860px) { .calm_hero_img { margin-bottom: -56px; } .calm_woman { width: min(100%, 420px); } }

	/* --- Respuesta directa (SEO/GEO) ------------------------------------------- */
	.calm_section_respuesta .calm_lead { max-width: 78ch; }

	/* --- 2 · La rutina en quatre passos ---------------------------------------- */
	.calm_grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
	@media only screen and (max-width: 1100px) { .calm_grid4 { grid-template-columns: repeat(2, 1fr); } }
	@media only screen and (max-width: 520px) { .calm_grid4 { grid-template-columns: 1fr; } }
		.calm_card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e4e4e4; border-radius: 12px; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
			.calm_card_media { aspect-ratio: 1 / 1; padding: 16px; background-color: #f6f6f6; display: grid; place-items: center; }
				.calm_card_media img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
			.calm_card_body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
				.calm_card_step { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #000; }
					.calm_card_num { flex: none; width: 40px; height: 40px; border-radius: 50%; background-color: #ed939a; color: #000; display: grid; place-items: center; font-size: 20px; font-weight: 700; letter-spacing: 0; }
					.calm_card_step small { display: block; font-size: 11px; font-weight: 500; letter-spacing: .14em; line-height: 1.3; color: #666; }
				.calm_card_title { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.35; }
				.calm_card_text { flex: 1; font-size: 14px; color: #000; }
				.calm_price { font-size: 16px; font-weight: 400; }
					.calm_price small { font-size: 12px; font-weight: 300; color: #666; }
				.calm_stock { font-size: 14px; font-weight: 600; color: #1b7f3b; }
				.calm_stock_sm { font-size: 12px; font-weight: 600; color: #1b7f3b; }
				.calm_stock_sm::before { content: '\2713\00a0'; }
				/* El botó d'afegir al carret el pinta el tema (.added_to_cart_product_bt,
				   a style_products.css): ací només s'alinea a baix de la targeta. */
				.calm_card_body .boto_comprar { margin-top: auto; }

		/* Pas extra · SPF50 */
		.calm_spf { max-width: 820px; margin: 32px auto 0; padding: 24px; display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; border: 1px solid #e4e4e4; border-radius: 12px; }
		@media only screen and (max-width: 640px) { .calm_spf { grid-template-columns: 1fr; text-align: center; } }
			.calm_spf img { width: 100%; height: auto; display: block; }
			@media only screen and (max-width: 640px) { .calm_spf img { max-width: 180px; margin-left: auto; margin-right: auto; } }
			.calm_spf .calm_stack { gap: 12px; }
			.calm_spf .boto_comprar { max-width: 320px; }
			@media only screen and (max-width: 640px) { .calm_spf .boto_comprar { margin-left: auto; margin-right: auto; } }
		.calm_nota_precio { margin-top: 16px; }

	/* --- 3b · Resultats de l'estudi -------------------------------------------- */
	.calm_estudio { text-align: center; }
		.calm_estudio_datos { margin: 0; }
		.calm_cifras { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 48px; }
			.calm_cifra { flex: 1 1 180px; max-width: 240px; }
				.calm_cifra strong { display: block; font-size: clamp(44px, 6vw, 56px); font-weight: 300; line-height: 1.1; }
				.calm_cifra sup { font-size: 16px; }
		.calm_estudio_nota { max-width: 90ch; margin: 0 auto; font-size: 12px; color: #666; }

	/* --- 4 · Neceser CALM Beauty Bag ------------------------------------------- */
	.calm_bag { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: center; }
	@media only screen and (max-width: 860px) { .calm_bag { grid-template-columns: 1fr; gap: 24px; } }
		/* El packshot ja ve amb fons blanc pur: amb multiply desapareix contra la pàgina
		   i no cal la màscara de vores difuminades que gastava el prototip. */
		.calm_bag_media { display: grid; place-items: center; }
			.calm_bag_media img { width: 100%; max-width: 760px; height: auto; mix-blend-mode: multiply; }
		.calm_badge_theme { justify-self: start; padding: 3px 10px; background-color: #ed939a; color: #000; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
		.calm_price_lg { font-size: 40px; font-weight: 400; line-height: 1.1; }
			.calm_price_lg small { font-size: 12px; font-weight: 300; color: #666; }
		.calm_perks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
			.calm_perks li::before { content: '\2713'; margin-right: 10px; font-weight: 700; }
		.calm_bag .boto_comprar { max-width: 320px; }

	/* --- 5 · Vídeo ------------------------------------------------------------- */
	.calm_video { background-color: #000; color: #fff; }
		.calm_video .calm_eyebrow { color: #bbb; }
		.calm_video .calm_h2 { margin-top: 8px; }
		.calm_player { max-width: 900px; margin: 32px auto 0; aspect-ratio: 16 / 9; border: 1px solid #333; border-radius: 12px; background-color: #1a1a1a; overflow: hidden; }
			.calm_player iframe { width: 100%; height: 100%; border: 0; display: block; }

	/* --- 6 · Com es gasta ------------------------------------------------------ */
	.calm_routine { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
	@media only screen and (max-width: 720px) { .calm_routine { grid-template-columns: 1fr; } }
		.calm_when { padding: 32px; border: 1px solid #e4e4e4; border-radius: 12px; }
			.calm_when ol { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; counter-reset: s; }
				.calm_when li { display: flex; gap: 12px; counter-increment: s; }
				.calm_when li::before { content: counter(s); flex: none; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background-color: #ed939a; color: #000; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
				.calm_when li a { text-decoration: underline; }

	/* --- 7 · Qui està darrere -------------------------------------------------- */
	.calm_about { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
	@media only screen and (max-width: 860px) { .calm_about { grid-template-columns: 1fr; gap: 24px; } }
		.calm_about_media { margin: 0; }
			.calm_about_media img { width: 100%; height: auto; display: block; }
		.calm_facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
		@media only screen and (max-width: 520px) { .calm_facts { grid-template-columns: 1fr; } }
			.calm_facts li { display: grid; gap: 2px; align-content: start; padding-top: 12px; border-top: 2px solid #000; }
				.calm_facts strong { font-size: 20px; font-weight: 600; line-height: 1.2; }
				.calm_facts span { font-size: 14px; line-height: 1.4; color: #666; }

	/* --- 8 · Preguntes freqüents ----------------------------------------------- */
	.calm_faq { display: grid; gap: 8px; max-width: 860px; }
		.calm_faq details { padding: 0 24px; border: 1px solid #e4e4e4; border-radius: 12px; background-color: #fff; }
			.calm_faq summary { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 500; list-style: none; cursor: pointer; }
			.calm_faq summary::-webkit-details-marker { display: none; }
			.calm_faq summary::after { content: '+'; font-size: 24px; font-weight: 300; }
			.calm_faq details[open] summary::after { content: '\2013'; }
			.calm_faq p { margin: 0; padding: 0 0 24px; font-size: 16px; color: #666; }

	/* --- 9 · Tancament --------------------------------------------------------- */
	.calm_closing { background-color: #ed939a; color: #000; text-align: center; }