/* Mantención de Estufas — theme styles
   Colours, sizes and spacing all come from theme.json.
   Only what the blocks cannot express on their own belongs here. */

:root {
	--me-shadow-sm: 0 1px 2px rgba(20, 17, 15, .06), 0 4px 12px rgba(20, 17, 15, .05);
	--me-shadow-md: 0 2px 4px rgba(20, 17, 15, .06), 0 12px 32px rgba(20, 17, 15, .10);
	--me-ring: 0 0 0 1px var(--wp--preset--color--line);

	/* One deceleration curve for everything that moves, so the whole page
	   settles with the same weight. --me-ease-back overshoots ~7%, and is for
	   the two things that should feel like they landed. */
	--me-ease: cubic-bezier(.22, .61, .36, 1);
	--me-ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Base ---------- */

/* WordPress does not apply border-box globally: without this, any element
   with width:100% plus padding overflows its container. */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word; /* model names like "FH-6747 · FH-7747" must not break the layout */
}

/* The theme cannot rely on the preview's base styles. */
img, svg, video, iframe { max-width: 100%; height: auto; }

/* The header is sticky: compensate when jumping to an anchor */
:where([id]) { scroll-margin-top: 88px; }

/* ---------- Containers ----------
   The block "constrained" layout limits a group's CHILDREN, not the group
   itself, so sections rendered full-bleed. The theme defines its own
   containers rather than depend on that. */

.me-header__bar,
.me-hero__inner,
.me-section,
.me-footer {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* WordPress's inner groups must not reintroduce a width of their own. */
.me-section > .wp-block-group,
.me-hero__inner > .wp-block-group { max-width: none; }

/* WordPress's block-gap adds margin between top-level siblings. Here the
   spacing comes from each section's padding-block, so that margin stacks on
   top and throws off the vertical rhythm.

   This is also where the 24px band between the sticky header and the hero
   came from, and it took some finding, because the margin causing it was not
   on any of these elements. .me-hero__inner picks up a block-gap margin —
   WordPress zeroes it on a :first-child, but the hero's <figure> holds that
   slot, and the figure is position:absolute, so the inner is the first child
   still in flow. With no border or padding above it, that margin collapses
   straight up through .me-hero and <main> and pushes the whole page down.

   So all three need it: <main> for its own block-gap margin, and the inner
   for the one that collapses through. The header and footer escape it
   already, being template parts — .wp-block-template-part is display:contents
   and a margin on a contents box does nothing. */
.me-hero,
.me-section,
.me-hero__inner,
main.wp-block-group { margin-block: 0; }

/* ---------- Header ---------- */

/* The template-part block wraps the header in an element of its own. That
   wrapper is exactly as tall as the header, and since sticky resolves within
   its parent, there was no travel left: it came unstuck on the first scroll.
   With display:contents the wrapper leaves the layout and the header resolves
   against the page container instead, which is tall.
   The preview had no such wrapper, which is why it worked there. */
.wp-block-template-part { display: contents; }

.me-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(140%) blur(10px);
	background: rgba(250, 247, 244, .88);
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: background-color .25s, box-shadow .25s;
}

/* Set by motion.js past 8px of scroll. Not gated on .me-motion: a shadow is
   not motion, and a header floating over content with no separation from it
   is a legibility problem, not a flourish. */
.me-header.is-scrolled {
	background: rgba(250, 247, 244, .95);
	box-shadow: 0 6px 24px rgba(20, 17, 15, .07);
}

.me-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 72px;
}

/* WordPress treats the children of a "constrained" group in two ways that get
   in the way here: it sets margin-inline:auto !important — which in a flex
   container absorbs the free space and overrides justify-content, clustering
   logo, nav and button in the middle — and it adds margin-block-start from the
   second child onwards, which pushes the WhatsApp button down and knocks it
   off vertical centre. Reset the whole margin, not just the horizontal one. */
.me-header__bar > * {
	margin: 0 !important;
	max-width: none;
}

/* The logo is a core/site-logo block so it can be changed from the editor.
   That block writes an inline width onto the container; override it so height
   wins and the logo is not distorted when it is not square. */
