/*
Theme Name: Estudio Ronin
Description: Tema hijo de Twenty Twenty-Five para Estudio Ronin.
Author: Duplika
Author URI: https://duplika.com/
Template: twentytwentyfive
Version: 1.0.3
Text Domain: estudio-ronin
*/

:root {
	--ronin-rail: 52px;
	--ronin-header-height: 100px;
	--ronin-inset: max(4vw, calc((100vw - var(--ronin-rail) - 1280px) / 2));
	--ronin-bg: var(--wp--preset--color--ronin-background, #0e0e0e);
	--ronin-line: var(--wp--preset--color--ronin-line, #2d2d2d);
	--ronin-muted: var(--wp--preset--color--ronin-muted, #d0d1cb);
	--ronin-gold: var(--wp--preset--color--ronin-gold, #f7cb84);
	--ronin-copper: var(--wp--preset--color--ronin-copper, #c18456);
	--ronin-gradient: var(--wp--preset--gradient--ronin-gold, linear-gradient(45deg,#c18456,#f7cb84));
}

body:has(.ronin-header) {
	margin: 0;
	background-image: url("/wp-content/uploads/2026/11/ronin-grain-uniform.avif");
	background-size: 1920px 1080px;
	background-blend-mode: overlay;
}

.ronin-header, .ronin-main, .ronin-footer {
	margin-left: var(--ronin-rail);
}

.ronin-header, .ronin-rail {
	background-color: var(--ronin-bg);
	background-image: url("/wp-content/uploads/2026/11/ronin-grain-uniform.avif");
	background-size: 1920px 1080px;
	background-blend-mode: overlay;
}

.ronin-header {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	min-height: var(--ronin-header-height);
	padding: 0 var(--ronin-inset);
	border-bottom: 1px solid var(--ronin-line);
	display: flex;
	align-items: center;
}

.ronin-header-inner, .ronin-footer-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

.ronin-header-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ronin-logo {
	flex: none;
	width: 180px;
}

.ronin-logo img, .ronin-hero-wordmark img, .ronin-rail-logo img {
	display: block;
	width: 100%;
	height: auto;
}

.ronin-header-services ul {
	gap: 14px;
}

.ronin-header-services a, .ronin-header-menu .wp-block-navigation__responsive-container-open {
	border: 1px solid var(--ronin-line);
	border-radius: 3px;
	padding: 8px 26px;
	font-size: .875rem;
	font-weight: 600;
	white-space: nowrap;
}

.ronin-header-menu .wp-block-navigation__responsive-container-open {
	padding: 8px 13px;
}

.ronin-header-services a:hover,
.ronin-header-menu .wp-block-navigation__responsive-container-open:hover {
	background: var(--ronin-line);
}

.ronin-header-menu .wp-block-navigation__responsive-container.is-menu-open {
	margin-left: auto;
	width: min(520px, 100%);
	padding: 45px clamp(24px, 6vw, 64px);
	background: var(--ronin-bg);
	color: var(--wp--preset--color--ronin-text);
	border-left: 1px solid var(--ronin-line);
	box-shadow: 0 0 0 100vmax #0009;
}

.ronin-header-menu .is-menu-open .wp-block-navigation__container {
	width: 100%;
	align-items: stretch;
	gap: 0;
}

.ronin-header-menu .is-menu-open .wp-block-navigation-item a {
	width: 100%;
	padding: 12px 0;
	border-bottom: 1px solid var(--ronin-line);
	font-weight: 650;
	font-size: clamp(1.1rem, 3vw, 1.6rem);
}

.ronin-rail {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	bottom: 0;
	left: 0;
	z-index: 41;
	width: var(--ronin-rail);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border-right: 1px solid var(--ronin-line);
}

.ronin-rail-logo a {
	height: var(--ronin-header-height);
	display: grid;
	place-items: center;
	background: var(--ronin-gradient);
}

.ronin-rail-logo img {
	width: 22px;
}

.ronin-rail-nav .wp-block-navigation__container,
.ronin-rail-nav .wp-block-navigation-item {
	width: 100%;
	gap: 0;
}

.ronin-rail-nav a, .ronin-rail-contact .wp-block-button__link {
	position: relative;
	width: 100%;
	height: 74px;
	display: grid;
	place-items: center;
	color: var(--ronin-muted);
	padding: 0;
}

.ronin-rail-nav a::before, .ronin-rail-contact .wp-block-button__link::before, .ronin-service-icon::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background: currentColor;
	mask: var(--ronin-icon) center / contain no-repeat;
}

.ronin-icon-branding { --ronin-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22m5%2019%201-5L17%203l4%204L10%2018l-5%201Zm10-14%204%204M6%2014l4%204%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.ronin-icon-web { --ronin-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20aria-hidden%3D%22true%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2213%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M8%2021h8m-4-4v4M7%208h10%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.ronin-icon-ecommerce { --ronin-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M4%207h16l-1%2014H5L4%207Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M8%207V5a4%204%200%200%201%208%200v2%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.ronin-icon-portfolio { --ronin-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M3%207V5h7l2%202h9v13H3Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.ronin-rail-contact { --ronin-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M20.5%2011.6a8.5%208.5%200%200%201-12.6%207.5L3%2020.5l1.4-4.8a8.5%208.5%200%201%201%2016.1-4.1Z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22black%22%20stroke%3D%22none%22%20d%3D%22m8.1%207.3%201.5%202.5-1%201.2a10%2010%200%200%200%204.4%204.1l1.1-1.2%202.6%201.3c-.3%201.6-1.3%202.1-2.5%201.8-3.9-.9-7.7-4.6-8-7.8-.1-1%20.7-1.9%201.9-1.9Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }

.ronin-rail-nav a:hover, .ronin-rail-nav a:focus-visible {
	color: var(--ronin-gold);
	background: var(--ronin-line);
}

.ronin-rail-nav a > span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.ronin-rail-nav a:is(:hover,:focus-visible) > span {
	left: 100%;
	width: max-content;
	height: auto;
	padding: 5px 10px;
	clip-path: none;
	background: var(--ronin-line);
}

.ronin-rail-caption {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	margin: auto !important;
	font-size: .7rem;
	letter-spacing: .24em;
	color: var(--ronin-muted);
}

.ronin-rail-contact .wp-block-button {
	width: 100%;
}

.ronin-rail-contact .wp-block-button__link {
	border-radius: 0;
	background: var(--ronin-gradient);
	color: var(--ronin-bg);
	font-size: 0;
}

.ronin-rail-contact .wp-block-button__link::before {
	grid-area: 1 / 1;
}

.ronin-mobile-contact {
	display: none;
}

.ronin-main {
	overflow-wrap: break-word;
}

.ronin-wrap {
	width: min(1280px, calc(100% - 8vw));
	margin-inline: auto;
}

.ronin-main section[id] {
	scroll-margin-top: calc(var(--ronin-header-height) + 16px);
}

.ronin-hero {
	display: grid;
	grid-template-rows: minmax(345px, 1fr) auto;
	min-height: calc(100svh - var(--ronin-header-height));
}

.ronin-hero-art {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	container-type: size;
	background: #000;
}

.ronin-hero-photo {
	position: absolute;
	inset: 0;
}

.ronin-hero-photo img {
	width: 100%;
	height: calc(100% + clamp(80px, 20cqh, 200px));
	object-fit: cover;
	object-position: 50% 54%;
	display: block;
}

.ronin-hero-kanji {
	position: absolute;
	width: auto;
	height: min(258px, 32cqh);
	top: calc(25% + 15px);
	left: 50%;
	transform: translate(-50%, -50%);
}

.ronin-hero-kanji img {
	display: block;
	width: auto;
	height: 100%;
}

.ronin-hero-caption {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	align-items: center;
	gap: 15px;
	border-top: 1px solid var(--ronin-line);
	padding: 35px var(--ronin-inset);
}

.ronin-hero-wordmark {
	width: min(100%, 560px);
}

.ronin-hero-wordmark a:hover img {
	filter: sepia(1) saturate(2.5) brightness(2.8);
}

.ronin-hero-summary {
	text-align: right;
	font-size: 1.1rem;
	line-height: 1.55;
}

.ronin-hero-summary .ronin-link {
	margin-top: 15px;
}

.ronin-link a {
	display: inline-block;
	border-bottom: 1px solid var(--ronin-copper);
	padding: 0 .2em .35em;
}

.ronin-main a:hover, .ronin-footer a:hover, .ronin-header a:hover {
	color: var(--ronin-gold);
}

.ronin-ribbon {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 14px var(--ronin-inset);
	border-block: 1px solid var(--ronin-line);
	text-transform: uppercase;
	font-size: .75rem;
	letter-spacing: .08em;
	color: var(--ronin-muted);
}

.ronin-section {
	padding-block: clamp(50px, 6vw, 88px);
}

.ronin-section + .ronin-section {
	border-top: 1px solid var(--ronin-line);
}

.ronin-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: clamp(25px, 4vw, 40px);
}

.ronin-section-head > p {
	max-width: 450px;
	color: var(--ronin-muted);
}

.ronin-kicker {
	color: var(--ronin-gold);
	font-size: .75rem;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: .14em;
	margin-bottom: 10px;
}

.ronin-main h2 {
	font-size: clamp(2rem, 4.8vw, 4.5rem);
}

.ronin-main h3 {
	font-size: clamp(1.45rem, 2.8vw, 2.5rem);
}

.ronin-grid, .ronin-service-panel, .ronin-approach {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 15px;
}

.ronin-project, .ronin-service-panel {
	border: 1px solid var(--ronin-line);
	border-radius: 3px;
	overflow: hidden;
	background: var(--ronin-bg);
}

.ronin-project img, .ronin-service-panel img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.ronin-project img {
	object-position: center top;
}

.ronin-project-copy {
	padding: 24px;
}

.ronin-project-copy p {
	color: var(--ronin-muted);
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 5px;
}

.ronin-service-panel {
	gap: 24px;
	padding: clamp(22px, 3.2vw, 40px);
	align-items: start;
}

.ronin-service-icon {
	color: var(--ronin-gold);
}

.ronin-service-icon::before {
	width: 34px;
	height: 34px;
	margin-bottom: 18px;
}

.ronin-service-copy > * + *, .ronin-approach-intro > * + *, .ronin-cta > * + * {
	margin-top: 15px;
}

.ronin-service-copy ul {
	padding-inline-start: 1.2em;
}

.ronin-service-panel figure {
	align-self: center;
	border-radius: 3px;
	overflow: hidden;
}

.ronin-approach {
	grid-template-columns: 1fr 1.2fr;
	gap: 50px;
}

.ronin-principle {
	border-top: 1px solid var(--ronin-line);
	padding-block: 23px;
}

.ronin-principle h3 {
	margin-bottom: 6px;
}

.ronin-principle p, .ronin-approach-intro > p:not(.ronin-kicker) {
	color: var(--ronin-muted);
}

.ronin-cta {
	background: var(--ronin-gradient);
	color: var(--ronin-bg);
	padding: clamp(28px, 5vw, 55px);
	border-radius: 3px;
}

.ronin-cta h2 {
	font-size: clamp(1.85rem, 3.5vw, 3rem);
}

.ronin-cta .wp-block-button__link,
.ronin-approach .wp-block-button__link,
.ronin-mobile-contact .wp-block-button__link {
	border-radius: 3px;
	padding: .55em 1.1em;
	font-size: .9rem;
	font-weight: 650;
}

.ronin-cta .wp-block-button__link {
	background: var(--ronin-bg);
	color: var(--ronin-gold);
}

.ronin-approach .wp-block-button__link,
.ronin-mobile-contact .wp-block-button__link {
	background: var(--ronin-gradient);
	color: var(--ronin-bg);
}

.ronin-footer {
	padding: 60px var(--ronin-inset) 25px;
	border-top: 1px solid var(--ronin-line);
	background: var(--ronin-bg);
}

.ronin-footer-row + .ronin-footer-row {
	border-top: 1px solid var(--ronin-line);
	margin-top: 45px;
	padding-top: 23px;
}

.ronin-footer .wp-block-navigation__container {
	gap: 1.25rem;
}

.ronin-footer-secondary {
	color: var(--ronin-muted);
	font-size: .8rem;
}

@media (max-width: 1100px) {
	:root { --ronin-rail: 42px; --ronin-header-height: 85px; }
	.ronin-header-services a { padding-inline: 13px; }
	.ronin-header-actions, .ronin-header-services ul { gap: 8px; }
	.ronin-rail-nav a, .ronin-rail-contact .wp-block-button__link { height: 62px; }
}

@media (max-height: 620px) {
	.ronin-rail-caption { visibility: hidden; }
	.ronin-rail-nav a, .ronin-rail-contact .wp-block-button__link { height: 48px; }
}

@media (max-width: 760px) {
	:root { --ronin-rail: 0px; --ronin-header-height: 72px; --ronin-inset: 6vw; }
	.ronin-wrap { width: calc(100% - 12vw); }
	.ronin-rail, .ronin-header-services { display: none; }
	.ronin-header-inner { justify-content: center; position: relative; }
	.ronin-header-actions { position: absolute; right: 0; }
	.ronin-logo { width: min(140px, 42vw); }
	.ronin-hero { min-height: calc(90svh - var(--ronin-header-height)); grid-template-rows: minmax(295px, 1fr) auto; }
	.ronin-hero-photo img { height: 100%; object-fit: contain; transform: translateY(60px) scale(1.8); }
	.ronin-hero-kanji { height: min(135px, 29cqh); }
	.ronin-hero-caption { grid-template-columns: 1fr; gap: 23px; padding-block: 25px; }
	.ronin-hero-wordmark { width: min(100%, 430px); }
	.ronin-hero-summary { text-align: left; font-size: .95rem; }
	.ronin-ribbon p:last-child { display: none; }
	.ronin-section-head, .ronin-footer-row { align-items: flex-start; flex-direction: column; }
	.ronin-grid, .ronin-service-panel, .ronin-approach { grid-template-columns: 1fr; }
	.ronin-approach { gap: 30px; }
	.ronin-footer { padding-block: 40px 92px; }
	.ronin-footer-row + .ronin-footer-row { margin-top: 25px; }
	.ronin-mobile-contact { display: flex; position: fixed; z-index: 35; right: 15px; bottom: max(15px, env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
	.ronin-footer .wp-block-navigation__container { gap: .6rem 1rem; }
}

.wp-block-template-part:has(> .ronin-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
}

.ronin-header { position: static; }
.ronin-rail-contact .wp-block-button__link:focus-visible { outline-offset: -4px; }
@media (max-height: 620px) { .ronin-rail-caption { font-size: 0; } }

.ronin-mobile-contact .wp-block-button__link {
	display: flex;
	align-items: center;
	gap: .7em;
	padding: .8em 1.1em;
	background: var(--ronin-bg);
	color: var(--wp--preset--color--ronin-text);
	border: 1px solid var(--ronin-line);
}

.ronin-mobile-contact .wp-block-button__link::before {
	content: "";
	width: 17px;
	height: 17px;
	background: currentColor;
	mask: var(--ronin-icon) center / contain no-repeat;
}

.ronin-mobile-contact { --ronin-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.4%22%20aria-hidden%3D%22true%22%3E%3Cpath%20d%3D%22M20.5%2011.6a8.5%208.5%200%200%201-12.6%207.5L3%2020.5l1.4-4.8a8.5%208.5%200%201%201%2016.1-4.1Z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22black%22%20stroke%3D%22none%22%20d%3D%22m8.1%207.3%201.5%202.5-1%201.2a10%2010%200%200%200%204.4%204.1l1.1-1.2%202.6%201.3c-.3%201.6-1.3%202.1-2.5%201.8-3.9-.9-7.7-4.6-8-7.8-.1-1%20.7-1.9%201.9-1.9Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }

@media (max-width: 760px) {
	:root { --ronin-header-height: 122px; }

	.ronin-header { padding-block: 14px; }
	.ronin-header-inner { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 12px; }
	.ronin-header-actions, .ronin-header-services { display: contents; }
	.ronin-header-services > .wp-block-navigation__container {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: 100%;
		gap: 8px;
	}
	.ronin-header-services .wp-block-navigation-item:not(:last-child) { width: 100%; }
	.ronin-header-services .wp-block-navigation-item a {
		width: 100%;
		text-align: center;
		padding: 4px 2px;
		font-size: clamp(.69rem, 3.4vw, .88rem);
	}
	.ronin-header-services .wp-block-navigation-item:last-child,
	.ronin-header-menu { position: absolute; top: 0; }
	.ronin-header-services .wp-block-navigation-item:last-child { left: 0; }
	.ronin-header-services .wp-block-navigation-item:last-child a { padding-inline: 13px; }
	.ronin-header-menu { right: 0; }
	.ronin-header-menu .wp-block-navigation__responsive-container-open { padding: 4px 9px; }
}

.ronin-rail-nav .wp-block-navigation-item > a.wp-block-navigation-item__content {
	display: grid;
}

@media (max-width: 760px) {
	nav.ronin-header-services.wp-block-navigation {
		display: block;
		position: static;
		justify-self: stretch;
		width: 100%;
	}
	nav.ronin-header-services > ul.wp-block-navigation__container {
		position: static;
		width: 100%;
		min-width: 0;
	}
}