/*
Theme Name: Fluomark
Theme URI: https://fluomark.com
Author: Fluomark
Description: Tema a medida de Fluomark, agencia de IA y automatización para pymes. Papel, tinta y bolígrafo azul.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: hecho
*/

/* ---------- Fuentes (alojadas en el propio servidor) ---------- */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 800; font-style: normal; font-display: swap; src: url("assets/fonts/schibsted-grotesk-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Kalam"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/kalam-latin-400-normal.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
	--paper: #F2F4F0;
	--sheet: #FFFFFF;
	--ink: #1B2440;
	--ink-soft: #3A4358;
	--pen: #2743D3;
	--pen-dark: #1C33A8;
	--pen-light: #9AACFF;
	--pen-tint: #E3E8FF;
	--fluor: #EFE05A;
	--grey: #667085;
	--line: #D6DBD3;
	--on-ink: #C6CCDA;
	--hand: "Kalam", "Comic Neue", cursive;
	--sans: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--radius: 6px;
	--shadow-paper: 0 1px 0 rgba(27, 36, 64, .06), 0 18px 32px -22px rgba(27, 36, 64, .35);
	--space: clamp(64px, 9vw, 112px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 1.125rem;
	line-height: 1.6;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--pen); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--pen-dark); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.025em; line-height: 1.1; margin: 0 0 .5em; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; }