.me-header__logo { width: auto !important; line-height: 0; }
.me-header__logo.me-header__logo img { display: block; height: 40px; width: auto; max-width: none; }

.me-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

.me-nav a {
	color: var(--wp--preset--color--charcoal);
	text-decoration: none;
	padding-block: .35rem;
	border-bottom: 2px solid transparent;
	transition: color .15s, border-color .15s;
}

.me-nav a:hover,
.me-nav a:focus-visible { color: var(--wp--preset--color--ember); border-bottom-color: currentColor; }

@media (max-width: 860px) {
	.me-nav { display: none; }
}

/* ---------- Buttons ---------- */

.me-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-weight: 700;
	line-height: 1;
	padding: 1rem 1.75rem;
	border-radius: 999px;
	text-decoration: none !important;
	transition: transform .15s, background-color .15s, box-shadow .15s;
	white-space: nowrap;
}

/* .me-btn was written for links. On a <button> the browser imposes its own
   border, background and system font, so those have to be reset. */
button.me-btn {
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: inherit;
	appearance: none;
}

.me-btn:hover { transform: translateY(-1px); }
.me-btn:active { transform: translateY(0); }

.me-btn--wa {
	background: var(--wp--preset--color--whatsapp);
	color: #06331A;
	box-shadow: var(--me-shadow-sm);
}
.me-btn--wa:hover { background: #1FBE5B; box-shadow: var(--me-shadow-md); }

.me-btn--ember { background: var(--wp--preset--color--ember); color: #fff; }
.me-btn--ember:hover { background: var(--wp--preset--color--charcoal); }

.me-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--charcoal);
	box-shadow: var(--me-ring);
}
.me-btn--ghost:hover { background: #fff; }

/* Ghost button variant, for use over the dark hero. */
.me-btn--onDark { color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.me-btn--onDark:hover { background: rgba(255,255,255,.12); color: #fff; }

.me-btn svg { width: 20px; height: 20px; flex: none; }

/* On very narrow screens, nowrap plus fixed padding pushes the button out of
   the viewport. Allow wrapping and reduce the padding. */
@media (max-width: 380px) {
	.me-btn { white-space: normal; padding-inline: 1.25rem; text-align: center; }
}

/* ---------- Hero ---------- */

.me-hero {
	position: relative;
	isolation: isolate;
	color: #fff;
	overflow: clip;
}

/* This used to be a <div> inside a wp:html block. It is now a core/image,
   which renders <figure class="wp-block-image">: core gives it a bottom margin
   and forces height:auto on the image, which would break the hero crop.
   The repeated class raises specificity above .wp-block-image img. */
.me-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
}

.me-hero__media.me-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* The photo is a 2.87:1 panorama and the hero on a phone is 0.35:1 — taller
   than it is wide. `cover` therefore shows a 12% vertical slice of the frame,
   and centred, that slice is curtain: the stove, which is the whole point of
   the picture, falls outside it. Measured on the file, the stove body spans
   52–75% of the width and centres on 63%.
   With a visible slice this narrow, object-position p puts the centre of the
   window at p*(1-0.124)+0.062 — so 65% lands the window on 57–69%, i.e. the
   stove. Most of this client's visitors are on a phone; this is the framing
   they see. */
@media (max-width: 1023px) {
	.me-hero__media.me-hero__media img { object-position: 65% center; }
}

/* The photo is bright on its own (mean luminance .20); the old veil — a flat
   vertical .55 → .94 — took the composite down to .02, a 90% cut. That is
   what the client saw as "too dark".

   Base veil, used at every width up to 1280px: still even, but far lighter
   than before. The composite lands at .04–.07 depending on the crop, roughly
   twice as bright, with every piece of hero text at 4.6:1 or better.

   Every number here was measured against this photo, sampling the actual
   pixel under each run of text at 375 / 768 / 900 / 1024 / 1200 / 1280 /
   1400. Re-measure if the photo is ever replaced — a lighter image needs
   MORE veil, not less, and the numbers do not carry over. */
.me-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(20,17,15,.52) 0%, rgba(20,17,15,.60) 65%, rgba(20,17,15,.72) 100%);
}

