/**
 * Lawi — motion.
 *
 * 1. Tokens
 * 2. Scroll reveal (driven by assets/js/motion.js; gated by html.js-motion)
 * 3. Micro-interactions
 *
 * Reveal animations only define a `from` frame and use the individual
 * `translate` / `scale` properties, so they compose with existing transforms
 * (full-bleed carousels, hover lifts) and end on each element's own styles.
 */

/* ============================================================ 1. Tokens */
:root {
	--ease-out: var(--ease);                    /* cubic-bezier(0.22, 1, 0.36, 1) */
	--ease-mask: cubic-bezier(0.65, 0, 0.35, 1); /* clip-path wipes */
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);   /* opacity-only fades */
	--ease-in: cubic-bezier(0.4, 0, 1, 1);       /* exits */
	--d-press: 120ms;
	--d-hover: 200ms;
	--d-panel: 320ms;
	--d-rise: 800ms;
	--d-reveal: 1100ms;
}

/* ============================================================ 2. Scroll reveal */
@keyframes m-rise { from { translate: 0 var(--m-y, 24px); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-unveil { from { clip-path: inset(9% 5% round var(--m-r, 0px)); } to { clip-path: inset(0 round var(--m-r, 0px)); } }
@keyframes m-settle { from { scale: 1.1; } }
@keyframes m-line { from { translate: 0 100%; } }
@keyframes m-draw { from { scale: 0 1; } }
@keyframes m-wipe { from { clip-path: inset(0 100% 0 0); } }
@keyframes m-card { from { translate: 0 var(--m-c, 48px); } }
@keyframes m-down { from { translate: 0 -10px; } }

@media screen and (prefers-reduced-motion: no-preference) {
	/* Until motion.js has tagged the page: the opening section keeps its media
	   (LCP) but holds its text; everything after it waits. Lasts a few ms
	   (at most 300ms while the display font loads). */
	.js-motion:not(.motion-ready) #primary > :not(:first-child),
	.js-motion:not(.motion-ready) .site-footer,
	.js-motion:not(.motion-ready) #primary > :first-child :is(h1, h2, h3, p, ul, ol, nav, .btn, .ebk-btn, .post-meta, .post-head__share) { opacity: 0; }

	/* Every primitive holds its first frame (paused) until `.is-in`. */
	.js-motion [data-m] {
		animation-duration: var(--d-rise);
		animation-timing-function: var(--ease-out);
		animation-fill-mode: backwards;
		animation-delay: var(--m-d, 0ms);
		animation-play-state: paused;
	}
	.js-motion [data-m].is-in { animation-play-state: running; }

	/* Movement and opacity run as two animations: the travel decelerates
	   (expo out) while the fade follows its own even curve, so nothing pops
	   in during the first frames. */
	.js-motion [data-m="rise"] {
		animation-name: m-rise, m-fade;
		animation-duration: 1100ms, 900ms;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
	}
	.js-motion [data-m="fade"] { animation-name: m-fade; animation-duration: 1000ms; animation-timing-function: var(--ease-soft); }
	.js-motion [data-m="draw"] { animation-name: m-draw; animation-duration: var(--d-reveal); animation-timing-function: var(--ease-mask); transform-origin: left center; }
	.js-motion [data-m="wipe"] { animation-name: m-wipe; animation-duration: 1200ms; animation-timing-function: var(--ease-mask); }

	/* unveil (standalone images): the frame opens out from the centre, keeping
	   the element's own corner radius (--m-r, set by motion.js), while it
	   fades in and the picture inside settles from a slight zoom. */
	.js-motion [data-m="unveil"] {
		animation-name: m-unveil, m-fade;
		animation-duration: 1400ms, 700ms;
		animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1), cubic-bezier(0.33, 0, 0.2, 1);
	}
	.js-motion [data-m="unveil"] img,
	.js-motion [data-m="unveil"] video {
		animation: m-settle 2000ms cubic-bezier(0.16, 1, 0.3, 1) backwards paused;
		animation-delay: var(--m-d, 0ms);
	}
	/* The settling picture never spills past its frame; the mindset carousel's
	   slides sit side by side, so they only get the frame and the fade. */
	.js-motion [data-m="unveil"]:not(.mindset__carousel) { overflow: clip; }
	.js-motion .mindset__carousel[data-m] :is(img, video) { animation: none; }
	.js-motion [data-m="unveil"].is-in img,
	.js-motion [data-m="unveil"].is-in video { animation-play-state: running; }

	/* card: fades in while it travels up, its artwork settling from a slight zoom. */
	.js-motion [data-m="card"] {
		animation-name: m-card, m-fade;
		animation-duration: 1200ms, 1000ms;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
	}
	.js-motion [data-m="card"] :is(img, video) {
		animation: m-settle 1800ms cubic-bezier(0.16, 1, 0.3, 1) backwards paused;
		animation-delay: var(--m-d, 0ms);
	}
	.js-motion [data-m="card"].is-in :is(img, video) { animation-play-state: running; }

	/* lines: each rendered line rises out of its own mask while it fades in
	   (the fade hides the glyph tops that sit inside the clip margin at the
	   start). The clip box reaches past the line box so accents and descenders
	   are never cut. */
	.js-motion [data-m="lines"] { animation: none; }
	.m-line { display: block; clip-path: inset(-0.35em -0.6em -0.3em -0.6em); }
	.m-line__in {
		display: block;
		animation-name: m-line, m-fade;
		animation-duration: 1300ms, 900ms;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
		animation-fill-mode: backwards;
		animation-play-state: paused;
		animation-delay: calc(var(--m-d, 0ms) + var(--l, 0) * 120ms);
	}
	[data-m="lines"].is-in .m-line__in { animation-play-state: running; }

	/* Opening section: its media settles from a slight zoom on load. */
	.js-motion #primary > :first-child :is(.hero__media, .svc-hero__media, .intro-stack__media, .partners-intro__media, .post-cover__frame) :is(img, video) {
		animation: m-settle 2200ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	}

	/* Home: the header joins the hero intro - menu, then logo, then actions -
	   each settling down a few pixels while it fades in. */
	.js-motion body.home .site-header :is(.site-header__brand, .primary-nav, .header-actions) {
		animation-name: m-down, m-fade;
		animation-duration: 1000ms, 800ms;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
		animation-fill-mode: backwards;
		animation-delay: 150ms;
	}
	.js-motion body.home .site-header .site-header__brand { animation-delay: 250ms; }
	.js-motion body.home .site-header .header-actions { animation-delay: 350ms; }
	.js-motion body.home .site-header.is-sticky :is(.site-header__brand, .primary-nav, .header-actions) { animation: none; }

	/* Tab panels (docs, plans, regions) replay their entrance whenever they are
	   shown again; after the first reveal that replay is short and close. */
	.js-motion [data-m].is-done,
	.js-motion [data-m].m-quick {
		animation-duration: 650ms, 450ms;
		--m-y: 10px;
		--m-c: 14px;
	}

	/* Larger steps for a few items. */
		.js-motion .process__grid > [data-m] { animation-duration: 900ms; }
	.js-motion .faq__list > [data-m="rise"],
	.js-motion .footer-form > [data-m="rise"],
	.js-motion .ebk-chips > [data-m="rise"] { --m-y: 12px; }
}