.muted { color: var(--grey); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; border-radius: var(--radius); }
.skip:focus { left: 16px; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wrap--text { max-width: 808px; }

/* ---------- Botones y enlaces ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	background: var(--pen); color: #fff; font: 700 1.0625rem/1.2 var(--sans);
	padding: 15px 24px; border: 0; border-radius: var(--radius); text-decoration: none; cursor: pointer;
	transition: background-color .15s ease;
}
.btn:hover { background: var(--pen-dark); color: #fff; }
.btn--light { background: var(--sheet); color: var(--ink); }
.btn--light:hover { background: var(--fluor); color: var(--ink); }
.btn--small { padding: 10px 16px; font-size: .9375rem; }
.link-strong { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--pen); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.link-strong:hover { color: var(--pen); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: flex-end; gap: 2px; color: var(--ink); text-decoration: none; }
.logo__word { font-weight: 800; font-size: 1.75rem; letter-spacing: -.045em; line-height: 1; }
.logo__check { width: 30px; color: var(--pen); margin-bottom: 7px; margin-left: -1px; }
.logo:hover { color: var(--ink); }
.logo--light { color: #fff; }
.logo--light .logo__check { color: var(--pen-light); }
.logo--light:hover { color: #fff; }

/* ---------- Cabecera ---------- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: relative; z-index: 20; }
.site-header__in { display: flex; align-items: center; gap: 32px; min-height: 76px; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav__list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; }
.nav__item > a, .nav__toggle {
	display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px;
	font: 500 1rem/1 var(--sans); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: var(--radius);
}
.nav__item > a:hover, .nav__toggle:hover { color: var(--pen); }
.nav__item.is-current > a, .nav__item.is-current > .nav__toggle { color: var(--pen); }
.nav__toggle svg { width: 11px; transition: transform .15s ease; }
.nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__sub {
	list-style: none; margin: 0; padding: 10px; position: absolute; left: 0; top: calc(100% + 6px); min-width: 290px;
	background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-paper); display: none;
}
.nav__sub a { display: block; padding: 9px 12px; color: var(--ink); text-decoration: none; font-size: 1rem; border-radius: 4px; }
.nav__sub a:hover { background: var(--paper); color: var(--pen); }
.nav__toggle[aria-expanded="true"] + .nav__sub { display: block; }
.menu-btn { display: none; }

@media (min-width: 1000px) {
	.nav__item.has-sub:hover > .nav__sub, .nav__item.has-sub:focus-within > .nav__sub { display: block; }
	.nav__item.has-sub::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}
@media (max-width: 999px) {
	.menu-btn {
		display: inline-flex; align-items: center; gap: 10px; margin-left: auto; background: none; border: 1.5px solid var(--ink);
		border-radius: var(--radius); padding: 9px 14px; font: 700 .9375rem/1 var(--sans); color: var(--ink); cursor: pointer;
	}
	.menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
	.menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
	.menu-btn__bars::before { top: -6px; } .menu-btn__bars::after { top: 6px; }
	.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 8px 24px 28px; gap: 16px; }
	.nav.is-open { display: flex; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__item > a, .nav__toggle { width: 100%; justify-content: space-between; padding: 16px 0; font-size: 1.125rem; border-bottom: 1px solid var(--line); border-radius: 0; }
	.nav__sub { position: static; box-shadow: none; border: 0; background: transparent; padding: 4px 0 12px 12px; min-width: 0; }
	.nav__cta { align-self: flex-start; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 7vw, 88px) 0 var(--space); }
.hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.hero__title { margin: 0 0 28px; }
.hero__kw { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; max-width: 30ch; margin-bottom: 18px; color: var(--ink-soft); }
.hero__big { display: block; font-size: clamp(3.25rem, 7.6vw, 6.25rem); line-height: .94; letter-spacing: -.045em; }
.hero__lead { font-size: 1.3125rem; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; margin-bottom: 32px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.hero__fine { margin: 24px 0 0; font-size: .9375rem; color: var(--grey); }

.paper {
	background:
		linear-gradient(to bottom, transparent 0 71px, rgba(39, 67, 211, .14) 71px 72px, transparent 72px) top / 100% 100% no-repeat,
		repeating-linear-gradient(to bottom, transparent 0 43px, rgba(39, 67, 211, .12) 43px 44px) 0 72px / 100% calc(100% - 72px) no-repeat,
		var(--sheet);
	padding: 22px 34px 26px 40px; border-radius: 3px; box-shadow: var(--shadow-paper);
	transform: rotate(-1.4deg); max-width: 470px; margin-left: auto;
	position: relative;
}
.paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: 24px; width: 1px; background: rgba(214, 64, 64, .28); }
.paper__day { font-family: var(--hand); color: var(--pen); font-size: 1.5rem; line-height: 1; margin: 6px 0 22px; height: 44px; display: flex; align-items: center; }
.paper__list { list-style: none; margin: 0; padding: 0; }
.paper__list li { position: relative; width: fit-content; max-width: 100%; font-family: var(--hand); font-size: 1.3125rem; line-height: 44px; color: var(--ink); white-space: nowrap; }
.paper__task { display: inline-block; }
.paper__strike { position: absolute; left: -6px; width: calc(100% + 12px); height: 14px; top: 13px; overflow: visible; }
.paper__strike path { fill: none; stroke: var(--pen); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 320; stroke-dashoffset: 320; animation: strike .5s cubic-bezier(.6, .1, .3, 1) forwards; animation-delay: calc(700ms + var(--i) * 420ms); }
.paper__keep .paper__task { background: linear-gradient(transparent 52%, var(--fluor) 52% 88%, transparent 88%); padding: 0 2px; }
.paper__note { font-family: var(--hand); color: var(--pen); font-size: 1.1875rem; line-height: 1.3; margin: 18px 0 0; transform: rotate(-1.5deg); max-width: 24ch; }
@keyframes strike { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
	.paper__strike path { animation: none; stroke-dashoffset: 0; }
	* { scroll-behavior: auto !important; }
}

/* ---------- Secciones ---------- */
.section { padding: var(--space) 0; }
.section--tight { padding: 0 0 var(--space); }
.section__head { max-width: 740px; margin-bottom: 44px; }
.section__head h2, .section h2 { font-size: clamp(2rem, 4.2vw, 2.875rem); }
.section__head p { font-size: 1.1875rem; color: var(--ink-soft); }

/* Servicios */
.services { border-top: 1px solid var(--line); }
.svc-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.svc { border-bottom: 1px solid var(--line); }
.svc__link { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.3fr) 150px; gap: 8px 40px; align-items: baseline; padding: 26px 4px; text-decoration: none; color: var(--ink); }
.svc__name { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.svc__desc { color: var(--ink-soft); font-size: 1.0625rem; }
.svc__price { font-weight: 700; color: var(--pen); white-space: nowrap; font-size: 1.0625rem; text-align: right; }
.svc__link:hover .svc__name { color: var(--pen); }
.svc__link:hover { color: var(--ink); }

/* Demo de chat */
.chat-demo { background: var(--ink); color: #fff; }
.chat-demo__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(40px, 7vw, 104px); align-items: center; }
.chat-demo h2 { color: #fff; }
.chat-demo p { color: var(--on-ink); font-size: 1.1875rem; }
.chat-demo a.link-strong { color: #fff; text-decoration-color: var(--pen-light); }
.chat-demo .ticks li { color: #fff; }
.chat-demo .ticks li::before { background-color: var(--pen-light); }
.phone { margin: 0; background: #0F1629; border-radius: 30px; padding: 12px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.phone__bar { display: flex; align-items: center; gap: 12px; background: #1E2A4A; color: #fff; padding: 12px 16px; border-radius: 20px 20px 0 0; font-size: .9375rem; line-height: 1.25; }
.phone__bar small { display: block; color: var(--on-ink); font-size: .8125rem; }
.phone__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--fluor); color: var(--ink); display: grid; place-items: center; font-weight: 800; flex: none; }
.phone__chat { background: #E8ECE5; padding: 18px 14px 22px; border-radius: 0 0 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.phone .msg { margin: 0; max-width: 84%; padding: 9px 12px 20px; border-radius: 12px; font-size: .9375rem; line-height: 1.45; color: var(--ink); position: relative; }
.msg time { position: absolute; right: 10px; bottom: 4px; font-size: .6875rem; color: var(--grey); }
.msg--in { background: #fff; align-self: flex-start; border-top-left-radius: 4px; }
.msg--out { background: #DCE6FF; align-self: flex-end; border-top-right-radius: 4px; }
.phone figcaption { color: var(--on-ink); font-size: .8125rem; text-align: center; padding: 10px 0 2px; }

/* Lista con checks */
.ticks { list-style: none; padding: 0; margin: 0 0 1.5em; }
.ticks li { position: relative; padding-left: 34px; margin-bottom: 10px; }
.ticks li::before {
	content: ""; position: absolute; left: 0; top: .32em; width: 20px; height: 16px; background-color: var(--pen);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath d='M3 14.5c3.2 2.1 5.6 4.6 7.6 8.3C15.4 13.6 22.6 6.4 31 2.6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%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 34 26'%3E%3Cpath d='M3 14.5c3.2 2.1 5.6 4.6 7.6 8.3C15.4 13.6 22.6 6.4 31 2.6' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Proceso */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.steps li { padding: 28px 28px 8px 0; position: relative; }
.steps li + li { padding-left: 28px; border-left: 1px solid var(--line); }
.steps__n { display: block; font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--pen); letter-spacing: -.05em; margin-bottom: 18px; }
.steps h3 { font-size: 1.375rem; margin-bottom: 10px; }
.steps p { color: var(--ink-soft); font-size: 1.0625rem; }
.steps__time { font-family: var(--hand); color: var(--pen); font-size: 1.1875rem; }

/* Sectores */
.sectors { background: var(--sheet); }
.sectors__in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.sectors__img { margin: 0; }
.sectors__img img { border-radius: 4px; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sector-links { list-style: none; padding: 0; margin: 28px 0; border-top: 2px solid var(--ink); }
.sector-links li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.sector-links a { font-size: 1.375rem; font-weight: 700; color: var(--ink); text-decoration: none; letter-spacing: -.015em; }
.sector-links a:hover { color: var(--pen); }
.sector-links span { color: var(--grey); font-size: 1rem; text-align: right; }

/* Garantías */
.guarantees { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 36px 48px; }
.guarantees li { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: start; }
.guarantees svg { width: 34px; color: var(--pen); margin-top: 4px; }
.guarantees strong { display: block; font-size: 1.1875rem; letter-spacing: -.01em; margin-bottom: 4px; }
.guarantees span { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.55; }
.guarantees-section { border-top: 1px solid var(--line); }

/* Precios */
.prices { margin: 8px 0 32px; overflow-x: auto; }
.prices__table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 1.0625rem; }
.prices__table thead th { text-align: left; font-size: .875rem; font-weight: 500; color: var(--grey); padding: 0 16px 12px 0; border-bottom: 2px solid var(--ink); }
.prices__table tbody th, .prices__table td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.prices__table tbody th { font-weight: 700; }
.prices__table tbody th a { color: var(--ink); text-decoration: none; }
.prices__table tbody th a:hover { color: var(--pen); text-decoration: underline; }
.prices__from { font-weight: 700; white-space: nowrap; }
.prices__unit { font-weight: 400; color: var(--grey); font-size: .9375rem; }
.prices__note { font-size: .9375rem; color: var(--grey); margin-top: 16px; }
.pricing { background: var(--sheet); }

/* FAQ */
.faq-section h2 { margin-bottom: 28px; }
.faq-section .faq { max-width: 808px; }
.wp-block-details { border-bottom: 1px solid var(--line); padding: 0; margin: 0; }
.wp-block-details:first-of-type { border-top: 2px solid var(--ink); }
.wp-block-details summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 1.1875rem; line-height: 1.35; padding: 22px 44px 22px 0; position: relative; letter-spacing: -.01em; }
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: linear-gradient(var(--pen), var(--pen)) center / 14px 2px no-repeat, linear-gradient(var(--pen), var(--pen)) center / 2px 14px no-repeat; transition: transform .15s ease; }
.wp-block-details[open] summary::after { background: linear-gradient(var(--pen), var(--pen)) center / 14px 2px no-repeat; }
.wp-block-details summary:hover { color: var(--pen); }
.wp-block-details > *:not(summary) { color: var(--ink-soft); margin: 0 0 22px; max-width: 68ch; }

/* CTA */
.cta { background: var(--ink); color: #fff; border-radius: 8px; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px 56px; align-items: center; margin: 56px 0 0; position: relative; overflow: hidden; }
.cta::after { content: ""; position: absolute; right: -40px; top: -60px; width: 220px; height: 220px; border: 2px solid rgba(154, 172, 255, .25); border-radius: 50%; }
.cta__title { font-size: clamp(1.75rem, 3.4vw, 2.375rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: #fff; margin-bottom: 12px; }
.cta p { color: var(--on-ink); max-width: 56ch; }
.cta__text p:last-child { margin-bottom: 0; }
.cta__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; position: relative; z-index: 1; }
.cta__alt { color: #fff; font-weight: 700; text-decoration-color: var(--pen-light); }
.cta__alt:hover { color: var(--pen-light); }
.section .cta { margin-top: 0; }

/* ---------- Páginas interiores ---------- */
.page-head { padding: 40px 0 clamp(40px, 6vw, 72px); }
.page-head__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; }
.page-head--image .page-head__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; }
.page-head--image h1 { font-size: clamp(2.25rem, 4.4vw, 3.25rem); }
.page-head h1 { font-size: clamp(2.375rem, 5.2vw, 3.75rem); letter-spacing: -.035em; line-height: 1.03; max-width: 20ch; margin-bottom: 22px; }
.page-head__lead { font-size: 1.3125rem; line-height: 1.55; color: var(--ink-soft); max-width: 58ch; }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 30px; }
.page-head__price { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.page-head__price strong { font-size: 1.25rem; }
.page-head__price span { display: block; color: var(--grey); font-size: .9375rem; }
.page-head__img { margin: 0; }
.page-head__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.page-head--post h1 { max-width: 24ch; }
.post-meta { color: var(--grey); font-size: .9375rem; margin-top: 18px; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 28px; font-size: .9375rem; color: var(--grey); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumbs a { color: var(--grey); text-decoration: none; }
.crumbs a:hover { color: var(--pen); text-decoration: underline; }

/* Texto largo */
.prose { max-width: 800px; padding-bottom: var(--space); }
.prose > h2 { font-size: clamp(1.75rem, 3.2vw, 2.25rem); margin: 2.4em 0 .55em; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { font-size: 1.375rem; letter-spacing: -.015em; margin: 1.8em 0 .5em; }
.prose > p, .prose > ul, .prose > ol { max-width: 68ch; }
.prose li { margin-bottom: .45em; }
.prose ul:not([class]), .prose ul.wp-block-list { padding-left: 1.2em; }
.prose ul:not([class]) li::marker, .prose ul.wp-block-list li::marker { color: var(--pen); }
.prose ol.wp-block-list li::marker { color: var(--pen); font-weight: 700; }
.prose strong { font-weight: 700; }
.prose .wp-block-table { margin: 1.5em 0 2em; overflow-x: auto; }
.prose .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 520px; }
.prose .wp-block-table th { text-align: left; font-weight: 700; padding: 0 14px 10px 0; border-bottom: 2px solid var(--ink); vertical-align: bottom; }
.prose .wp-block-table td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose .wp-block-table thead { border: 0; }
.prose .faq, .prose .wp-block-details { max-width: 760px; }
.prose > .wp-block-details:first-of-type, .faq .wp-block-details:first-child { border-top: 2px solid var(--ink); }
.updated { color: var(--grey); font-size: .9375rem; margin-top: 56px; }

/* Tarjeta lateral */
.page-body { display: grid; grid-template-columns: minmax(0, 800px) 300px; gap: 72px; justify-content: space-between; align-items: start; }
.sidecard { position: sticky; top: 24px; background: var(--sheet); border: 1px solid var(--line); border-top: 3px solid var(--pen); border-radius: 4px; padding: 24px; margin-bottom: var(--space); }
.sidecard__title { font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; }
.sidecard__price { font-size: 1.625rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 4px; }
.sidecard__price span { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--ink-soft); }
.sidecard__time { color: var(--grey); font-size: .9375rem; margin-bottom: 18px; }
.sidecard .btn { width: 100%; }
.sidecard__list { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); font-size: .9375rem; color: var(--ink-soft); }
.sidecard__list li { margin-bottom: 6px; padding-left: 18px; position: relative; }
.sidecard__list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 2px; background: var(--pen); }

/* Ejemplos */
.examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 1.5em 0 2.2em; }
.example { background: var(--sheet); border: 1px solid var(--line); border-radius: 4px; padding: 22px 22px 18px; display: flex; flex-direction: column; }
.example h3 { font-size: 1.1875rem; letter-spacing: -.01em; margin: 0 0 8px; }
.example p { font-size: 1rem; color: var(--ink-soft); margin: 0 0 12px; }
.example p.example__saving { margin: auto 0 0; font-family: var(--hand); color: var(--pen); font-size: 1.125rem; line-height: 1.3; }

/* Relacionadas */
.related { margin: 64px 0 0; }
.related__head { font-weight: 700; font-size: 1.125rem; margin-bottom: 14px; }
.related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 2px solid var(--ink); }
.related a { display: block; padding: 18px 0; text-decoration: none; color: var(--ink); }
.related__title { display: block; font-weight: 700; font-size: 1.125rem; line-height: 1.3; margin-bottom: 6px; }
.related__text { display: block; color: var(--grey); font-size: .9375rem; line-height: 1.5; }
.related a:hover .related__title { color: var(--pen); }

/* Blog */
.post-list { list-style: none; margin: 0 0 var(--space); padding: 0; border-top: 2px solid var(--ink); max-width: 880px; }
.post-list__item { border-bottom: 1px solid var(--line); }
.post-list__item a { display: block; padding: 30px 0; text-decoration: none; color: var(--ink); }
.post-list__item h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 10px; }
.post-list__item p { color: var(--ink-soft); margin-bottom: 10px; }
.post-list__meta { color: var(--grey); font-size: .9375rem; }
.post-list__item a:hover h2 { color: var(--pen); }