/* Wide screens only. The copy is capped at 720px, so past 1280px it no longer
   reaches the right-hand side of the hero — the stove can then sit almost
   unveiled while the text keeps a dark backing on the left. This is what
   makes the photo read bright rather than merely less dark.

   1280px is not cosmetic: at 1200px the text column still overhangs the clear
   zone and the eyebrow measures exactly 4.50:1, with no margin left. */
@media (min-width: 1280px) {
	.me-hero::after {
		background:
			linear-gradient(90deg, rgba(20,17,15,.62) 0%, rgba(20,17,15,.46) 45%, rgba(20,17,15,.10) 100%),
			linear-gradient(180deg, rgba(20,17,15,.10) 0%, rgba(20,17,15,.20) 65%, rgba(20,17,15,.40) 100%);
	}
}

/* A soft shadow on the text itself buys back the contrast the lighter veil
   gives up, without darkening the image again. */
.me-hero__inner {
	text-shadow: 0 1px 12px rgba(20,17,15,.55), 0 1px 2px rgba(20,17,15,.35);
}

/* Buttons are solid fills — the halo would only smear their labels. */
.me-hero .me-btn { text-shadow: none; }

/* The container runs full width (the meta row below needs it), but the
   heading and paragraph are capped: a 1160px line of text does not read
   well. */
.me-hero__inner { padding-block: clamp(4rem, 12vw, 7.5rem); }

/* WordPress centres the children of a "constrained" group with
   margin-inline:auto !important, so !important is needed here to keep the
   hero left-aligned. */
.me-hero h1,
.me-hero .wp-block-group > p {
	max-width: 720px;
	margin-inline: 0 !important;
}

.me-hero h1 { color: #fff; margin: 0 0 1.25rem; }
.me-hero p { color: rgba(255,255,255,.86); font-size: var(--wp--preset--font-size--lg); margin: 0 0 2rem; max-width: 720px; }

.me-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ember);
	margin-bottom: 1rem;
}

/* Location pin: the line starts with the district, so the icon carries
   meaning. This used to be a decorative bar that said nothing. */
.me-eyebrow::before {
    content: "";
    width: 15px;
    height: 15px;
    flex: none;
    align-self: flex-start;
    margin-top: 8px; /* adjust this if needed */
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.me-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* The two buttons stop fitting side by side around 565px. Once they stack
   they must share a width: two stacked buttons of different widths read as a
   mistake, not as a hierarchy. */
@media (max-width: 620px) {
	.me-hero__actions { flex-direction: column; align-items: stretch; }
	.me-hero__actions .me-btn { width: 100%; }

	/* clamp()'s floor is 4rem, which a phone hits at both ends — 128px of
	   padding on a screen the hero already overflows. The sticky WhatsApp bar
	   keeps a CTA on screen at all times, so the hero does not have to fit in
	   one screen, but it should not run to 1.3 of them either. */
	.me-hero__inner { padding-block: 2.75rem 3rem; }
}

.me-hero__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 1.5rem 2.5rem;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255,255,255,.18);
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255,255,255,.8);
}

.me-hero__metaItem { display: flex; flex-direction: column; }

/* The emphasis sits on the label, never on a value. The opening hours are two
   values under one label, and the client asked for Saturday to read as the
   equal of Monday–Friday: no bold on one line and not the other. */
.me-hero__metaLabel {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: rgba(255,255,255,.62);
	margin-bottom: .35rem;
}

.me-hero__metaItem > span:not(.me-hero__metaLabel) {
	color: #fff;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.5;
}

/* ---------- Sections ---------- */

.me-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.me-section--tint { background: var(--wp--preset--color--ember-soft); }
.me-section--dark { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--cream); }
.me-section--dark h2, .me-section--dark h3 { color: #fff; }

.me-section__head { max-width: 640px; margin-bottom: 3rem; }
.me-section__head h2 { margin: 0 0 .75rem; }
.me-section__head p { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--lg); margin: 0; }
.me-section--dark .me-section__head p { color: rgba(255,255,255,.7); }

/* ---------- Service / price cards ---------- */

/* The min() inside minmax is required: without it, auto-fit keeps its floor
   (320px, 280px…) even when the container is narrower, and the grid overflows
   sideways on small screens. */