/* ============================================================ 3. Micro-interactions */

/* Buttons: one behaviour for every pill. Hover (pointer devices only) lifts
   2px, deepens the fill a step and casts a soft shadow; a press settles back
   down on every device. */
.btn, .feature-card__cta, .single-post .ebk-btn, .footer-form__submit {
	transition: transform 280ms var(--ease-out), background-color 280ms var(--ease-out), color 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), filter 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.btn:hover, .feature-card__cta:hover, .single-post .ebk-btn:hover, .footer-form__submit:hover {
		transform: translateY(-2px);
		box-shadow: 0 10px 22px -12px rgba(39, 33, 27, 0.45);
		filter: none;
	}
	.btn--coral:hover, .footer-form__submit:hover, .single-post .ebk-btn:hover { background-color: #d9694a; }
	.feature-card__cta:hover, .btn--accent:hover { background-color: #f2603f; }
	.btn--dark:hover { background-color: #3a332d; }
	.btn--ghost-light:hover { background-color: rgba(244, 239, 230, 0.22); border-color: rgba(244, 239, 230, 0.85); }
	.btn--ghost:hover { background-color: rgba(39, 33, 27, 0.06); }
}
@media (hover: none) {
	.btn:hover, .feature-card__cta:hover, .single-post .ebk-btn:hover, .footer-form__submit:hover { transform: none; filter: none; }
}
.btn:active, .feature-card__cta:active, .single-post .ebk-btn:active, .footer-form__submit:active {
	transform: translateY(0) scale(0.98);
	box-shadow: none;
	transition-duration: var(--d-press);
}

/* Arrow-style "read more" labels move a touch toward their target. */
.blog-card__more, .cg-card__more { display: inline-block; transition: translate var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.blog-card:hover .blog-card__more,
	.cg-card--link:hover .cg-card__more { translate: 4px 0; }
}

/* Language switcher. */
.lawi-lang-switcher a { transition: opacity var(--d-hover) var(--ease-out); }
@media (hover: hover) { .lawi-lang-switcher a:hover { opacity: 1; } }

/* Docs pills: coral fill on hover (pointer devices only, so a tap on a phone
   doesn't leave a pill highlighted). */
.docs-tag { transition: background-color 250ms var(--ease-out), color 250ms var(--ease-out); }
@media (hover: none) { .docs-tag:hover { background: rgba(255, 255, 255, 0.4); } }

/* Desktop dropdown: settles in from just above, lingers briefly on the way out
   so the pointer can cross the gap without the panel flickering. */
@media (min-width: 1101px) {
	.primary-nav .sub-menu {
		translate: 0 -6px;
		transition: opacity var(--d-hover) var(--ease-in) 80ms, visibility 0s linear 280ms, translate var(--d-hover) var(--ease-in) 80ms;
	}
	.primary-nav .menu-item-has-children:hover > .sub-menu,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu {
		translate: 0 0;
		transition: opacity var(--d-panel) var(--ease-out), visibility 0s, translate var(--d-panel) var(--ease-out);
	}
	.primary-nav .sub-menu > li { opacity: 0; translate: 0 6px; transition: opacity 160ms var(--ease-in), translate 160ms var(--ease-in); }
	.primary-nav .menu-item-has-children:hover > .sub-menu > li,
	.primary-nav .menu-item-has-children:focus-within > .sub-menu > li {
		opacity: 1;
		translate: 0 0;
		transition: opacity 360ms var(--ease-out), translate 360ms var(--ease-out);
	}
	.primary-nav .menu-item-has-children:hover > .sub-menu > li:nth-child(2),
	.primary-nav .menu-item-has-children:focus-within > .sub-menu > li:nth-child(2) { transition-delay: 40ms; }
	.primary-nav .menu-item-has-children:hover > .sub-menu > li:nth-child(3),
	.primary-nav .menu-item-has-children:focus-within > .sub-menu > li:nth-child(3) { transition-delay: 80ms; }
	.primary-nav .menu-item-has-children:hover > .sub-menu > li:nth-child(4),
	.primary-nav .menu-item-has-children:focus-within > .sub-menu > li:nth-child(4) { transition-delay: 120ms; }
	.primary-nav .menu-item-has-children > a::after { transition: transform var(--d-hover) var(--ease-out); }
}

@media (min-width: 1101px) {
	/* Closing: the header keeps its dark state for the same 80ms the panel
	   lingers, so header and panel always leave together. */
	.site-header { transition: background-color 200ms var(--ease-in) 80ms, color 200ms var(--ease-in) 80ms; }
	.site-header:has(.menu-item-has-children:hover),
	.site-header:has(.menu-item-has-children:focus-within) { transition: background-color 280ms var(--ease-out), color 280ms var(--ease-out); }
	.site-header .site-brand__img { transition: filter 200ms var(--ease-in) 80ms; }
	.site-header:has(.menu-item-has-children:hover) .site-brand__img,
	.site-header:has(.menu-item-has-children:focus-within) .site-brand__img { transition: filter 280ms var(--ease-out); }

	/* Moving from one dropdown to another: the previous panel leaves at once
	   instead of cross-fading under the new one. */
	#primary-menu:has(> .menu-item-has-children:hover) > .menu-item-has-children:not(:hover) > .sub-menu {
		transition: none;
		opacity: 0;
		visibility: hidden;
	}
}

/* Mobile / tablet drawer: slides in with a long ease-out and leaves faster;
   its rows cascade in once it is open, then the language switch and button. */
@media (max-width: 1100px) {
	.primary-nav { transition: transform 300ms var(--ease-in); }
	.nav-open .primary-nav { transition: transform 620ms cubic-bezier(0.16, 1, 0.3, 1); }

	.nav-open #primary-menu > li,
	.nav-open .primary-nav__foot > * {
		animation-name: m-rise, m-fade;
		animation-duration: 800ms, 600ms;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
		animation-fill-mode: backwards;
		animation-delay: 140ms;
		--m-y: 16px;
	}
	.nav-open #primary-menu > li:nth-child(2) { animation-delay: 190ms; }
	.nav-open #primary-menu > li:nth-child(3) { animation-delay: 240ms; }
	.nav-open #primary-menu > li:nth-child(4) { animation-delay: 290ms; }
	.nav-open #primary-menu > li:nth-child(5) { animation-delay: 340ms; }
	.nav-open #primary-menu > li:nth-child(n+6) { animation-delay: 390ms; }
	.nav-open .primary-nav__foot > * { animation-delay: 420ms; }
	.nav-open .primary-nav__foot > * + * { animation-delay: 470ms; }

	/* Accordion: the open sub-menu's links settle in one after another. */
	body .primary-nav li.is-open > .sub-menu > li {
		animation-name: m-rise, m-fade;
		animation-duration: 600ms, 450ms;
		animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
		animation-fill-mode: backwards;
		--m-y: 8px;
	}
	body .primary-nav li.is-open > .sub-menu > li:nth-child(2) { animation-delay: 50ms; }
	body .primary-nav li.is-open > .sub-menu > li:nth-child(3) { animation-delay: 100ms; }
	body .primary-nav li.is-open > .sub-menu > li:nth-child(4) { animation-delay: 150ms; }
	body .primary-nav li.is-open > .sub-menu > li:nth-child(n+5) { animation-delay: 200ms; }
}

/* Cards. Photos are clipped so the entrance settle and the hover zoom stay inside the frame. */
.team-member__photo, .team-card__photo { overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
	.team-member__photo img { transition: scale 700ms var(--ease-out); }
	.team-member:hover .team-member__photo img { scale: 1.035; }
	.team-card__photo img { transition: scale 700ms var(--ease-out); }
	.team-card:hover .team-card__photo img { scale: 1.035; }
}

/* FAQ: the answer opens smoothly where the browser can animate to `auto`. */
@supports (interpolate-size: allow-keywords) {
	.faq-item { interpolate-size: allow-keywords; }
	.faq-item::details-content {
		block-size: 0;
		overflow: clip;
		transition: block-size var(--d-panel) var(--ease-out), content-visibility var(--d-panel) allow-discrete;
	}
	.faq-item[open]::details-content { block-size: auto; }
}
.faq-item__q { transition: color var(--d-hover) var(--ease-out); }
@media (hover: hover) { .faq-item__q:hover { color: #e77958; } }

/* Form fields: a clearer focus underline. */
.footer-field input, .footer-field textarea { transition: border-color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out); }
.footer-field input:focus-visible, .footer-field textarea:focus-visible { box-shadow: 0 1px 0 0 var(--c-accent-2); }

/* Carousel dots: easier to hit, smoother state change. */
.carousel-dots__dot, .testimonials__dot { transition: background-color var(--d-panel) var(--ease-out), opacity var(--d-hover) var(--ease-out); }

/* ---------------------------------------------------------- Header */
/* Sticky bar: glides down when it takes over and back up when it hands the
   page back to the hero header (main.js adds .is-unsticking for the exit). */
.site-header.is-sticky { animation: header-drop 560ms cubic-bezier(0.16, 1, 0.3, 1); }
.site-header.is-sticky.is-unsticking { animation: header-lift 260ms var(--ease-in) forwards; }
@keyframes header-lift { to { transform: translateY(-100%); } }

/* The logo follows the header into the dark dropdown state (see the
   dropdown block above) instead of snapping. */
.site-brand__img { transition: filter 200ms var(--ease-out); }

@media (min-width: 1101px) {
	/* Top-level links: a hairline draws in from the left on hover. The dropdown
	   parents keep their full-height line, now drawn the same way. */
	#primary-menu > li:not(.menu-item-has-children) > a { position: relative; }
	#primary-menu > li:not(.menu-item-has-children) > a::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 1px;
		background: currentColor;
		scale: 0 1;
		transform-origin: right center;
		transition: scale 320ms var(--ease-out);
	}
	.primary-nav .menu-item-has-children > a::before {
		scale: 0 1;
		transform-origin: right center;
		transition: opacity 180ms var(--ease-out), scale 320ms var(--ease-out);
	}
	.primary-nav .menu-item-has-children:hover > a::before,
	.primary-nav .menu-item-has-children:focus-within > a::before { scale: 1 1; transform-origin: left center; }
}
@media (min-width: 1101px) and (hover: hover) {
	#primary-menu > li:not(.menu-item-has-children) > a:hover::before { scale: 1 1; transform-origin: left center; }
}
@media (min-width: 1101px) {
	#primary-menu > li:not(.menu-item-has-children) > a:focus-visible::before { scale: 1 1; transform-origin: left center; }
}

/* ---------------------------------------------------------- Footer */
.footer-bottom__nav a, .footer-contact__mail { transition: color var(--d-hover) var(--ease-out); }
.footer-social a { transition: background-color 280ms var(--ease-out), border-color 280ms var(--ease-out), transform 280ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.footer-bottom__nav a:hover { color: #e77958; }
	.footer-contact__mail:hover { color: #d9694a; }
	.footer-social a:hover { background-color: rgba(39, 33, 27, 0.06); border-color: rgba(39, 33, 27, 0.35); transform: translateY(-2px); }
}
.footer-social a:active { transform: scale(0.96); transition-duration: var(--d-press); }

/* ---------------------------------------------------------- Carousels */
/* Testimonials: slides share one grid cell and cross-fade. The outgoing quote
   only fades; the incoming one fades in a beat later while rising 10px. */
[data-carousel] :is(.testimonials__track, .svc-testi__track) { display: grid; transform: none; transition: none; }
[data-carousel] :is(.testimonial, .svc-testi) {
	grid-area: 1 / 1;
	min-width: 0;
	opacity: 0;
	visibility: hidden;
	translate: 0 10px;
	transition: opacity 420ms var(--ease-in), translate 0s linear 420ms, visibility 0s linear 420ms;
}
[data-carousel] :is(.testimonial, .svc-testi).is-active {
	opacity: 1;
	visibility: visible;
	translate: 0 0;
	transition: opacity 800ms cubic-bezier(0.33, 0, 0.2, 1) 240ms, translate 1000ms cubic-bezier(0.16, 1, 0.3, 1) 240ms, visibility 0s;
}

/* Autoplay dots: while a carousel is playing, the active dot fills over the
   6s interval, so the next change never comes as a surprise. Paused (hover,
   out of view) it simply shows as active. */
@keyframes m-progress { from { scale: 0 1; } }
.testimonials__dot { position: relative; }
[data-carousel].is-playing .testimonials__dot.is-active,
[data-mindset].is-playing .mindset__dot.is-active { background-color: #c5bcb9; }
[data-carousel].is-playing .testimonials__dot.is-active::after,
[data-mindset].is-playing .mindset__dot.is-active::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: #4e3a1d;
	transform-origin: left center;
	animation: m-progress 6000ms linear both;
}

/* Rotating title: the outgoing word lifts away as the next rises in. */
.rotating__word, .rotating__word.is-active { transform: none; }
.rotating__word { translate: 0 0.3em; transition: opacity 320ms var(--ease-in), translate 320ms var(--ease-in); }
.rotating__word.is-active { translate: 0 0; transition: opacity 700ms cubic-bezier(0.33, 0, 0.2, 1) 120ms, translate 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms; }
.rotating__word.is-leaving { translate: 0 -0.3em; }

/* ---------------------------------------------------------- Forms */
/* Fields: on focus a 2px coral line draws across the underline from the left
   and the placeholder steps back. A field that was left invalid shows a red
   underline (only after the visitor has interacted with it). */
.footer-field input, .footer-field textarea, .ebk-field input {
	background-image: linear-gradient(#e77958, #e77958);
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: 0% 2px;
	transition: background-size 500ms cubic-bezier(0.16, 1, 0.3, 1), border-color 200ms var(--ease-out);
}
.footer-field input:focus, .footer-field textarea:focus, .ebk-field input:focus { background-size: 100% 2px; }
.footer-field :is(input, textarea)::placeholder, .ebk-field input::placeholder { transition: opacity 200ms var(--ease-out); }
.footer-field :is(input, textarea):focus::placeholder, .ebk-field input:focus::placeholder { opacity: 0.45; }
.footer-field :is(input, textarea):user-invalid, .ebk-field input:user-invalid { border-bottom-color: #c2412d; }
.footer-field :is(input, textarea):focus-visible, .ebk-field input:focus-visible { box-shadow: none; }

/* Consent checkbox: the box fills and the tick pops in. */
.ebk-consent input { transition: background-color 200ms var(--ease-out), border-color 200ms var(--ease-out); }
@keyframes m-pop { from { scale: 0; opacity: 0; } }
.ebk-consent input:checked::after { animation: m-pop 280ms cubic-bezier(0.34, 1.4, 0.64, 1); }

/* Sending: the button keeps its label, dims slightly and shows a small
   spinner; main.js (initForms) adds .is-sending once the form is valid. */
@keyframes m-spin { to { rotate: 1turn; } }
.is-sending :is(.footer-form__submit, .ebk-btn) { pointer-events: none; opacity: 0.8; cursor: progress; }
.is-sending :is(.footer-form__submit, .ebk-btn)::after {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	border: 1.5px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: m-spin 700ms linear infinite;
}

/* Result notices (footer contact and e-book): soft panels that settle in. */
.footer-form__notice { margin: 0; padding: 12px 14px; border-radius: 6px; background: #b5d0ed; color: var(--c-ink); font-size: 14px; line-height: 20px; }
.footer-form__notice--error { background: #f6d3c7; }
.footer-form__notice, .ebk-form__notice {
	animation-name: m-rise, m-fade;
	animation-duration: 900ms, 700ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
	animation-fill-mode: backwards;
	animation-delay: 200ms;
	--m-y: 10px;
}
/* Anchor landings (#contacto from the menu, back from a submission;
   #get-the-ebook) clear the fixed header. */
#contacto, #get-the-ebook, #servicios { scroll-margin-top: 96px; }

/* ---------------------------------------------------------- Inner pages */
/* FAQ: the answer fades up as its panel opens. */
.faq-item[open] .faq-item__a {
	animation-name: m-rise, m-fade;
	animation-duration: 600ms, 450ms;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.33, 0, 0.2, 1);
	animation-delay: 60ms;
	animation-fill-mode: backwards;
	--m-y: 6px;
}

/* Article cards (home teaser, blog index, related): a soft lift on hover. */
.blog-card { transition: translate 420ms var(--ease-out), box-shadow 420ms var(--ease-out); }
.lens__item-title { transition: color var(--d-hover) var(--ease-out); }
.lens__item-thumb img { transition: scale 700ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.blog-card:hover { translate: 0 -4px; box-shadow: 0 22px 34px -26px rgba(39, 33, 27, 0.55); }
	.lens__item a:hover .lens__item-thumb img { scale: 1.05; }
}

/* ---------------------------------------------------------- Brand strips */
/* main.js (initLogoFade) cycles the logos in sets: each slot fades out, takes
   the next logo and fades back in, one slot after another. */
.partners__logo, .section--logos-strip .logo-item { transition: opacity 450ms var(--ease-soft); }
.partners__logo.is-swapping, .section--logos-strip .logo-item.is-swapping { opacity: 0; transition-duration: 380ms; }
.partners__logos [hidden], .logos-row [hidden] { display: none !important; }
.section--logos-strip .logo-item__img--raster { width: auto; height: 40px; max-width: none; }
@media (max-width: 700px) {
	.section--logos-strip .logo-item__img--raster { height: 30px; }
	/* Three logos per set on phones: no sideways scrolling needed. */
	.partners__logos.is-cycling { overflow: visible; justify-content: center; gap: 22px; margin-inline: 0; padding-inline: 0; }
	.partners__logos.is-cycling .partners__logo img { height: 28px; }
}