/*
Theme Name: Haz Marca
Theme URI: https://hazmarcacomunicacion.com/
Description: Tema hijo de Twenty Twenty-Five para Haz Marca Comunicación.
Author: Haz Marca Comunicación
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Text Domain: hazmarca
*/

:root {
	--hm-ink: var(--wp--preset--color--ink);
	--hm-accent: var(--wp--preset--color--accent);
	--hm-leaf: var(--wp--preset--color--leaf);
	--hm-sun: var(--wp--preset--color--sun);
	--hm-radius: 28px;
	--hm-ease: cubic-bezier(.2, .7, .2, 1);
}

::selection { background: var(--hm-accent); color: #fff; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
:where(.wp-site-blocks) > main { margin-block-start: 0; }
:where(.wp-site-blocks) > footer { margin-block-start: 0; }
/* Sections sit edge to edge; spacing comes from their own padding. */
.wp-block-post-content > .alignfull { margin-block-start: 0; margin-block-end: 0; }
@media (max-width: 781px) {
	.wp-block-group.is-layout-grid { grid-template-columns: 1fr !important; }
	.wp-block-group.is-layout-grid > * { grid-column: auto !important; }
}

/* Mark highlight in headings: brand underline stroke */
:where(h1, h2, h3) mark {
	background: linear-gradient(transparent 68%, color-mix(in srgb, var(--hm-sun) 70%, transparent) 68%, color-mix(in srgb, var(--hm-sun) 70%, transparent) 92%, transparent 92%);
	color: inherit;
	padding: 0 .06em;
}
.has-ink-background-color :where(h1, h2, h3) mark,
.is-style-hm-ink :where(h1, h2, h3) mark {
	background: none;
	color: var(--hm-accent);
}

/* Buttons */
.wp-block-button__link { transition: transform .25s var(--hm-ease), background-color .25s, color .25s; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1.5px solid currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--hm-ink); color: #fff; border-color: var(--hm-ink); }
.is-style-hm-ink .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--hm-accent);
	color: var(--hm-ink);
}
.is-style-hm-ink .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #fff; color: var(--hm-ink); }
.is-style-hm-ink .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: #fff; color: var(--hm-ink); border-color: #fff; }

/* ---------- Header ---------- */
.hm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	background: color-mix(in srgb, var(--wp--preset--color--bg) 82%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 70%, transparent);
}
.admin-bar .hm-header { top: var(--wp-admin--admin-bar--height, 32px); }
.hm-header .wp-block-site-logo img { width: auto; max-height: 46px; }
.hm-header .wp-block-navigation-item__content { padding: .35rem .15rem; position: relative; }
.hm-header .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: var(--hm-accent); transform: scaleX(0); transform-origin: left;
	transition: transform .3s var(--hm-ease);
}
.hm-header .wp-block-navigation-item__content:hover::after,
.hm-header .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.hm-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--bg); padding: 2rem; }
.hm-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.75rem; font-weight: 700; }
.hm-header .wp-block-button__link { white-space: nowrap; }
/* Seven services do not fit on one line below ~1100px: switch to the overlay menu there. */
@media (max-width: 1099px) {
	.hm-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.hm-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
	.hm-header .wp-block-navigation { margin-left: auto; }
}
@media (max-width: 600px) { .hm-header .hm-header__cta { display: none; } }

/* ---------- Section styles ---------- */
.is-style-hm-mesh {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--wp--preset--color--bg);
}
.is-style-hm-mesh::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -1;
	background:
		radial-gradient(38% 42% at 12% 22%, color-mix(in srgb, var(--hm-accent) 45%, transparent), transparent 70%),
		radial-gradient(34% 40% at 88% 18%, color-mix(in srgb, var(--hm-sun) 50%, transparent), transparent 70%),
		radial-gradient(40% 45% at 70% 92%, color-mix(in srgb, var(--hm-leaf) 38%, transparent), transparent 70%);
	filter: blur(30px);
	animation: hm-drift 22s ease-in-out infinite alternate;
}
@keyframes hm-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