.me-grid { display: grid; gap: 1.5rem; }

/* gap already provides the spacing. Because the cards are group blocks,
   WordPress also adds block-gap as a margin from the second child onwards,
   which sinks them inside their cell and knocks the row out of alignment. */
.me-grid > * { margin-block: 0 !important; }

/* These two margins used to be block spacing attributes. Moved to CSS: the
   editor validates the saved HTML against what the block would generate, and
   an inline style that does not match character for character flags the block
   as unexpected content in front of the client. */
.me-grid--symptoms { margin: 1.5rem 0 2.5rem; }
.me-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.me-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.me-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

.me-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 18px;
	box-shadow: var(--me-ring), var(--me-shadow-sm);
	overflow: hidden;
	transition: transform .18s, box-shadow .18s;
}

.me-card:hover { transform: translateY(-3px); box-shadow: var(--me-ring), var(--me-shadow-md); }

/* max-height is used instead of height:100%: a percentage against a box with
   aspect-ratio does not always resolve the same way, and the image ended up
   stretching the card to its natural height. */
/* Same as the hero: this is a core/image, so the <figure> margin has to be
   neutralised and core's own stylesheet beaten on specificity. */
.me-card__media {
	aspect-ratio: 16 / 10;
	background: var(--wp--preset--color--ember-soft);
	display: grid;
	place-items: center;
	padding: 1.25rem;
	overflow: hidden;
	min-height: 0;
	margin: 0;
}

.me-card__media.me-card__media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.me-card__body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.me-card__body h3 { margin: 0 0 .5rem; font-size: var(--wp--preset--font-size--lg); }
.me-card__body p { margin: 0 0 1.25rem; color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--sm); }

/* The price went from loose <span>s inside a wp:html block to a group with two
   paragraphs, so the client can edit it in the editor rather than in a raw
   HTML box. The paragraph margin and the block-gap WordPress injects between a
   group's children both have to be reset. */
.me-price {
	margin-top: auto;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem;
}

.me-price > p { margin: 0 !important; }

/* Qualified with .me-price because these are paragraphs now, and
   ".me-card__body p" — which sets the small size — was beating them on
   specificity. */
.me-price .me-price__amount {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	color: var(--wp--preset--color--ember);
	letter-spacing: -.02em;
}

.me-price .me-price__label {
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 700;
}

/* ---------- About us ---------- */

.me-section--about { padding-block: clamp(2.5rem, 5vw, 3.5rem); }

.me-about {
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
	background: #fff;
	border-radius: 20px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--me-ring), var(--me-shadow-sm);
}

.me-about__badge {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 132px;
	border-radius: 50%;
	background: var(--wp--preset--color--ember-soft);
	border: 2px solid var(--wp--preset--color--ember);
	text-align: center;
}

.me-about__years {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--ember);
	letter-spacing: -.03em;
}

.me-about__yearsLabel {
	margin-top: .35rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--wp--preset--color--muted);
}

.me-about__body > :last-child { margin-bottom: 0; }
.me-lead { font-size: var(--wp--preset--font-size--lg); }
.me-about__body p:not(.me-lead) { color: var(--wp--preset--color--muted); }

@media (max-width: 620px) {
	.me-about { flex-direction: column; text-align: center; }
}

/* ---------- Maintenance warning signs ---------- */

.me-sign {
	background: #fff;
	border-radius: 16px;
	padding: 1.5rem 1.4rem;
	box-shadow: var(--me-ring);
	border-top: 3px solid var(--wp--preset--color--ember);
	transition: transform .18s, box-shadow .18s;
}

.me-sign:hover { transform: translateY(-2px); box-shadow: var(--me-ring), var(--me-shadow-sm); }

.me-sign h3 {
	font-size: var(--wp--preset--font-size--base);
	margin: 0 0 .5rem;
}