/* ---------- Formulario ---------- */
.form { background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: clamp(24px, 4vw, 40px); max-width: 760px; margin: 1.5em 0 2em; display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field span { font-weight: 700; font-size: .9375rem; }
.field em { font-style: normal; font-weight: 400; color: var(--grey); }
.field input, .field select, .field textarea {
	width: 100%; font: 400 1.0625rem/1.4 var(--sans); color: var(--ink); background: var(--sheet);
	border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--pen); box-shadow: 0 0 0 3px var(--pen-tint); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .9375rem; color: var(--ink-soft); }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--pen); flex: none; }
.form .btn { justify-self: start; }
.form__note { font-size: .875rem; color: var(--grey); margin: 0; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-error { background: #FDECEC; color: #8A1C1C; border-radius: var(--radius); padding: 12px 16px; margin: 0; }
.form-done { background: var(--sheet); border-left: 4px solid var(--pen); padding: 24px 28px; border-radius: 4px; margin: 1.5em 0; }
.form-done__title { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }

/* ---------- Pie ---------- */
.site-footer { background: var(--ink); color: var(--on-ink); padding: 72px 0 32px; font-size: 1rem; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(198, 204, 218, .2); }
.site-footer__brand p { margin: 18px 0; max-width: 34ch; }
.site-footer__title { color: #fff; font-weight: 700; margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a:not(.btn):not(.logo) { color: var(--on-ink); text-decoration: none; }
.site-footer a:not(.btn):not(.logo):hover { color: #fff; text-decoration: underline; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: .875rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom ul { display: flex; gap: 20px; }

/* ---------- Responsive ---------- */
@media (max-width: 999px) {
	.hero__in, .chat-demo__in, .sectors__in, .page-head--image .page-head__in { grid-template-columns: minmax(0, 1fr); }
	.paper { margin: 0 auto; }
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.steps li:nth-child(3) { border-left: 0; padding-left: 0; }
	.site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.site-footer__brand { grid-column: 1 / -1; }
	.cta { grid-template-columns: minmax(0, 1fr); }
	.related ul { grid-template-columns: minmax(0, 1fr); }
	.page-body { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.sidecard { display: none; }
	.phone { max-width: 400px; }
}
@media (max-width: 680px) {
	body { font-size: 1.0625rem; }
	.svc__link { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 22px 0; }
	.svc__price { text-align: left; }
	.svc__name { font-size: 1.3125rem; }
	.steps { grid-template-columns: minmax(0, 1fr); }
	.steps li, .steps li + li { padding: 24px 0 8px; border-left: 0; }
	.steps li + li { border-top: 1px solid var(--line); }
	.examples, .form__row { grid-template-columns: minmax(0, 1fr); }
	.paper { padding: 18px 20px 22px 32px; }
	.paper::before { left: 18px; }
	.paper__list li { font-size: 1.125rem; white-space: normal; }
	.sector-links li { flex-direction: column; gap: 2px; }
	.sector-links span { text-align: left; }
	.site-footer__top { grid-template-columns: minmax(0, 1fr); }
	.hero__lead, .page-head__lead { font-size: 1.1875rem; }
}

/* ---------- Asistente (chat) ---------- */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hchat { position: fixed; right: 20px; bottom: 20px; z-index: 60; font-size: 1rem; }
.hchat__launch { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: var(--ink); color: #fff; font: 700 1rem/1 var(--sans); padding: 14px 20px 14px 16px; border-radius: 999px; box-shadow: 0 14px 30px -14px rgba(27, 36, 64, .7); }
.hchat__launch svg { width: 24px; height: 24px; color: var(--fluor); }
.hchat__launch:hover { background: var(--pen); }
.hchat.is-open .hchat__launch { display: none; }
.hchat__panel { width: min(400px, calc(100vw - 32px)); height: min(620px, calc(100vh - 40px)); height: min(620px, calc(100dvh - 40px)); background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -24px rgba(27, 36, 64, .55); display: flex; flex-direction: column; overflow: hidden; }
.hchat__panel[hidden] { display: none; }
.hchat__head { display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; padding: 14px 12px 14px 16px; }
.hchat__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--fluor); color: var(--ink); display: grid; place-items: center; flex: none; }
.hchat__avatar svg { width: 22px; height: 22px; }
.hchat__who { flex: 1; line-height: 1.25; }
.hchat__who small { display: block; color: var(--on-ink); font-size: .8125rem; }
.hchat__close { background: none; border: 0; color: #fff; width: 40px; height: 40px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.hchat__close svg { width: 22px; height: 22px; }
.hchat__close:hover { background: rgba(255, 255, 255, .1); }
.hchat__log { flex: 1; overflow-y: auto; padding: 18px 14px 8px; display: flex; flex-direction: column; gap: 10px; background: #E8ECE5; overscroll-behavior: contain; }
.hchat__msg { max-width: 88%; padding: 10px 13px; border-radius: 12px; font-size: .96875rem; line-height: 1.45; color: var(--ink); }
.hchat__msg p { margin: 0 0 .45em; }
.hchat__msg p:last-child { margin-bottom: 0; }
.hchat__msg--bot { background: #fff; align-self: flex-start; border-top-left-radius: 4px; }
.hchat__msg--user { background: #DCE6FF; align-self: flex-end; border-top-right-radius: 4px; }
.hchat__links { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 4px; }
.hchat__links a { font-weight: 700; font-size: .9375rem; }
.hchat__typing { display: flex; gap: 5px; padding: 14px 16px; }
.hchat__typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--grey); animation: hchat-dot 1s infinite ease-in-out; }
.hchat__typing span:nth-child(2) { animation-delay: .15s; }
.hchat__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes hchat-dot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hchat__typing span { animation: none; opacity: .6; } }
.hchat__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 4px; background: #E8ECE5; }
.hchat__chips:empty { display: none; }
.hchat__chip { border: 1px solid var(--pen); background: #fff; color: var(--pen); font: 500 .875rem/1.2 var(--sans); padding: 7px 11px; border-radius: 999px; cursor: pointer; text-align: left; }
.hchat__chip:hover { background: var(--pen); color: #fff; }
.hchat__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); background: #fff; }
.hchat__form input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; font: 400 1rem var(--sans); color: var(--ink); background: var(--paper); }
.hchat__form input:focus { outline: 2px solid var(--pen); outline-offset: 0; border-color: var(--pen); }
.hchat__form button { border: 0; background: var(--pen); color: #fff; width: 46px; border-radius: var(--radius); cursor: pointer; display: grid; place-items: center; }
.hchat__form button svg { width: 22px; height: 22px; }
.hchat__fine { margin: 0; padding: 0 14px 10px; background: #fff; color: var(--grey); font-size: .75rem; }
.hchat__fine a { color: var(--grey); }
.hchat__lead { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--pen); border-radius: 10px; padding: 14px; display: grid; gap: 10px; align-self: stretch; }
.hchat__lead-title { font-weight: 800; margin: 0; }
.hchat__lead label { display: grid; gap: 4px; font-size: .875rem; font-weight: 500; }
.hchat__lead input:not([type=checkbox]), .hchat__lead textarea { border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 10px; font: 400 .9375rem var(--sans); color: var(--ink); background: var(--paper); width: 100%; }
.hchat__lead .hchat__check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .8125rem; color: var(--ink-soft); }
.hchat__lead .hchat__check input { margin-top: 3px; }
.hchat__lead .btn { justify-self: start; }
.hchat__hp { position: absolute; left: -9999px; }
.hchat__err { margin: 0; color: #B42318; font-size: .875rem; }
.hchat__err:empty { display: none; }
@media (max-width: 680px) {
	.hchat { right: 12px; bottom: 12px; }
	.hchat__launch span { display: none; }
	.hchat__launch { padding: 14px; }
	.hchat.is-open { left: 0; right: 0; bottom: 0; top: 0; }
	.hchat__panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
}

/* ---------- Visual 1.1 ---------- */

/* Servicios con miniatura */
.svc__link { grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.25fr) 150px; align-items: center; padding: 18px 4px; }
.svc__img { display: block; width: 112px; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: var(--line); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.svc__link:hover .svc__img img { transform: scale(1.06); }

/* Nota escrita a mano sobre una foto */
.page-head__img, .band__img { position: relative; }
.hand-note { position: absolute; left: -18px; bottom: -22px; display: flex; align-items: flex-end; gap: 4px; background: var(--sheet); color: var(--pen); font-family: var(--hand); font-size: 1.1875rem; line-height: 1.25; padding: 10px 16px 10px 12px; max-width: 78%; box-shadow: var(--shadow-paper); transform: rotate(-2deg); border-radius: 2px; }
.hand-note::before { content: ""; position: absolute; left: 50%; top: -9px; width: 64px; height: 18px; margin-left: -32px; background: rgba(239, 224, 90, .75); transform: rotate(3deg); }
.hand-note__arrow { width: 46px; height: 24px; flex: none; transform: scaleY(-1) rotate(-12deg); margin-bottom: 6px; order: 2; }
.page-head__img img, .band__img img { box-shadow: 0 24px 44px -30px rgba(27, 36, 64, .55); }

/* Así funciona */
.flow { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0; }
.flow__title { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 32px; }
.flow__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.flow__step { position: relative; }
.flow__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--pen-tint); color: var(--pen); margin-bottom: 18px; }
.flow__step:last-child .flow__icon { background: var(--fluor); color: var(--ink); }
.flow__icon .icon { width: 30px; height: 30px; }
.flow__step h3 { font-size: 1.25rem; margin-bottom: 6px; }
.flow__step p { color: var(--ink-soft); font-size: 1.0625rem; margin: 0; max-width: 26ch; }
.flow__arrow { position: absolute; top: 14px; right: -44px; width: 56px; height: 28px; color: var(--pen); }

/* Demo por servicio (banda oscura) */
.demo { background: var(--ink); color: #fff; padding: clamp(64px, 8vw, 104px) 0; }
.demo__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: clamp(40px, 7vw, 104px); align-items: center; }
.demo__in--wide { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.demo h2 { color: #fff; font-size: clamp(2rem, 4vw, 2.75rem); }
.demo p { color: var(--on-ink); font-size: 1.1875rem; }
.demo .ticks li { color: #fff; }
.demo .ticks li::before { background-color: var(--pen-light); }
.demo figcaption, .demo .phone figcaption { color: var(--on-ink); font-size: .8125rem; text-align: center; padding: 10px 0 2px; grid-column: 1 / -1; }
.chat-demo__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Llamada */
.call { margin: 0; background: #0F1629; border-radius: 22px; padding: 14px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.call__top { background: #1E2A4A; border-radius: 14px; padding: 16px 18px 12px; display: grid; gap: 2px; }
.call__status { color: #7EE2A8; font-size: .8125rem; font-weight: 700; }
.call__top strong { font-size: 1.125rem; }
.call__wave { width: 100%; height: 36px; margin-top: 8px; fill: var(--pen-light); }
.call__lines { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.call__lines li { background: #fff; color: var(--ink); border-radius: 10px; padding: 9px 12px; font-size: .9375rem; line-height: 1.45; }
.call__lines li.is-agent { background: #DCE6FF; }
.call__lines b { display: block; font-size: .75rem; color: var(--grey); font-weight: 700; }
.call__summary { margin-top: 12px; background: var(--fluor); color: var(--ink); border-radius: 10px; padding: 10px 12px; transform: rotate(-1deg); }
.call__summary-title { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .875rem; }
.call__summary-title .icon { width: 18px; height: 18px; }
.call__summary p { margin: 2px 0 0; color: var(--ink); font-size: .9375rem; }

/* Navegador con chat */
.browser { margin: 0; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.browser__bar { display: flex; align-items: center; gap: 6px; background: #DDE2D9; padding: 10px 12px; }
.browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: #B7BEB3; }
.browser__bar i { font-style: normal; font-size: .75rem; color: var(--grey); background: #fff; border-radius: 6px; padding: 3px 10px; margin-left: 10px; flex: 1; }
.browser__page { position: relative; height: 330px; background: var(--paper); }
.browser__hero { padding: 26px 22px; display: grid; gap: 10px; }
.browser__hero b { display: block; height: 12px; border-radius: 6px; background: #DDE2D9; width: 70%; }
.browser__hero b:first-child { height: 22px; width: 55%; background: #C9D0C5; }
.browser__hero b:last-child { width: 40%; }
.browser__chat { position: absolute; right: 14px; bottom: 14px; width: 78%; background: #E8ECE5; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 16px 30px -18px rgba(27, 36, 64, .6); border-top: 34px solid var(--ink); }
.browser .msg { margin: 0; max-width: 90%; padding: 8px 11px; border-radius: 10px; font-size: .875rem; line-height: 1.4; color: var(--ink); }
.browser figcaption { color: var(--grey); }
.demo .browser figcaption { background: var(--ink); color: var(--on-ink); }

/* Factura → hoja */
.invoice { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.1fr); align-items: center; gap: 8px; }
.invoice__doc { background: #fff; color: var(--ink); border-radius: 4px; padding: 18px; transform: rotate(-1.5deg); box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .7); }
.invoice__h { font-weight: 800; color: var(--ink) !important; font-size: 1rem !important; margin-bottom: 10px; }
.invoice dl { margin: 0; display: grid; gap: 6px; font-size: .875rem; }
.invoice dl div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.invoice dt { color: var(--grey); }
.invoice dd { margin: 0; text-align: right; }
.invoice mark { background: linear-gradient(transparent 45%, rgba(239, 224, 90, .85) 45%); color: var(--ink); padding: 0 2px; }
.invoice__mid { color: var(--fluor); font-family: var(--hand); text-align: center; font-size: 1.0625rem; line-height: 1.2; }
.invoice__arrow { width: 90px; height: 44px; margin: 0 auto 4px; }
.invoice__sheet { background: #fff; border-radius: 4px; overflow: hidden; font-size: .875rem; color: var(--ink); box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .7); }
.invoice__row { display: grid; grid-template-columns: 52px minmax(0, 1fr) 80px; border-bottom: 1px solid #E4E7E1; min-height: 36px; }
.invoice__row span { padding: 8px 10px; border-right: 1px solid #E4E7E1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice__row span:last-child { border-right: 0; text-align: right; }
.invoice__row--head { background: #EEF1EC; font-weight: 700; font-size: .8125rem; }
.invoice__row.is-new { background: var(--pen-tint); font-weight: 700; box-shadow: inset 3px 0 0 var(--pen); }

/* Banda de foto en portada */
.band { position: relative; background: var(--ink); }
.band__img { margin: 0; }
.band__img img { width: 100%; height: clamp(420px, 52vw, 640px); object-fit: cover; box-shadow: none; }
.band .hand-note--band { left: auto; right: clamp(16px, 6vw, 96px); bottom: auto; top: clamp(24px, 5vw, 64px); transform: rotate(2deg); }
.band__in { position: absolute; inset: auto 0 clamp(24px, 5vw, 64px); }
.band__card { background: var(--paper); max-width: 520px; padding: clamp(24px, 3vw, 36px); border-radius: 4px; box-shadow: var(--shadow-paper); }
.band__card h2 { font-size: clamp(1.75rem, 3.2vw, 2.375rem); }
.band__card p { color: var(--ink-soft); }

/* Sectores en tarjetas */
.sector-cards, .post-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); }
.sector-card a, .post-card a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); height: 100%; }
.sector-card__img, .post-card__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; margin-bottom: 10px; background: var(--line); }
.sector-card__img img, .post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sector-card a:hover img, .post-card a:hover img { transform: scale(1.04); }
.sector-card__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.sector-card a:hover .sector-card__name, .post-card a:hover .post-card__title { color: var(--pen); }
.sector-card__desc, .post-card__excerpt { color: var(--ink-soft); font-size: 1.0625rem; }
.post-card__title { font-size: 1.3125rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.post-card__meta { color: var(--grey); font-size: .9375rem; margin-top: auto; padding-top: 4px; }
.reads { border-top: 1px solid var(--line); }
.post-cards--index { margin-bottom: var(--space); }

/* Imagen de artículo */
.post-hero { margin: 8px auto 0; max-width: 1000px; }
.post-hero img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 4px; }

@media (max-width: 999px) {
	.flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
	.flow__step:nth-child(2) .flow__arrow { display: none; }
	.demo__in, .demo__in--wide { grid-template-columns: minmax(0, 1fr); }
	.demo .phone, .call, .browser { max-width: 420px; }
	.sector-cards, .post-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.svc__link { grid-template-columns: 96px minmax(0, 1fr) 140px; }
	.svc__img { width: 96px; grid-row: span 2; }
	.svc__desc { grid-column: 2; }
	.svc__price { grid-column: 3; grid-row: 1; }
	.band__in { position: static; padding-top: 0; }
	.band__card { margin-top: -80px; position: relative; }
	.band { padding-bottom: 48px; }
}
@media (max-width: 680px) {
	.flow__steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.flow__step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 16px; }
	.flow__icon { width: 56px; height: 56px; margin: 0; grid-row: span 2; }
	.flow__arrow { display: none; }
	.flow__step p { max-width: none; }
	.sector-cards, .post-cards { grid-template-columns: minmax(0, 1fr); }
	.svc__link { grid-template-columns: 80px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
	.svc__img { width: 80px; grid-row: span 3; }
	.svc__name, .svc__desc, .svc__price { grid-column: 2; grid-row: auto; }
	.hand-note { left: 8px; bottom: -18px; font-size: 1.0625rem; max-width: 88%; }
	.band .hand-note--band { right: 12px; top: 16px; max-width: 70%; }
	.band__img img { height: 360px; }
	.invoice { grid-template-columns: minmax(0, 1fr); }
	.invoice__arrow { transform: rotate(90deg); width: 60px; }
}
@media (prefers-reduced-motion: reduce) {
	.svc__img img, .sector-card__img img, .post-card__img img { transition: none; }
}
.flow + .wrap, .demo + .wrap { padding-top: clamp(56px, 7vw, 88px); }
.demo__in--wide { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); }
.invoice { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1.15fr); }
.invoice dd { white-space: nowrap; }
.invoice dl { font-size: .8125rem; }
.invoice__row { grid-template-columns: 62px minmax(0, 1fr) 84px; }
.invoice__row span { padding: 8px; }
@media (max-width: 999px) { .demo__in--wide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 680px) { .invoice { grid-template-columns: minmax(0, 1fr); } }
.sector-strip { margin: 56px 0 8px; padding: 22px 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }
.sector-strip__t { font-weight: 800; margin-bottom: 10px; }
.sector-strip .sector-strip__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; }
.sector-strip li { display: grid; gap: 2px; margin: 0; }
.sector-strip a { font-weight: 700; }
.sector-strip span { color: var(--grey); font-size: .9375rem; }
@media (max-width: 680px) { .sector-strip .sector-strip__list { grid-template-columns: minmax(0, 1fr); } }
.author-box { display: flex; gap: 20px; align-items: flex-start; margin: 56px 0 0; padding: 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }
.author-box img, .member img { border-radius: 50%; flex: none; object-fit: cover; }
.author-box p { margin: 0 0 .4em; font-size: 1rem; }
.author-box__name { font-weight: 800; font-size: 1.125rem !important; }
.author-box__name a { color: var(--ink); text-decoration: none; }
.author-box__role, .member__role { color: var(--grey); }
.team { display: grid; gap: 40px; margin: 32px 0; }
.member { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; scroll-margin-top: 24px; }
@media (max-width: 680px) { .member { grid-template-columns: minmax(0, 1fr); } .member img { width: 140px; height: 140px; } .author-box { flex-direction: column; } }

/* ---------- 1.3: componentes dinámicos ---------- */
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

/* Cinta de herramientas */
.tools { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--sheet); overflow: hidden; }
.tools__in { display: flex; align-items: center; gap: 32px; padding-top: 18px; padding-bottom: 18px; }
.tools__label { margin: 0; flex: none; font-family: var(--hand); color: var(--pen); font-size: 1.1875rem; }
.tools__track { display: flex; overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.tools__list { list-style: none; margin: 0; padding: 0; display: flex; flex: none; gap: 44px; padding-right: 44px; animation: marquee 38s linear infinite; }
.tools__list li { font-weight: 700; font-size: 1.0625rem; color: var(--ink-soft); white-space: nowrap; letter-spacing: -.01em; }
.tools__track:hover .tools__list { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .tools__list { animation: none; flex-wrap: wrap; } .tools__list[aria-hidden] { display: none; } }

/* Áreas en pestañas */
.areas__tabs { display: none; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.js .areas__tabs { display: flex; }
.areas__tabs button { border: 1px solid var(--line); background: var(--sheet); color: var(--ink); font: 700 1rem/1 var(--sans); padding: 13px 20px; border-radius: 999px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.areas__tabs button:hover { border-color: var(--ink); }
.areas__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.areas__panel + .areas__panel { margin-top: 36px; }
.js .areas__panel + .areas__panel { margin-top: 0; }
.js .areas__panel:not(.is-active) { display: none; }
.js .areas__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.areas__title { font-size: 1.375rem; margin-bottom: 16px; }
.areas__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.areas__list a { display: grid; gap: 8px; height: 100%; padding: 26px 24px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.areas__list a:hover { transform: translateY(-3px); box-shadow: var(--shadow-paper); border-color: var(--pen); }
.areas__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--pen-tint); color: var(--pen); margin-bottom: 6px; }
.areas__icon .icon { width: 26px; height: 26px; }
.areas__list strong { font-size: 1.1875rem; letter-spacing: -.015em; line-height: 1.25; }
.areas__list span:last-child { color: var(--ink-soft); font-size: 1rem; }
.js .areas__panel.is-active .areas__list li { animation: rise .45s ease both; }
.js .areas__panel.is-active .areas__list li:nth-child(2) { animation-delay: .07s; }
.js .areas__panel.is-active .areas__list li:nth-child(3) { animation-delay: .14s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* Calculadora */
.calc-section { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; }
.calc__form { display: grid; gap: 30px; align-content: center; }
.calc__field { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: baseline; font-weight: 500; }
.calc__field output { font-weight: 800; font-size: 1.375rem; color: var(--pen); }
.calc__field input { grid-column: 1 / -1; }
.calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--pen) var(--fill, 50%), var(--line) var(--fill, 50%)); outline-offset: 6px; }
.calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--pen); box-shadow: 0 2px 8px rgba(27, 36, 64, .25); cursor: grab; }
.calc input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--pen); cursor: grab; }
.calc__result { background: var(--ink); color: #fff; border-radius: 14px; padding: clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 10px; position: relative; overflow: hidden; }
.calc__big { font-size: clamp(1.25rem, 2vw, 1.5rem); color: var(--on-ink); margin: 0 0 6px; }
.calc__big span { display: block; font-size: clamp(3rem, 7vw, 4.75rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--fluor); }
.calc__line { color: #fff; margin: 0; font-size: 1.0625rem; }
.calc__line strong, .calc__line span { color: var(--fluor); font-weight: 800; }
.calc__note { color: var(--on-ink); font-size: .875rem; margin: 10px 0 14px; }
.calc__result .btn { align-self: flex-start; margin-top: auto; }

/* Comparativa */
.compare { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--sheet); }
.compare__table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 1rem; }
.compare__table th, .compare__table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare__table thead th { font-size: 1.0625rem; font-weight: 800; background: var(--paper); }
.compare__table tbody th { font-weight: 700; color: var(--ink); width: 18%; }
.compare__table td { color: var(--ink-soft); }
.compare__table .is-us { background: var(--pen-tint); color: var(--ink); font-weight: 600; }
.compare__table thead .is-us { background: var(--pen); color: #fff; }
.compare__table tr:last-child th, .compare__table tr:last-child td { border-bottom: 0; }
.compare__note { color: var(--grey); font-size: .9375rem; margin-top: 14px; max-width: 70ch; }

/* Planes */
.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 32px 0; }
.plan { background: var(--sheet); border: 1px solid var(--line); border-radius: 14px; padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; }
.plan--main { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan__name { font-size: 1.375rem; margin: 0; }
.plan--main .plan__name { color: #fff; }
.plan__prices { list-style: none; margin: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.plan--main .plan__prices { border-color: rgba(255, 255, 255, .18); }
.plan__prices li { display: grid; gap: 0; }
.plan__prices span { font-size: .875rem; color: var(--grey); }
.plan--main .plan__prices span, .plan--main .plan__prices em { color: var(--on-ink); }
.plan__prices strong { font-size: 1.5rem; letter-spacing: -.03em; }
.plan--main .plan__prices strong { color: var(--fluor); }
.plan__prices em { font-style: normal; font-size: .9375rem; color: var(--ink-soft); }
.plan__inc { margin: 0; flex: 1; }
.plan__inc li { font-size: .9688rem; }
.plan--main .ticks li { color: #fff; }
.plan--main .ticks li::before { background-color: var(--fluor); }
.plan--main .btn { background: var(--fluor); color: var(--ink); }
.prose .plans { margin: 2em 0; }
.prose .plans ul { padding-left: 0; }

/* Conversaciones animadas al entrar en pantalla */
.js .anim .msg, .js .anim .call__lines li, .js .anim .call__summary { opacity: 0; transform: translateY(10px); }
.js .anim.is-in .msg, .js .anim.is-in .call__lines li, .js .anim.is-in .call__summary { animation: msgin .45s ease forwards; animation-delay: calc(var(--m, 0) * 650ms + 200ms); }
@keyframes msgin { to { opacity: 1; transform: none; } }
.js .ba__list.anim .paper__strike path { animation-play-state: paused; }
.js .ba__list.anim.is-in .paper__strike path { animation-play-state: running; animation-delay: calc(300ms + var(--i) * 380ms); }
@media (prefers-reduced-motion: reduce) {
	.js .anim .msg, .js .anim .call__lines li, .js .anim .call__summary { opacity: 1; transform: none; animation: none; }
	.areas__list a, .js .areas__panel.is-active .areas__list li { transition: none; animation: none; }
}

/* Casos */
.case-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.case-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.case-card[hidden] { display: none; }
.case-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); text-decoration: none; padding-bottom: 22px; transition: transform .25s ease, box-shadow .25s ease; }
.case-card a:hover { transform: translateY(-4px); box-shadow: var(--shadow-paper); }
.case-card a > span:not(.case-card__img) { padding: 0 22px; }
.case-card__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 12px; background: var(--line); }
.case-card__img img { width: 100%; height: 100%; object-fit: cover; }
.case-card__meta { color: var(--grey); font-size: .875rem; }
.case-card__title { font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; }
.case-card__kpi { color: var(--ink-soft); font-size: 1rem; margin-top: 4px; }
.case-card__kpi strong { color: var(--pen); font-size: 1.75rem; letter-spacing: -.03em; }
.case-card__client { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: .9375rem; }
.case-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.case-filters button { border: 1px solid var(--line); background: var(--sheet); font: 600 .9375rem/1 var(--sans); color: var(--ink); padding: 11px 16px; border-radius: 99px; cursor: pointer; }
.case-filters button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.cases-empty { padding: 22px 24px; background: var(--sheet); border: 1px dashed var(--line); border-radius: 10px; color: var(--ink-soft); }
.rel-cases { margin: 56px 0 0; }
.rel-cases h2 { font-size: 1.5rem; }
.more-cases { margin: 64px 0 0; }

/* Página de caso */
.case-head__client { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-weight: 800; font-size: 1.0625rem; margin-bottom: 14px; }
.case-head__client span { font-weight: 400; color: var(--grey); }
.kpis { background: var(--ink); color: #fff; padding: clamp(36px, 5vw, 56px) 0; }
.kpis__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 28px 40px; }
.kpis__list li { display: grid; gap: 6px; border-left: 2px solid rgba(255, 255, 255, .16); padding-left: 20px; }
.kpis__list strong { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--fluor); }
.kpis__list span { color: var(--on-ink); font-size: 1rem; max-width: 26ch; }
.case-body { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.case-body h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
.case-sheet dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; margin: 0 0 56px; border-top: 2px solid var(--ink); }
.case-sheet dl div { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); }
.case-sheet dt { color: var(--grey); font-size: .875rem; }
.case-sheet dd { margin: 2px 0 0; font-weight: 700; }
.before-after__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ba { border-radius: 12px; padding: 28px; }
.ba h3 { font-size: 1.25rem; margin-bottom: 14px; }
.ba--before { background: var(--sheet); border: 1px solid var(--line); background-image: repeating-linear-gradient(transparent 0 43px, #E4E9F2 43px 44px); }
.ba--before .paper__list li { white-space: normal; line-height: 1.5; padding: 9px 0; font-size: 1.1875rem; }
.ba--before .paper__strike { top: 50%; margin-top: -6px; }
.ba--after { background: var(--pen-tint); }
.ba--after .ticks li { font-weight: 600; }
.challenges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 20px 0 48px; }
.challenge { background: var(--sheet); border: 1px solid var(--line); border-left: 3px solid var(--pen); border-radius: 8px; padding: 22px 24px; }
.challenge h3 { font-size: 1.125rem; }
.challenge p { margin: 0; color: var(--ink-soft); }
.case-prose { max-width: 800px; }
.quote { margin: 48px 0; padding: clamp(28px, 4vw, 44px); background: var(--sheet); border-radius: 14px; border: 1px solid var(--line); position: relative; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.45; font-weight: 500; letter-spacing: -.01em; }
.quote blockquote p::before { content: "“"; font-family: var(--hand); color: var(--pen); font-size: 3.5rem; line-height: 0; vertical-align: -.45em; margin-right: 4px; }
.quote figcaption { color: var(--grey); }
.quote figcaption strong { color: var(--ink); }

@media (max-width: 999px) {
	.areas__list, .case-grid, .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.calc { grid-template-columns: minmax(0, 1fr); }
	.tools__in { flex-direction: column; align-items: flex-start; gap: 10px; }
	.tools__track { width: 100%; }
}
@media (max-width: 680px) {
	.areas__list, .case-grid, .case-grid--2, .plans, .before-after__grid, .challenges { grid-template-columns: minmax(0, 1fr); }
	.areas__tabs { flex-wrap: nowrap; overflow-x: auto; margin-left: -24px; margin-right: -24px; padding: 0 24px 6px; scrollbar-width: none; }
	.areas__tabs button { flex: none; }
}
.prose .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose .calc { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 680px) { .prose .plans { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 1.4: páginas de servicio y sector en bandas ---------- */
.wp-block-group__inner-container { display: contents; }
.prose--banded { max-width: none; padding-bottom: 0; }
.prose--banded > .updated { max-width: 1180px; margin: 0 auto; padding: 28px 24px 40px; }
.sec { padding: clamp(56px, 7vw, 100px) 0; }
.sec:nth-child(even) { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec__in { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sec__head h2 { font-size: clamp(1.875rem, 3.2vw, 2.5rem); line-height: 1.08; margin: 0 0 .45em; }
.sec__lead { font-size: 1.1875rem; color: var(--ink-soft); line-height: 1.55; }
.sec--split .sec__in { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sec--split .sec__head { position: sticky; top: 88px; }
.sec--split .sec__head::after { content: ""; display: block; width: 56px; height: 4px; border-radius: 2px; background: var(--pen); margin-top: 18px; }
.sec--split .sec__body { max-width: 720px; }
.sec--wide .sec__head { max-width: 760px; margin-bottom: 40px; }
.sec__body > :first-child { margin-top: 0; }
.sec__body > :last-child { margin-bottom: 0; }
.sec__body > p, .sec__body > ul, .sec__body > ol { max-width: 68ch; }
.sec__body > p { font-size: 1.125rem; }
.sec--intro { padding: clamp(48px, 6vw, 80px) 0 clamp(24px, 3vw, 40px); }
.sec--intro .sec__in > p { font-size: clamp(1.25rem, 2.1vw, 1.625rem); line-height: 1.5; letter-spacing: -.012em; max-width: 34em; color: var(--ink); }
.sec--intro .sec__in > p + p { color: var(--ink-soft); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }
.sec--outro { padding-top: clamp(40px, 5vw, 64px); }
.sec--outro .related, .sec--outro .sector-strip { margin-top: 0; }
.sec--outro .sec__in > * + * { margin-top: 48px; }
.is-banded .sec:last-of-type .cta { margin-top: 48px; }

/* Problemas que se tachan */
.prose .pains { list-style: none; padding: 26px 28px 22px 52px; margin: 0; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; position: relative; background-image: repeating-linear-gradient(transparent 0 51px, #E4E9F2 51px 52px); background-position: 0 14px; box-shadow: var(--shadow-paper); }
.prose .pains::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 0; width: 1px; background: #F0B9B9; }
.prose .pains li { font-family: var(--hand); font-size: 1.25rem; line-height: 1.4; color: var(--ink); padding: 12px 0 13px; margin: 0; position: relative; }
.prose .pains li::marker { content: none; }
.prose .pains .pain { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 60 4, 120 11, 180 6 S 270 9, 298 5' fill='none' stroke='%232743D3' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat 0 60% / 100% 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 2px; }
.js .prose .pains.anim .pain { background-size: 0% 10px; transition: background-size .6s cubic-bezier(.6, .1, .3, 1); }
.js .prose .pains.anim.is-in .pain { background-size: 100% 10px; }
.js .prose .pains.anim.is-in li:nth-child(2) .pain { transition-delay: .35s; }
.js .prose .pains.anim.is-in li:nth-child(3) .pain { transition-delay: .7s; }
.js .prose .pains.anim.is-in li:nth-child(4) .pain { transition-delay: 1.05s; }
.js .prose .pains.anim.is-in li:nth-child(5) .pain { transition-delay: 1.4s; }
.js .prose .pains.anim.is-in li:nth-child(n+6) .pain { transition-delay: 1.75s; }
@media (prefers-reduced-motion: reduce) { .js .prose .pains.anim .pain { background-size: 100% 10px; transition: none; } }

/* Funciones en tarjetas */
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 8px 0 0; counter-reset: feat; }
.sec--wide .features { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feature { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px 22px; position: relative; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.sec:nth-child(odd) .feature { background: var(--sheet); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-paper); border-color: var(--pen); }
.feature::before { counter-increment: feat; content: ""; display: grid; width: 40px; height: 40px; border-radius: 10px; margin-bottom: 16px; background: var(--pen-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%232743D3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
.prose .feature h3 { font-size: 1.1875rem; margin: 0 0 8px; letter-spacing: -.012em; }
.feature p { font-size: 1rem; color: var(--ink-soft); margin: 0 0 .6em; }
.feature p:last-child { margin-bottom: 0; }
.feature ul { font-size: .9688rem; padding-left: 1.1em; }

/* Conversación de ejemplo como chat */
.convo { display: flex; flex-direction: column; gap: 10px; background: #E8ECE5; border-radius: 22px; padding: 22px 18px; max-width: 520px; border: 10px solid #0F1629; box-shadow: 0 30px 60px -34px rgba(27, 36, 64, .55); }
.convo .msg { margin: 0; max-width: 84%; padding: 10px 13px; border-radius: 12px; font-size: .9688rem; line-height: 1.45; color: var(--ink); }
.convo .msg--in { background: #fff; align-self: flex-start; border-top-left-radius: 4px; }
.convo .msg--out { background: #DCE6FF; align-self: flex-end; border-top-right-radius: 4px; }
.sec__body > .convo + p { color: var(--grey); font-size: .9375rem; margin-top: 14px; }

/* Listas numeradas como pasos */
.prose ol.numbered { list-style: none; padding: 0; counter-reset: num; display: grid; gap: 4px; }
.prose ol.numbered li { counter-increment: num; position: relative; padding: 14px 0 14px 64px; border-bottom: 1px solid var(--line); margin: 0; min-height: 56px; }
.prose ol.numbered li::before { content: counter(num); position: absolute; left: 0; top: 8px; font-size: 2.25rem; font-weight: 800; color: var(--pen); line-height: 1; letter-spacing: -.04em; width: 44px; }

/* Tarjeta de precio */
.price-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: var(--sheet); box-shadow: var(--shadow-paper); }
.price-card__main { background: var(--ink); color: #fff; padding: 32px 30px; display: flex; flex-direction: column; gap: 4px; }
.price-card__name { color: var(--on-ink); font-weight: 700; margin: 0 0 6px; }
.price-card__from { font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--fluor); margin: 0; }
.price-card__from span { font-size: 1rem; font-weight: 500; letter-spacing: 0; color: var(--on-ink); }
.price-card__monthly { font-size: 1.25rem; font-weight: 700; margin: 6px 0 0; }
.price-card__time { color: var(--on-ink); margin: 10px 0 22px; }
.price-card__main .btn { margin-top: auto; align-self: flex-start; }
.price-card__inc { padding: 30px; }
.price-card__inc-t { font-weight: 800; margin-bottom: 12px; }
.price-card__inc .ticks { margin-bottom: 14px; }
.price-card__inc .ticks li { font-size: 1rem; margin-bottom: 8px; }
.price-card__note { color: var(--grey); font-size: .875rem; margin: 0; }

/* CTA dentro del contenido */
.cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 32px 0 0; padding: 18px 22px; background: var(--fluor); border-radius: 10px; }
.cta-inline p { margin: 0; font-size: 1.0625rem; }

/* Relacionadas con imagen */
.related ul { border-top: 0; gap: 24px; }
.related a { padding: 0; height: 100%; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; padding-bottom: 18px; transition: transform .25s ease, box-shadow .25s ease; }
.related a:hover { transform: translateY(-3px); box-shadow: var(--shadow-paper); }
.related__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; margin-bottom: 14px; background: var(--line); }
.related__img img { width: 100%; height: 100%; object-fit: cover; }
.related__title, .related__text { padding: 0 18px; }
.related__head { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }

/* Tira de sectores con imagen */
.sector-strip { padding: 0; background: none; border: 0; }
.sector-strip__t { font-size: 1.375rem; letter-spacing: -.02em; }
.sector-strip .sector-strip__list { gap: 16px; }
.sector-strip li a { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; padding: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); transition: border-color .2s; }
.sector-strip li a:hover { border-color: var(--pen); }
.sector-strip__img { display: block; width: 76px; aspect-ratio: 1; border-radius: 8px; overflow: hidden; }
.sector-strip__img img { width: 100%; height: 100%; object-fit: cover; }
.sector-strip li strong { display: block; font-size: 1.0625rem; }
.sector-strip li em { font-style: normal; color: var(--grey); font-size: .9375rem; }

/* Cabecera: datos de confianza */
.head-facts { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 26px; }
.head-facts li { display: flex; align-items: center; gap: 8px; font-size: .9688rem; font-weight: 500; color: var(--ink-soft); }
.head-facts .icon { width: 20px; height: 20px; color: var(--pen); }

/* Servicios recomendados para un sector */
.sector-svcs { background: var(--sheet); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(48px, 6vw, 72px) 0; }
.sector-svcs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sector-svcs__list a { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 26px 24px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.sector-svcs__list a:hover { transform: translateY(-3px); box-shadow: var(--shadow-paper); border-color: var(--pen); }
.sector-svcs__list strong { font-size: 1.25rem; letter-spacing: -.015em; }
.sector-svcs__desc { color: var(--ink-soft); }
.sector-svcs__price { margin-top: auto; padding-top: 10px; font-weight: 800; color: var(--pen); }

/* Registro (demo documento → ficha) */
.record { background: #fff; color: var(--ink); border-radius: 8px; padding: 18px; box-shadow: 0 24px 40px -26px rgba(0, 0, 0, .7); border-top: 4px solid var(--pen); }
.record__h { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ink) !important; font-size: 1rem !important; margin-bottom: 10px; }
.record__h .icon { width: 20px; height: 20px; color: var(--pen); }
.record dl { margin: 0; display: grid; gap: 0; font-size: .875rem; }
.record dl div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid #E4E7E1; }
.record dl div:last-child { border-bottom: 0; }
.record dt { color: var(--grey); }
.record dd { margin: 0; font-weight: 700; }

/* Barra fija con precio y botón */
.stickybar { position: fixed; left: 0; right: 0; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); box-shadow: 0 10px 24px -18px rgba(27, 36, 64, .5); transform: translateY(-110%); transition: transform .3s ease; }
.stickybar.is-on { transform: none; }
.stickybar__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
.stickybar__name { margin: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stickybar__name strong { font-size: 1.0625rem; }
.stickybar__name span { color: var(--pen); font-weight: 700; }

@media (max-width: 999px) {
	.sec--split .sec__in { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.sec--split .sec__head { position: static; }
	.sector-svcs__list { grid-template-columns: minmax(0, 1fr); }
	.price-card { grid-template-columns: minmax(0, 1fr); }
	.related ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.features, .sec--wide .features { grid-template-columns: minmax(0, 1fr); }
	.related ul { grid-template-columns: minmax(0, 1fr); }
	.prose .pains { padding: 20px 18px 18px 40px; }
	.prose .pains::before { left: 24px; }
	.stickybar { top: auto; bottom: 0; transform: translateY(110%); border-top: 1px solid var(--line); border-bottom: 0; }
	.stickybar__name strong { display: none; }
	.stickybar__in { padding-top: 10px; padding-bottom: 10px; }
	body.has-stickybar .hchat:not(.is-open) { bottom: 76px; }
	.head-facts { gap: 8px 18px; }
}
.price-card__desde { color: var(--on-ink); margin: 0; font-size: .9375rem; }
.price-card__from { white-space: nowrap; }
.price-card + p { margin-top: 20px; }
.sec--split .sec__body:only-child { grid-column: 1 / -1; }
@media (max-width: 680px) { .invoice dd, .record dd { white-space: normal; } .invoice dl div { gap: 16px; } .record dl div { grid-template-columns: 84px 1fr; } }
/* Mismas reglas cuando WordPress añade .wp-block-group__inner-container */
.sec__body > .wp-block-group__inner-container > :first-child { margin-top: 0; }
.sec__body > .wp-block-group__inner-container > :last-child { margin-bottom: 0; }
.sec__body > .wp-block-group__inner-container > p, .sec__body > .wp-block-group__inner-container > ul, .sec__body > .wp-block-group__inner-container > ol { max-width: 68ch; }
.sec__body > .wp-block-group__inner-container > p { font-size: 1.125rem; }
.sec__body > .wp-block-group__inner-container > .convo + p { color: var(--grey); font-size: .9375rem; margin-top: 14px; }
.sec--intro .sec__in > .wp-block-group__inner-container > p { font-size: clamp(1.25rem, 2.1vw, 1.625rem); line-height: 1.5; letter-spacing: -.012em; max-width: 34em; color: var(--ink); }
.sec--intro .sec__in > .wp-block-group__inner-container > p + p { color: var(--ink-soft); font-size: clamp(1.125rem, 1.6vw, 1.3125rem); }
.sec--outro .sec__in > .wp-block-group__inner-container > * + * { margin-top: 48px; }
.sec__head > .wp-block-group__inner-container > h2 { margin-top: 0; }
.invoice dd { white-space: normal; overflow-wrap: anywhere; }
.invoice dl div { gap: 14px; }
.prose .wp-block-table table { border: 0; border-collapse: collapse; }
.prose .wp-block-table th, .prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--line); padding: 12px 14px 12px 0; text-align: left; vertical-align: top; }
.prose .wp-block-table thead th { border-bottom: 2px solid var(--ink); font-size: .9375rem; }
.prose .wp-block-table thead { border-bottom: 0; }
.sec .wp-block-table { background: transparent; }

/* Casos: muro de clientes e imagen ilustrativa */
.clients { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.clients__label { font-family: var(--hand); color: var(--pen); font-size: 1.1875rem; margin-bottom: 14px; }
.clients__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 12px; }
.clients__list a { display: block; padding: 9px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); color: var(--ink); font-weight: 700; font-size: .9688rem; text-decoration: none; letter-spacing: -.01em; transition: border-color .2s, color .2s; }
.clients__list a:hover { border-color: var(--pen); color: var(--pen); }
.prose .clients__list { padding-left: 0; }
.img-illus { position: absolute; right: 10px; top: 10px; background: rgba(27, 36, 64, .72); color: #fff; font-size: .75rem; padding: 3px 8px; border-radius: 4px; }
.case-card__img { position: relative; }
.sec--intro .case-filters { margin-top: 0; }
.sec--intro .case-grid { margin-bottom: 8px; }

/* Logo Fluomark: "fluo" subrayado con fluorescente */
.logo__fluo { background: linear-gradient(transparent 58%, var(--fluor) 58% 92%, transparent 92%); padding: 0 1px; margin: 0 -1px; }
.logo--light .logo__fluo { background: none; color: var(--fluor); }

/* ---------- 1.7 Configurador de presupuesto ---------- */
.cfg { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 4vw, 48px); align-items: start; margin: 1.5em 0 2em; }
.cfg > .form-error, .cfg > .form__hp { grid-column: 1 / -1; }
.cfg__main { display: grid; gap: 22px; min-width: 0; }
.cfg__q { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.cfg__q legend, .cfg__q--num > label { font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; margin-bottom: 4px; padding: 0; }
.cfg__q legend em { font-style: normal; font-weight: 400; color: var(--grey); font-size: .9375rem; }
.cfg__hint { margin: -4px 0 4px; color: var(--grey); font-size: .9375rem; }
.cfg__opt { display: flex; gap: 12px; align-items: flex-start; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; font-size: .9875rem; }
.cfg__opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--pen); flex: none; }
.cfg__opt:has(input:checked) { border-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); background: #FBFCFF; }
.cfg__opt:focus-within { outline: 3px solid var(--pen-tint); }
.cfg__num { width: 120px; font: inherit; font-size: 1.125rem; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sheet); }
.cfg__num:focus { outline: none; border-color: var(--pen); box-shadow: 0 0 0 3px var(--pen-tint); }
.cfg__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cfg__card { display: flex; gap: 12px; align-items: flex-start; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; cursor: pointer; }
.cfg__card input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--pen); flex: none; }
.cfg__card span { display: grid; gap: 4px; }
.cfg__card small { color: var(--grey); font-size: .875rem; line-height: 1.45; }
.cfg__card:has(input:checked) { border-color: var(--pen); box-shadow: inset 0 0 0 1px var(--pen); }
.cfg__svc, .cfg__contact { display: grid; gap: 22px; border-top: 2px solid var(--ink); padding-top: 22px; }
.cfg__svc[hidden] { display: none; }
.cfg__svc-name { font-size: 1.375rem; letter-spacing: -.02em; margin: 0; }
.cfg__contact .btn { justify-self: start; }
.cfg__total { position: sticky; top: 96px; background: var(--ink); color: var(--on-ink); border-radius: 8px; padding: 24px; display: grid; gap: 6px; }
.cfg__total p { margin: 0; }
.cfg__total-label { font-size: .9375rem; }
.cfg__total-price { color: #fff; font-size: clamp(1.625rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.cfg__total-month { color: var(--fluor); font-weight: 700; font-size: 1.125rem; }
.cfg__total-time { color: #fff; }
.cfg__total-note { font-size: .9375rem; }
.cfg__total-fine { font-size: .8125rem; border-top: 1px solid rgba(255,255,255,.16); padding-top: 12px; margin-top: 8px !important; }
.cfg--js.cfg--empty .cfg__contact { opacity: .55; }
.sec--presupuesto .sec__head { max-width: 760px; }
@media (max-width: 999px) {
	.cfg { grid-template-columns: minmax(0, 1fr); }
	.cfg__total { position: sticky; bottom: 0; top: auto; order: 2; border-radius: 8px 8px 0 0; padding: 14px 18px; grid-template-columns: 1fr auto; column-gap: 12px; z-index: 5; }
	.cfg__total-label, .cfg__total-note, .cfg__total-fine { display: none; }
	.cfg__total-price { font-size: 1.25rem; grid-column: 1; }
	.cfg__total-month { grid-column: 1; font-size: 1rem; }
	.cfg__total-time { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: .875rem; text-align: right; }
}

/* ---------- 1.7 Propuesta online ---------- */
.prop__head { padding: 40px 0 clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--line); }
.prop__kicker { color: var(--grey); font-size: 1rem; margin: 0 0 10px; }
.prop__title { font-size: clamp(2rem, 4.4vw, 3.125rem); letter-spacing: -.035em; line-height: 1.06; max-width: 24ch; margin: 0 0 14px; }
.prop__meta { color: var(--grey); margin: 0; }
.prop__body { max-width: 980px; padding-bottom: var(--space); }
.prop__sec { padding: clamp(32px, 4vw, 48px) 0 0; }
.prop__sec h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); letter-spacing: -.025em; margin: 0 0 14px; }
.prop__lead { font-size: 1.1875rem; line-height: 1.6; max-width: 68ch; }
.prop__notice { margin-top: 32px; background: var(--sheet); border-left: 4px solid var(--pen); padding: 18px 22px; border-radius: 4px; }
.prop__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: start; }
.popt { position: relative; background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; padding: 24px; display: grid; gap: 6px; }
.popt--rec { border: 2px solid var(--pen); box-shadow: var(--shadow-paper); }
.popt__tag { position: absolute; top: -13px; left: 20px; background: var(--fluor); color: var(--ink); font-weight: 700; font-size: .8125rem; padding: 3px 10px; border-radius: 4px; }
.popt__name { font-size: 1.125rem; margin: 0; }
.popt__price { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; margin: 4px 0 0; line-height: 1.1; }
.popt__price small, .prop__big small { font-size: .9375rem; font-weight: 400; color: var(--grey); letter-spacing: 0; }
.popt__month { font-weight: 700; color: var(--pen-dark); margin: 0; }
.popt__time { color: var(--grey); margin: 0 0 6px; font-size: .9375rem; }
.popt__list { margin: 6px 0 0; padding: 12px 0 0 18px; border-top: 1px solid var(--line); font-size: .9375rem; display: grid; gap: 4px; }
.popt__roi { margin: 8px 0 0; font-size: .9375rem; font-weight: 700; }
.prop__big { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 800; letter-spacing: -.03em; margin: 0 0 8px; background: linear-gradient(transparent 62%, var(--fluor) 62% 92%, transparent 92%); display: inline-block; }
.prop__piece { border-top: 1px solid var(--line); padding: 16px 0; }
.prop__piece h3 { font-size: 1.125rem; margin: 0 0 6px; }
.prop__piece p { margin: 0 0 8px; max-width: 72ch; }
.prop__inc { color: var(--ink-soft); font-size: .9375rem; }
.prop__steps { padding-left: 22px; display: grid; gap: 8px; max-width: 72ch; }
.prop__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.prop__cols ul, .prop__cond { padding-left: 20px; display: grid; gap: 6px; }
.prop__accept .form, .prop__help .form { margin: 0; }
.prop__pick { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.prop__pick legend { font-weight: 700; margin-bottom: 6px; }
.prop__help { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: start; }
.prop__gone { padding: var(--space) 24px; }
@media (max-width: 760px) {
	.prop__cols, .prop__help { grid-template-columns: minmax(0, 1fr); }
}

.prose--wide { max-width: 1132px; }
.prose--wide > :not(.cfg) { max-width: 800px; }