.is-style-hm-ink {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--hm-ink);
	color: var(--wp--preset--color--bg);
}
.is-style-hm-ink::before {
	content: "";
	position: absolute;
	width: 60vmax; height: 60vmax;
	right: -22vmax; top: -30vmax;
	z-index: -1;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--hm-accent) 34%, transparent), transparent);
}
.is-style-hm-ink :where(p, li) { color: color-mix(in srgb, #fff 78%, var(--hm-ink)); }
.is-style-hm-ink :where(h1, h2, h3, h4, h5, h6, strong) { color: #fff; }
.is-style-hm-ink a:where(:not(.wp-element-button)) { color: var(--hm-accent); }

.is-style-hm-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--hm-radius);
	transition: transform .35s var(--hm-ease), box-shadow .35s var(--hm-ease), border-color .35s;
}
.is-style-hm-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--hm-accent) 45%, var(--wp--preset--color--line));
	box-shadow: 0 24px 48px -28px rgba(21, 22, 32, .28);
}
.is-style-hm-ink .is-style-hm-card { background: color-mix(in srgb, #fff 6%, var(--hm-ink)); border-color: color-mix(in srgb, #fff 12%, transparent); }
.is-style-hm-ink .is-style-hm-card :where(p, li) { color: color-mix(in srgb, #fff 72%, var(--hm-ink)); }

/* Accent card (call to action tile) */
.is-style-hm-accent {
	background: var(--hm-accent);
	color: var(--hm-ink);
	border-radius: var(--hm-radius);
	transition: transform .35s var(--hm-ease);
}
.is-style-hm-accent:hover { transform: translateY(-4px) rotate(-.6deg); }
.is-style-hm-accent a { color: inherit; }

/* ---------- Service cards (cover) ---------- */
.wp-block-cover.is-style-hm-service {
	overflow: hidden;
	align-items: flex-end;
	border-radius: var(--hm-radius);
}
.wp-block-cover.is-style-hm-service .wp-block-cover__image-background { transition: transform .8s var(--hm-ease); }
.wp-block-cover.is-style-hm-service:hover .wp-block-cover__image-background { transform: scale(1.06); }
.wp-block-cover.is-style-hm-service .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(21, 22, 32, 0) 25%, rgba(21, 22, 32, .88) 100%) !important;
	opacity: 1 !important;
}
.wp-block-cover.is-style-hm-service :where(h3, p) { color: #fff; }
.wp-block-cover.is-style-hm-service h3 a { color: inherit; text-decoration: none; }
.wp-block-cover.is-style-hm-service h3 a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.wp-block-cover.is-style-hm-service h3 a::before {
	content: "↗"; float: right; margin-left: .5rem;
	display: inline-grid; place-items: center;
	width: 2.4rem; height: 2.4rem; border-radius: 999px;
	background: var(--hm-accent); color: var(--hm-ink);
	font-size: 1.1rem; transition: transform .35s var(--hm-ease);
}
.wp-block-cover.is-style-hm-service:hover h3 a::before { transform: rotate(45deg); }

/* ---------- Images ---------- */
.wp-block-image.is-style-hm-tilt-left img,
.wp-block-image.is-style-hm-tilt-right img { box-shadow: 0 30px 60px -30px rgba(21, 22, 32, .45); }
.wp-block-image.is-style-hm-tilt-left { transform: rotate(-3deg); }
.wp-block-image.is-style-hm-tilt-right { transform: rotate(3deg); }
.wp-block-image.is-style-hm-tilt-left img,
.wp-block-image.is-style-hm-tilt-right img { transition: transform .6s var(--hm-ease); }
.wp-block-image.is-style-hm-tilt-left:hover img,
.wp-block-image.is-style-hm-tilt-right:hover img { transform: scale(1.02); }

.wp-block-image.is-style-hm-spin img { border-radius: 999px; animation: hm-spin 26s linear infinite; }
@keyframes hm-spin { to { transform: rotate(360deg); } }

/* Hero collage: two overlapping photos plus the badge */
.hm-collage { position: relative; min-height: 460px; }
.hm-collage > .wp-block-image { margin: 0; }
.hm-collage > .wp-block-image:nth-child(1) { width: 78%; margin-left: auto; position: relative; z-index: 1; }
.hm-collage > .wp-block-image:nth-child(2) { width: 54%; position: absolute; left: 0; bottom: -4%; z-index: 2; }
.hm-collage > .wp-block-image:nth-child(3) { width: 132px; position: absolute; right: -10px; bottom: 6%; z-index: 3; }
.hm-collage > .wp-block-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hm-collage > .wp-block-image:nth-child(2) img { aspect-ratio: 1; border: 6px solid var(--wp--preset--color--bg); }
.hm-collage > .wp-block-image:nth-child(3) img { aspect-ratio: 1; }
@media (max-width: 781px) {
	.hm-collage { min-height: 0; margin-top: 1.5rem; padding-bottom: 2.5rem; }
	.hm-collage > .wp-block-image:nth-child(1) { width: 82%; }
	.hm-collage > .wp-block-image:nth-child(2) { width: 50%; }
	.hm-collage > .wp-block-image:nth-child(3) { width: 96px; right: 0; }
}

/* ---------- Lists ---------- */
.wp-block-list.is-style-hm-checks { list-style: none; padding-left: 0; }
.wp-block-list.is-style-hm-checks li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.wp-block-list.is-style-hm-checks li::before {
	content: ""; position: absolute; left: 0; top: .3em;
	width: 1.2rem; height: 1.2rem; border-radius: 999px;
	background: var(--hm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23151620' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* ---------- Marquee ---------- */
.is-style-hm-marquee { overflow: hidden; }
.is-style-hm-marquee > .hm-marquee__track {
	display: flex; flex-wrap: nowrap; width: max-content;
	animation: hm-marquee 38s linear infinite;
}
.is-style-hm-marquee:hover > .hm-marquee__track { animation-play-state: paused; }
.is-style-hm-marquee .hm-marquee__track > * {
	margin: 0 !important; white-space: nowrap;
	font-family: var(--wp--preset--font-family--urbanist); font-weight: 700;
	font-size: clamp(1.75rem, 4vw, 3.25rem); letter-spacing: -.02em; line-height: 1;
	padding-right: 1.25em;
}
.is-style-hm-marquee .hm-marquee__track > *::after { content: "✦"; color: var(--hm-accent); padding-left: 1.25em; }
@keyframes hm-marquee { to { transform: translateX(-50%); } }

/* ---------- Big numbers ---------- */
.hm-num {
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 800; line-height: .9; letter-spacing: -.04em;
	background: var(--wp--preset--gradient--brand);
	-webkit-background-clip: text; background-clip: text; color: transparent !important;
	/* Never split "02" or "12.000 €" across lines, and keep their width inside flex rows. */
	white-space: nowrap; flex-shrink: 0; max-width: 100%;
}

/* ---------- FAQ (details) ---------- */
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 700; font-size: 1.25rem; cursor: pointer;
	list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+"; flex: none; display: grid; place-items: center;
	width: 2rem; height: 2rem; border-radius: 999px;
	background: var(--wp--preset--color--mist); color: var(--wp--preset--color--accent-deep);
	font-size: 1.25rem; transition: transform .3s var(--hm-ease), background-color .3s;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); background: var(--hm-accent); color: var(--hm-ink); }
.wp-block-details > :not(summary) { margin-top: .75rem; color: var(--wp--preset--color--ink-soft); max-width: 62ch; }

/* ---------- Tables (legal pages) ---------- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 640px; }
.wp-block-table :where(th, td) { border-color: var(--wp--preset--color--line); padding: .6rem .75rem; vertical-align: top; }

/* ---------- Pricing card (Kit Digital) ---------- */
.hm-plan { display: flex; flex-direction: column; }
.hm-plan .wp-block-buttons { margin-top: auto; padding-top: 1rem; }
.hm-plan--featured { transform: translateY(-12px); }

/* ---------- Contact Form 7 ---------- */
.hm-form { color: var(--wp--preset--color--ink); }
.is-style-hm-ink .hm-form :where(p, li, label, h2, h3) { color: var(--wp--preset--color--ink); }
.is-style-hm-ink .hm-form a { color: var(--wp--preset--color--accent-deep); }
.hm-form .wpcf7-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.hm-form .wpcf7-form > p { margin: 0; }
.hm-form .hm-f-full, .hm-form .wpcf7-form > .wpcf7-response-output, .hm-form .wpcf7-form > p:has(textarea), .hm-form .wpcf7-form > p:has(.wpcf7-submit), .hm-form .wpcf7-form > p:has(.wpcf7-acceptance) { grid-column: 1 / -1; }
.hm-form label { display: block; font-size: .875rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.hm-form .wpcf7-form-control-wrap { display: block; margin-top: .35rem; }
.hm-form :is(input[type=text], input[type=email], input[type=tel], textarea) {
	width: 100%; box-sizing: border-box;
	font: inherit; color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--bg);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 14px; padding: .85rem 1rem;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.hm-form textarea { min-height: 140px; resize: vertical; }
.hm-form :is(input, textarea):focus {
	outline: none; background: #fff; border-color: var(--hm-accent);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--hm-accent) 22%, transparent);
}
.hm-form .wpcf7-acceptance label { font-weight: 400; color: var(--wp--preset--color--ink-soft); display: flex; gap: .5rem; align-items: flex-start; }
.hm-form .wpcf7-list-item { margin: 0; }
.hm-form input[type=checkbox] { accent-color: var(--wp--preset--color--accent-deep); width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.hm-form .wpcf7-submit {
	appearance: none; border: 0; cursor: pointer;
	background: var(--hm-ink); color: #fff;
	font-family: var(--wp--preset--font-family--urbanist); font-weight: 700; font-size: 1.0625rem;
	border-radius: 999px; padding: 1rem 2rem;
	transition: transform .25s var(--hm-ease), background-color .25s;
}
.hm-form .wpcf7-submit:hover { background: var(--wp--preset--color--accent-deep); transform: translateY(-2px); }
.hm-form .wpcf7-spinner { vertical-align: middle; }
.hm-form .wpcf7-not-valid-tip { font-size: .8rem; color: #B42318; margin-top: .25rem; }
.hm-form .wpcf7-response-output { margin: 0 !important; border-radius: 14px; padding: .75rem 1rem !important; font-size: .9rem; }
@media (max-width: 600px) { .hm-form .wpcf7-form { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.hm-footer a { color: inherit; text-decoration: none; }
.hm-footer .wp-block-separator { opacity: .14; }
.hm-footer a:hover { color: var(--hm-accent); }
.hm-footer .wp-block-list { list-style: none; padding: 0; }
.hm-footer .wp-block-list li { margin-bottom: .45rem; }
/* The big CTA sizes to its own column so "¿Hablamos?" always fits on one line. */
.hm-footer .wp-block-column:has(> .hm-footer__big) { container-type: inline-size; min-width: 0; }
.hm-footer__big {
	font-family: var(--wp--preset--font-family--urbanist);
	font-weight: 800; letter-spacing: -.04em; line-height: .95;
	white-space: nowrap; font-size: min(18cqi, 7.5rem) !important;
}
.hm-footer__big a { background: var(--wp--preset--gradient--brand); -webkit-background-clip: text; background-clip: text; color: transparent !important; }

/* ---------- Scroll motion ----------
 * assets/motion.js tags elements with .hm-r (+ a variant) and adds .is-in when they enter the viewport.
 * Everything is hidden only under html.hm-js, so the page stays fully visible if the script never runs.
 * Animations use translate/scale/rotate/clip-path so they never fight the hover transforms. */
.hm-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 100;
	background: var(--wp--preset--gradient--brand);
	transform-origin: 0 50%; transform: scaleX(var(--hm-progress, 0));
	pointer-events: none;
}
.admin-bar .hm-progress { top: var(--wp-admin--admin-bar--height, 32px); }

.hm-js .hm-r {
	--d: calc(var(--i, 0) * 110ms);
	transition: opacity .9s var(--hm-ease) var(--d), translate 1.1s var(--hm-ease) var(--d), scale 1.1s var(--hm-ease) var(--d), rotate 1.1s var(--hm-ease) var(--d), clip-path 1.2s var(--hm-ease) var(--d), filter 1s var(--hm-ease) var(--d);
}
/* Rise: cards, paragraphs, lists */
.hm-js .hm-r--up:not(.is-in) { opacity: 0; translate: 0 70px; }
/* Tiles pop in with a slight tilt */
.hm-js .hm-r--tile:not(.is-in) { opacity: 0; translate: 0 90px; scale: .9; rotate: -2deg; }
/* Headings slide up from behind a mask, line by line feel */
.hm-js .hm-r--title { clip-path: inset(-10% -5% -25% -5%); }
.hm-js .hm-r--title:not(.is-in) { opacity: 0; translate: 0 .6em; clip-path: inset(-10% -5% 100% -5%); filter: blur(6px); }
/* Images uncover from the bottom and settle from a zoom */
.hm-js .hm-r--img img { transition: clip-path 1.3s var(--hm-ease) var(--d), scale 1.6s var(--hm-ease) var(--d); clip-path: inset(0 0 0 0 round 28px); }
.hm-js .hm-r--img:not(.is-in) img { clip-path: inset(100% 0 0 0 round 28px); scale: 1.25; }
/* Side entrances for split layouts */
.hm-js .hm-r--left:not(.is-in) { opacity: 0; translate: -120px 0; rotate: -4deg; }
.hm-js .hm-r--right:not(.is-in) { opacity: 0; translate: 120px 0; rotate: 4deg; }
/* Big numbers bounce in */
.hm-js .hm-r--pop { transition-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.hm-js .hm-r--pop:not(.is-in) { opacity: 0; scale: .3; translate: 0 30px; }
/* Section underline mark draws itself once the heading is in */
.hm-js .hm-r--title mark { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1s var(--hm-ease) calc(var(--d) + .5s); }
.hm-js .hm-r--title.is-in mark { background-size: 100% 100%; }

/* Hero entrance on load */
.hm-js .hm-hero-in > * { transition: opacity 1s var(--hm-ease), translate 1.1s var(--hm-ease), clip-path 1.2s var(--hm-ease), filter 1s var(--hm-ease); transition-delay: calc(var(--i, 0) * 140ms + 100ms); }
.hm-js .hm-hero-in:not(.is-in) > * { opacity: 0; translate: 0 50px; filter: blur(8px); }
.hm-js .hm-collage.hm-hero-collage > .wp-block-image { transition: opacity 1s var(--hm-ease), translate 1.3s var(--hm-ease); transition-delay: calc(var(--i, 0) * 180ms + 350ms); }
.hm-js .hm-collage.hm-hero-collage:not(.is-in) > .wp-block-image:nth-child(1) { opacity: 0; translate: 80px 40px; }
.hm-js .hm-collage.hm-hero-collage:not(.is-in) > .wp-block-image:nth-child(2) { opacity: 0; translate: -80px 80px; }
.hm-js .hm-collage.hm-hero-collage:not(.is-in) > .wp-block-image:nth-child(3) { opacity: 0; translate: 0 0; scale: 0; }
.hm-collage > .wp-block-image:nth-child(3) { transition: scale 1s cubic-bezier(.34, 1.56, .64, 1) 1s, opacity .6s 1s; }

/* Scroll-linked layers (values written by motion.js) */
.hm-collage > .wp-block-image > img { translate: 0 var(--hm-py, 0px); }
.is-style-hm-ink::before, .is-style-hm-mesh::before { translate: 0 var(--hm-glow, 0px); }
.hm-footer__big { scale: var(--hm-grow, 1); transform-origin: 0 100%; }
.is-style-hm-marquee { rotate: -1.5deg; scale: 1.04; }

@media (prefers-reduced-motion: reduce) {
	.is-style-hm-mesh::before, .wp-block-image.is-style-hm-spin img, .is-style-hm-marquee > .hm-marquee__track { animation: none; }
	.is-style-hm-marquee > .hm-marquee__track { flex-wrap: wrap; width: auto; }
	.is-style-hm-marquee { rotate: none; scale: none; }
	.hm-progress { display: none; }
	* { transition-duration: 0s !important; transition-delay: 0s !important; }
}