.me-sign p {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

.me-closing {
	margin-top: 2rem;
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 600;
	max-width: 780px;
}

/* ---------- Notes / callouts ---------- */

.me-note {
	margin-top: 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 12px;
	font-size: var(--wp--preset--font-size--sm);
	border-left: 3px solid var(--wp--preset--color--ember);
	background: var(--wp--preset--color--ember-soft);
}

/* The note text now lives inside an editable paragraph. */
.me-note > p { margin: 0 !important; font-size: inherit; }

/* Equal-height columns with the note anchored to the bottom, so two-column
   callouts line up with each other instead of floating at different heights. */
.me-col { display: flex; flex-direction: column; height: 100%; }
.me-col > .me-note { margin-top: auto; }
.me-col > h3 { margin-bottom: 1.25rem; }
.me-col p { color: var(--wp--preset--color--muted); }

.me-note--dark {
	background: rgba(255,255,255,.06);
	border-left-color: var(--wp--preset--color--whatsapp);
	color: rgba(255,255,255,.85);
}

.me-note--warn { border-left-color: #C92A2A; background: #FFF5F5; }

/* ---------- Availability banner ---------- */

/* This used to be a soft green .me-note at the foot of the right-hand column,
   where it read as a footnote to that column rather than as information about
   the shop. The client asked for it to be impossible to miss, so it is now a
   full-width panel under both columns — the only dark surface in a light
   section — with the WhatsApp action it asks for attached to it.

   Grid areas rather than flex: the icon spans both text rows, and the CTA has
   to stay vertically centred against a text block of unknown height. */
.me-availability {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
		"icon title cta"
		"icon text  cta";
	align-items: center;
	column-gap: 1.5rem;
	/* The title/text gap has to come from the grid: the margin reset below
	   zeroes any margin the heading could carry. */
	row-gap: .3rem;
	padding: 1.5rem 1.75rem;
	border-radius: 18px;
	background: var(--wp--preset--color--charcoal);
	box-shadow: var(--me-shadow-md);
	/* Constrained layout gives this group a block-gap margin-block-start; the
	   separation from the columns above is set here instead. */
	margin-block: 2.5rem 0 !important;
}

/* Same block-gap margin, on the grid items — it would push them out of their
   areas. See .me-grid > *. */
.me-availability > * { margin-block: 0 !important; }

/* Drawn in CSS so the heading and the sentence can stay editable blocks: an
   inline <svg> here would mean another raw-HTML box in the editor. */
.me-availability::before {
	content: "";
	grid-area: icon;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--whatsapp)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306331A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")
		center / 24px 24px no-repeat;
}

.me-availability h3 {
	grid-area: title;
	color: #fff;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -.01em;
}

.me-availability p {
	grid-area: text;
	color: rgba(255,255,255,.78);
	font-size: var(--wp--preset--font-size--sm);
	max-width: 52ch;
}

.me-availability__cta { grid-area: cta; }

/* Below this the three columns cannot hold a readable line length. */
@media (max-width: 760px) {
	.me-availability {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"icon title"
			"text text"
			"cta  cta";
		row-gap: .9rem;
		padding: 1.35rem 1.25rem;
	}

	.me-availability p { max-width: none; }
	.me-availability__cta .me-btn { width: 100%; }
}

.me-fineprint {
	margin-top: 1.75rem;
	font-size: var(--wp--preset--font-size--sm);
	color: rgba(255,255,255,.6);
	max-width: 820px;
}

/* ---------- Pricing, inside the dark section ----------

   These were three equal cards in a row, which read as three services to
   choose between. They are not: Mantenimiento base IS the service, and the
   two vaporiser figures are parts added on top of it after diagnosis. The
   layout has to carry that before anyone reads a word, so the base stands
   alone in a wide ember card and the two extras sit underneath it — dimmer,
   indented, behind a label that names the relationship, with amounts written
   as "+ $x". Nobody can read them as alternatives to the base.

   Both margins here are !important: these are group blocks, and WordPress's
   block-gap adds a margin of its own from the second child onwards. */
.me-pricing {
    display: grid;
    gap: 1.25rem;
    margin-top: 2rem;
}

.me-pricing > * {
    margin-block: 0 !important;
}

/* Main pricing card */
.me-pricing__main {
    background: rgba(255,255,255,.04);
    border-radius: 16px;
    padding: 1.75rem 2rem;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.me-pricing__main:hover {
    transform: translateY(-2px);
    border-color: rgba(232,89,12,.75);
    box-shadow: 0 12px 36px rgba(0,0,0,.28);
}

.me-pricing__tag {
    display: inline-flex;
    align-items: center;
    width: fit-content;

    margin: 0 0 1rem !important;
    padding: .4rem .85rem;

    border-radius: 999px;

    background: rgba(232,89,12,.12);
    border: 1px solid rgba(232,89,12,.25);

    color: var(--wp--preset--color--ember);

    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Service title */
.me-pricing__main h4 {
    margin: 0 !important;
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

/* Price */
.me-pricing .me-pricing__amount {
    margin: .5rem 0 0 !important;

    font-size: clamp(2.6rem, 5vw, 3.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;

    color: #6EE7B7;
}

/* Description */
.me-pricing__lead {
    margin: 1rem 0 0 !important;
    max-width: 52ch;

    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.65;

    color: rgba(255,255,255,.72);
}

/* Optional services */
.me-pricing__extras {
    margin-left: 1.25rem !important;
    padding-left: 1.5rem;
    border-left: 2px solid rgba(255, 255, 255, .18);
}

.me-pricing__extras > * {
    margin-block: 0 !important;
}

.me-pricing__extrasLabel {
    margin: 0 0 .9rem !important;
    font-size: var(--wp--preset--font-size--xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.6);
}

.me-extra {
    background: rgba(255,255,255,.025);
    border: 1px dashed rgba(255,255,255,.20);
    border-radius: 12px;
    padding: 1.1rem 1.25rem;
    transition: border-color .2s ease, background .2s ease;
}

.me-extra:hover {
    border-color: rgba(232,89,12,.45);
    background: rgba(255,255,255,.04);
}

.me-extra h4 {
    margin: 0 !important;
    font-size: var(--wp--preset--font-size--base);
    font-weight: 700;
    color: rgba(255,255,255,.92);
}

.me-pricing .me-extra__amount {
    margin: .45rem 0 0 !important;
    font-size: var(--wp--preset--font-size--xl);
    font-weight: 800;
    letter-spacing: -.02em;
    color: rgba(255,255,255,.9);
}

/* ---------- Checklist ---------- */

.me-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.me-checks li { position: relative; padding-left: 2rem; font-size: var(--wp--preset--font-size--sm); }

/* WhatsApp green with a dark green tick: the same colour pair as the WhatsApp
   button, and with enough contrast (white on #25D366 does not have it). */
.me-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .15em;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--wp--preset--color--whatsapp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2306331A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- Symptoms / warnings ---------- */

.me-symptom {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12);
	border-left: 3px solid var(--wp--preset--color--ember);
	border-radius: 12px;
	padding: 1.25rem 1.4rem;
	transition: transform .18s, background-color .18s, border-color .18s;
}

.me-symptom:hover {
	transform: translateY(-2px);
	background: rgba(255,255,255,.07);
	border-color: rgba(255,255,255,.2);
	border-left-color: var(--wp--preset--color--ember);
}

/* !important because these cards are group blocks now, and WordPress's
   block-gap separates their children with a margin of its own. */
.me-symptom h4 { margin: 0 0 .4rem !important; font-size: var(--wp--preset--font-size--base); color: #fff; font-weight: 700; }
.me-symptom p { margin: 0 !important; font-size: var(--wp--preset--font-size--sm); color: rgba(255,255,255,.72); }

/* The brand/model card grid (.me-brands, .me-brand*) lived here. The client
   removed that section on 2026-08-07; the styles went with it. */

/* ---------- Contact ---------- */

.me-contact { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.me-contact__item { display: flex; gap: 1rem; align-items: flex-start; }
.me-contact__item svg { width: 22px; height: 22px; flex: none; color: var(--wp--preset--color--ember); margin-top: .2rem; }
.me-contact__item h4 { margin: 0 0 .25rem; font-size: var(--wp--preset--font-size--sm); text-transform: uppercase; letter-spacing: .06em; }
.me-contact__item p { margin: 0; font-size: var(--wp--preset--font-size--sm); color: rgba(255,255,255,.75); }
.me-contact__item a { color: #fff; }

/* The phone number and e-mail used to be <br>-separated inline links. Padding
   on an inline element does not push the neighbouring lines apart, so growing
   them to a 44px touch target made them overlap each other — a tap near the
   boundary would open the wrong one. A flex column makes them block-level, so
   the padding takes part in layout and the targets stack cleanly. */
.me-contact__stack { display: flex; flex-direction: column; align-items: flex-start; }
.me-contact__stack em { margin-top: .35rem; }

/* ---------- Recognisable links ----------
   Without an underline, a light link on a dark background does not read as a
   link. .me-link makes it explicit that it can be clicked. */

.me-link {
	cursor: pointer;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .35);
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
	transition: color .15s, text-decoration-color .15s;
}

.me-link:hover,
.me-link:focus-visible {
	color: var(--wp--preset--color--ember) !important;
	text-decoration-color: currentColor;
}

.me-link svg {
	width: 13px;
	height: 13px;
	margin-left: .35rem;
	vertical-align: -1px;
	opacity: .7;
}

.me-link:hover svg { opacity: 1; }

/* The full address is a link to the map, same as on the current site. */
.me-link--map {
	display: inline-block;
	text-decoration: none;
	line-height: 1.7;
}

.me-link--map:hover { text-decoration: none; }

.me-link__hint {
	display: inline-flex;
	align-items: center;
	margin-top: .5rem;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ember);
	white-space: nowrap;
}

.me-link--map:hover .me-link__hint { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mobile sticky bar ---------- */

.me-sticky {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 60;
	display: none;
	padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
	background: rgba(250,247,244,.95);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--wp--preset--color--line);
}

.me-sticky .me-btn { width: 100%; }

@media (max-width: 860px) {
	.me-sticky { display: block; }
	body { padding-bottom: 84px; }
}

/* ---------- Touch targets ----------

   Nearly all of this site's traffic is phones. The footer's phone number,
   e-mail and map link were 19–21px tall — a text line's height, well under
   the 44px a fingertip needs, and they are the last thing a visitor reaches
   for. Padding rather than min-height: the target has to grow around the
   text, not leave it stranded at the top of a taller box.

   Scoped to touch-ish widths so the footer's desktop rhythm is untouched. */
@media (max-width: 860px) {
	.me-contact__stack a { padding-block: .65rem; }
	.me-footer__bottom .me-link { display: inline-block; padding-block: .75rem; }
}

/* ---------- Cookie notice ---------- */

.me-consent {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	/* Above the sticky WhatsApp bar (z-index 60). */
	z-index: 70;
	max-width: 560px;
	margin-inline: auto;
	padding: 1.5rem;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 40px rgba(20, 17, 15, .22);
	border: 1px solid var(--wp--preset--color--line);
}

.me-consent[hidden] { display: none; }

.me-consent__text {
	margin: 0 0 1.25rem;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
	line-height: 1.55;
}

.me-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: flex-end;
}

.me-consent .me-btn {
	padding: .8rem 1.4rem;
	font-size: var(--wp--preset--font-size--sm);
}

@media (max-width: 860px) {
	/* The sticky WhatsApp bar occupies the bottom; the notice sits above it. */
	.me-consent { bottom: 84px; }
}

@media (max-width: 480px) {
	.me-consent__actions { flex-direction: column-reverse; }
	.me-consent .me-btn { width: 100%; }
}

/* ---------- Footer ---------- */

.me-footer { background: var(--wp--preset--color--charcoal); color: rgba(255,255,255,.62); padding-block: 3rem 2rem; font-size: var(--wp--preset--font-size--sm); }
.me-footer a { color: rgba(255,255,255,.85); }
.me-footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: var(--wp--preset--font-size--xs); }

/* ---------- Motion ----------

   Every hidden starting state in this section is scoped to .me-motion, which
   only exists when JavaScript is running AND the visitor has not asked for
   reduced motion — see the inline snippet in functions.php. Without that
   class none of these rules match, and the page is exactly what it was
   before this section existed. That is the safety property that matters: a
   blocked script, an old browser or a reduced-motion setting can cost the
   animation, but never the content.

   The reduced-motion block at the end of this file is a second line of
   defence rather than the only one — it neutralises durations, but an
   element left at opacity:0 with a .01ms transition is still invisible. */

.me-motion [data-me-reveal] {
	opacity: 0;
	transform: translateY(18px);
}

/* The transition lives on the revealed state, not the hidden one, so it
   describes the way in and cannot fire on the initial paint. */
.me-motion [data-me-reveal].is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--me-ease), transform .6s var(--me-ease);
	transition-delay: var(--me-reveal-delay, 0ms);
}

/* Hero: on load rather than on scroll — it is already in view. */
.me-motion .me-hero__inner > * { animation: me-rise .7s var(--me-ease) both; }
.me-motion .me-hero__inner > *:nth-child(1) { animation-delay: .05s; }
.me-motion .me-hero__inner > *:nth-child(2) { animation-delay: .12s; }
.me-motion .me-hero__inner > *:nth-child(3) { animation-delay: .19s; }
.me-motion .me-hero__inner > *:nth-child(4) { animation-delay: .26s; }
.me-motion .me-hero__inner > *:nth-child(5) { animation-delay: .33s; }

/* Transform only, never opacity: this photo is the LCP element on most
   visits, and fading it in would push the measured paint later for the sake
   of an effect nobody asked for. .me-hero has overflow:clip, so the
   oversized start frame cannot spill. */
.me-motion .me-hero__media img { animation: me-heroSettle 1.8s var(--me-ease) both; }

/* The badge lands after the card it sits in, with a slight overshoot — the
   one place on the page where a bounce is in keeping. */
.me-motion .me-about[data-me-reveal] .me-about__badge { opacity: 0; transform: scale(.86); }
.me-motion .me-about[data-me-reveal].is-revealed .me-about__badge {
	animation: me-pop .55s var(--me-ease-back) .2s forwards;
}

/* Ticks draw themselves in after their column arrives. Scoped to a revealing
   ancestor so that a tick can never be left at scale 0 by a list that is not
   a reveal target. */
.me-motion [data-me-reveal] .me-checks li::before { opacity: 0; transform: scale(.4); }
.me-motion [data-me-reveal].is-revealed .me-checks li::before {
	animation: me-pop .45s var(--me-ease-back) forwards;
	/* --me-reveal-delay inherits from the ancestor that carries the reveal, so
	   a tick waits for its own column rather than for the first one. */
	animation-delay: calc(var(--me-reveal-delay, 0ms) + 260ms + var(--me-tick-index, 0) * 90ms);
}

.me-checks li:nth-child(1) { --me-tick-index: 0; }
.me-checks li:nth-child(2) { --me-tick-index: 1; }
.me-checks li:nth-child(3) { --me-tick-index: 2; }
.me-checks li:nth-child(4) { --me-tick-index: 3; }
.me-checks li:nth-child(5) { --me-tick-index: 4; }
.me-checks li:nth-child(6) { --me-tick-index: 5; }

/* Two rings and stop. The banner is meant to catch the eye once, on arrival;
   anything that keeps pulsing turns into an advert the visitor learns to
   ignore, which is the opposite of what it is for. */
.me-motion .me-availability.is-revealed::before {
	animation: me-ring 2.2s ease-out .5s 2;
}

/* The bar slides up once the page has settled, so it reads as arriving rather
   than as having always been in the way. */
.me-motion .me-sticky { animation: me-riseBar .45s var(--me-ease) .7s both; }

@keyframes me-rise {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: none; }
}

@keyframes me-heroSettle {
	from { transform: scale(1.06); }
	to   { transform: none; }
}

@keyframes me-pop {
	from { opacity: 0; transform: scale(.4); }
	to   { opacity: 1; transform: none; }
}

@keyframes me-ring {
	0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
	70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
	100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes me-riseBar {
	from { transform: translateY(100%); }
	to   { transform: none; }
}

/* Nothing on a sheet of paper scrolls into view. motion.js also drops the
   class on beforeprint, for the browsers that ignore this. */
@media print {
	.me-motion [data-me-reveal] { opacity: 1 !important; transform: none !important; }
	.me-motion *, .me-motion *::before { animation: none !important; }
}

/* ---------- Accessibility ---------- */

:focus-visible { outline: 3px solid var(--wp--preset--color--ember); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}