:root { --color-wine: #6E1114;
--color-wine-dark: #561A1C;
--color-gold: #D3AE44;
--color-white: #FFFFFF;
--color-charcoal: #2B2B2B;
--color-muted: #8a8a8a;
--color-rule: rgba(43, 43, 43, 0.12);
--color-bg-soft: #fafafa; --color-bg: var(--color-white);
--color-text: var(--color-charcoal);
--color-accent: var(--color-gold);
--color-primary: var(--color-wine); --font-title: 'Cinzel', 'Times New Roman', serif;
--font-body: 'Cormorant Garamond', 'Times New Roman', serif; --space-2xs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
--space-2xl: 10rem; --container-max: 1400px;
--header-height: 84px; --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
} *, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; }
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
min-height: 100vh;
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
font-size: clamp(1.05rem, 0.5vw + 1rem, 1.2rem);
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; padding-bottom: 20px;
}
img, picture, video { max-width: 100%; display: block; height: auto; }
a {
color: inherit;
text-decoration: none;
transition: color 300ms var(--ease-out);
}
button {
font: inherit;
background: none;
border: 0;
cursor: pointer;
color: inherit;
padding: 0;
}
::selection { background: var(--color-wine); color: var(--color-white); } h1, h2, h3, h4, h5, h6 {
font-family: var(--font-title);
font-weight: 500;
letter-spacing: 0.08em;
line-height: 1.2;
color: var(--color-charcoal);
text-transform: uppercase;
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 4.25rem); letter-spacing: 0.14em; font-weight: 500; }
h2 { font-size: clamp(1.6rem, 2.2vw + 0.5rem, 2.6rem); letter-spacing: 0.12em; }
h3 { font-size: clamp(1.25rem, 1.2vw + 0.6rem, 1.7rem); letter-spacing: 0.1em; }
h4 { font-size: clamp(1.05rem, 0.6vw + 0.8rem, 1.3rem); letter-spacing: 0.1em; }
p { margin-bottom: 1em; }
em, i { font-style: italic; }
strong, b { font-weight: 600; } .container {
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
.rule {
height: 1px;
background: var(--color-rule);
border: 0;
margin: 0;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .site-header {
position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: var(--space-sm) 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
transition: background-color 400ms var(--ease-out);
} .site-header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
background: linear-gradient(
90deg,
var(--color-wine) 0%,
var(--color-wine-dark) 22%,
var(--color-gold) 50%,
var(--color-wine-dark) 78%,
var(--color-wine) 100%
);
background-size: 200% 100%;
animation: headerGradient 14s linear infinite;
pointer-events: none;
}
@keyframes headerGradient {
0%   { background-position: 0% 50%; }
100% { background-position: 200% 50%; }
} body.home .site-header {
position: fixed;
background: rgba(255, 255, 255, 0.78);
}
body.home .site-header.is-scrolled {
background: rgba(255, 255, 255, 0.92);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
min-height: calc(var(--header-height) - (2 * var(--space-sm)));
}
.site-logo {
font-family: var(--font-title);
font-size: clamp(0.85rem, 1.1vw, 1.1rem);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-charcoal);
line-height: 1.1;
white-space: nowrap;
} .primary-nav { display: none; }
.primary-nav__list {
display: flex;
gap: var(--space-md);
list-style: none;
padding: 0;
margin: 0;
}
.primary-nav a {
display: inline-block;
font-family: var(--font-title);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-charcoal);
padding: 0.5rem 0;
position: relative;
}
.primary-nav > .primary-nav__list > li {
position: relative;
}
.primary-nav > .primary-nav__list > li > a::after,
.primary-nav > ul > li > a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0.1rem;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform 500ms var(--ease-out);
}
.primary-nav > .primary-nav__list > li > a:hover::after,
.primary-nav > .primary-nav__list > .current-menu-item > a::after,
.primary-nav > .primary-nav__list > .current_page_item > a::after,
.primary-nav > ul > li > a:hover::after {
transform: scaleX(1);
transform-origin: left;
} .primary-nav .menu-item-has-children > a::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg) translateY(-2px);
margin-left: 0.5em;
margin-right: 0.1em;
vertical-align: middle;
opacity: 0.6;
transition: transform 300ms var(--ease-out), opacity 300ms var(--ease-out);
float: right;
margin-top: 0.9em;
}
.primary-nav .menu-item-has-children:hover > a::before,
.primary-nav .menu-item-has-children:focus-within > a::before {
opacity: 1;
transform: rotate(225deg) translateY(-2px);
} .primary-nav .sub-menu {
position: absolute;
top: 100%;
left: -1.2rem;
min-width: 240px;
list-style: none;
padding: 0;
margin: 0;
background: var(--color-white);
box-shadow:
0 2px 0 0 var(--color-wine),
0 14px 36px rgba(86, 26, 28, 0.14),
0 4px 14px rgba(0, 0, 0, 0.08);
border-top: 2px solid var(--color-wine);
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 300ms;
z-index: 120;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu,
.primary-nav .sub-menu:hover {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.primary-nav .sub-menu li {
border-bottom: 1px solid var(--color-wine);
position: relative;
}
.primary-nav .sub-menu li:last-child {
border-bottom: 0;
}
.primary-nav .sub-menu a {
display: block;
padding: 0.95em 1.4em;
font-family: var(--font-title);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-charcoal);
transition: background-color 300ms var(--ease-out), color 300ms var(--ease-out);
}
.primary-nav .sub-menu a:hover {
background: rgba(110, 17, 20, 0.06);
color: var(--color-wine);
}
.primary-nav .sub-menu a::after { display: none; } .primary-nav .sub-menu .sub-menu {
top: 0;
left: 100%;
margin-left: 1px;
} .site-header__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.site-header__wa {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid var(--color-wine);
border-radius: 50%;
color: var(--color-wine);
background: transparent;
transition: background-color 350ms var(--ease-out), color 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.site-header__wa:hover {
background: var(--color-wine);
color: var(--color-white);
transform: scale(1.06);
}
.site-header__wa svg {
width: 20px;
height: 20px;
fill: currentColor;
} .nav-toggle {
width: 36px;
height: 36px;
position: relative;
z-index: 110;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
}
.nav-toggle span {
display: block;
width: 26px;
height: 1px;
background: var(--color-charcoal);
transition: transform 400ms var(--ease-out), opacity 300ms var(--ease-out), background-color 300ms var(--ease-out);
}
body.nav-open .nav-toggle span { background: var(--color-charcoal); }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav {
position: fixed;
inset: 0;
background: var(--color-white);
z-index: 105;
opacity: 0;
pointer-events: none;
transition: opacity 500ms var(--ease-out);
display: flex;
align-items: center;
justify-content: center;
}
body.nav-open .mobile-nav {
opacity: 1;
pointer-events: auto;
}
.mobile-nav__list {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}
.mobile-nav__list li { margin: var(--space-md) 0; }
.mobile-nav a {
font-family: var(--font-title);
font-size: clamp(1.5rem, 5vw, 2.2rem);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-charcoal);
font-weight: 500;
}
.mobile-nav a:hover { color: var(--color-wine); } .mobile-nav .sub-menu {
list-style: none;
padding: var(--space-sm) 0 0;
margin: var(--space-xs) 0 0;
border-top: 1px solid var(--color-wine);
}
.mobile-nav .sub-menu li {
margin: var(--space-sm) 0;
}
.mobile-nav .sub-menu a {
font-size: clamp(1rem, 3vw, 1.2rem);
letter-spacing: 0.2em;
color: var(--color-muted);
}
.mobile-nav .sub-menu a:hover { color: var(--color-wine); }
@media (min-width: 1024px) {
.primary-nav { display: block; }
.nav-toggle { display: none; }
} .site-footer {
padding: var(--space-xl) 0 var(--space-md);
border-top: 1px solid var(--color-rule);
margin-top: var(--space-xl);
text-align: center;
background: var(--color-white);
} .site-footer__band {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(
90deg,
var(--color-wine) 0%,
var(--color-wine-dark) 22%,
var(--color-gold) 50%,
var(--color-wine-dark) 78%,
var(--color-wine) 100%
);
background-size: 200% 100%;
animation: headerGradient 14s linear infinite;
overflow: hidden;
padding: 0 var(--space-sm);
text-align: center;
z-index: 90;
pointer-events: none;
}
.site-footer__band-name {
font-family: var(--font-title);
font-size: 14px;
letter-spacing: 0.18em;
font-weight: 500;
line-height: 1;
color: var(--color-white);
text-transform: uppercase;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
white-space: nowrap;
}
@media (max-width: 480px) {
.site-footer__band-name {
font-size: 12px;
letter-spacing: 0.14em;
}
}
.site-footer__firma {
max-width: 180px;
margin: 0 auto var(--space-md);
opacity: 0.85;
}
.site-footer__social {
display: flex;
justify-content: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--color-rule);
border-radius: 50%;
color: var(--color-charcoal);
transition: background-color 400ms var(--ease-out),
border-color 400ms var(--ease-out),
color 400ms var(--ease-out);
}
.site-footer__social a:hover {
background: var(--color-wine);
border-color: var(--color-wine);
color: var(--color-white);
}
.site-footer__social svg {
width: 16px;
height: 16px;
fill: currentColor;
}
.site-footer__copy {
font-family: var(--font-title);
font-size: 0.72rem;
color: var(--color-muted);
letter-spacing: 0.22em;
text-transform: uppercase;
margin-top: var(--space-md);
} .hero {
position: relative;
height: 100vh;
height: 100dvh;
width: 100%;
overflow: hidden;
background: var(--color-white);
}
.hero__slides {
position: absolute;
inset: 0;
}
.hero__slide {
position: absolute;
inset: 0;
opacity: 0;
animation: heroFade 24s infinite, heroZoom 24s infinite;
background-color: var(--color-white);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
transform-origin: center center;
will-change: opacity, transform;
}
.hero__slide:nth-child(1) { animation-delay: 0s, 0s; }
.hero__slide:nth-child(2) { animation-delay: 8s, 8s; }
.hero__slide:nth-child(3) { animation-delay: 16s, 16s; }
@keyframes heroFade {
0%   { opacity: 0; }
8%   { opacity: 1; }
33%  { opacity: 1; }
41%  { opacity: 0; }
100% { opacity: 0; }
} @keyframes heroZoom {
0%     { transform: scale(1.05); }
41%    { transform: scale(1.15); }
41.01% { transform: scale(1.05); }
100%   { transform: scale(1.05); }
} @media (max-width: 640px) {
@keyframes heroZoom {
0%     { transform: scale(1.10); }
41%    { transform: scale(1.22); }
41.01% { transform: scale(1.10); }
100%   { transform: scale(1.10); }
}
} .hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top,
rgba(30, 20, 20, 0.65) 0%,
rgba(30, 20, 20, 0.40) 30%,
rgba(30, 20, 20, 0) 60%
);
pointer-events: none;
}
.hero__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--space-lg) 0 var(--space-lg);
color: var(--color-white);
}
.hero__content-inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
align-items: end;
} .hero__identity {
text-align: left;
padding: 0;
color: var(--color-white);
animation: heroIdentityFadeIn 1400ms var(--ease-out) 200ms both;
}
.hero__identity-name {
font-family: var(--font-title);
font-size: clamp(1.9rem, 4.2vw + 0.6rem, 4.25rem);
font-weight: 500;
letter-spacing: 0.06em;
line-height: 1.05;
text-transform: none;
margin: 0 0 0.35em;
color: var(--color-white);
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
.hero__identity-name span {
display: block;
}
.hero__identity-rule {
display: block;
width: 64px;
height: 1px;
background: var(--color-gold);
margin: 0.9em 0 1.1em;
opacity: 0.9;
}
.hero__identity-role {
display: block;
font-family: var(--font-title);
font-size: clamp(0.78rem, 0.9vw + 0.3rem, 1rem);
font-weight: 500;
letter-spacing: 0.55em;
text-transform: uppercase;
color: var(--color-gold);
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
padding-left: 0.3em;
}
@keyframes heroIdentityFadeIn {
from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: translateY(0); }
}
.hero__tagline {
text-align: left;
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.05rem, 1.2vw + 0.4rem, 1.35rem);
color: var(--color-white);
opacity: 0.92;
margin: 0 0 var(--space-sm);
max-width: 520px;
letter-spacing: 0.02em;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
line-height: 1.4;
}
.hero__secondary {
text-align: left;
}
.hero__categories {
list-style: none;
padding: 0;
margin: 0 0 var(--space-md);
display: flex;
flex-wrap: wrap;
justify-content: flex-start; gap: 2px 14px; font-size: 0.75rem; 
}
.hero__categories a {
display: inline-block;
font-family: var(--font-title);
font-size: clamp(0.75rem, 1vw, 0.9rem);
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-white);
padding: 0.3rem 0;
position: relative;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.hero__categories a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--color-gold);
transform: scaleX(0);
transform-origin: right;
transition: transform 600ms var(--ease-out);
}
.hero__categories a:hover { color: var(--color-gold); }
.hero__categories a:hover::after {
transform: scaleX(1);
transform-origin: left;
}
.hero__social {
display: flex;
justify-content: flex-start;
gap: var(--space-sm);
margin-top: var(--space-md);
} @media (min-width: 900px) {
.hero__content-inner {
grid-template-columns: minmax(280px, 1fr) minmax(0, 1fr);
gap: var(--space-xl);
}
.hero__content { padding-bottom: var(--space-xl); }
.hero__secondary {
justify-self: end;
max-width: 520px;
text-align: right;
}
.hero__secondary .hero__tagline { text-align: right; margin-left: auto; }
.hero__categories { justify-content: flex-end; }
.hero__social { justify-content: flex-end; }
}
.hero__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
color: var(--color-white);
transition: background-color 400ms var(--ease-out),
border-color 400ms var(--ease-out),
color 400ms var(--ease-out);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hero__social a:hover {
background: var(--color-gold);
border-color: var(--color-gold);
color: var(--color-charcoal);
}
.hero__social svg {
width: 18px;
height: 18px;
fill: currentColor;
} .about {
padding: calc(var(--header-height) + var(--space-sm)) 0 var(--space-lg);
font-size: 1.22rem;
line-height: 1.75;
} .about__intro {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
max-width: 1280px;
margin: 0 auto var(--space-lg);
align-items: center;
position: relative;
}
.about__intro-heading {
position: relative;
text-align: left;
padding: 0;
}
.about__intro-eyebrow {
display: block;
font-family: var(--font-title);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.45em;
text-transform: uppercase;
color: var(--color-gold);
margin-bottom: var(--space-sm);
}
.about__intro-heading h1 {
text-align: left;
margin: 0 0 var(--space-md);
line-height: 1.05;
}
.about__intro-heading h1::after {
content: '';
display: block;
width: 64px;
height: 1px;
background: var(--color-gold);
margin: var(--space-md) 0 0;
}
.about__quote {
font-family: var(--font-body);
font-style: italic;
font-size: clamp(1.4rem, 1.6vw + 0.6rem, 2rem);
line-height: 1.35;
color: var(--color-wine);
margin: var(--space-md) 0 0;
padding: 0;
position: relative;
font-weight: 500;
}
.about__quote::before {
content: '';
display: block;
width: 36px;
height: 2px;
background: var(--color-wine);
margin: 0 0 var(--space-sm);
opacity: 0.6;
}
.about__portrait {
position: relative;
padding: 18px;
margin: 0;
}
.about__portrait img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
display: block;
}
.about__portrait::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 90px; height: 90px;
border-top: 1px solid var(--color-gold);
border-left: 1px solid var(--color-gold);
pointer-events: none;
}
.about__portrait::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 90px; height: 90px;
border-bottom: 1px solid var(--color-gold);
border-right: 1px solid var(--color-gold);
pointer-events: none;
} .about__bio {
max-width: 780px;
margin: var(--space-lg) auto var(--space-md);
font-size: 1.22rem;
line-height: 1.8;
} .about__section--with-image {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
align-items: center;
max-width: 1180px;
}
.about__section-figure {
position: relative;
padding: 14px;
margin: 0;
}
.about__section-figure img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
display: block;
transition: transform 900ms var(--ease-out);
}
.about__section-figure:hover img {
transform: scale(1.02);
}
.about__section-figure::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 60px; height: 60px;
border-top: 1px solid var(--color-gold);
border-left: 1px solid var(--color-gold);
pointer-events: none;
}
.about__section-figure::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 60px; height: 60px;
border-bottom: 1px solid var(--color-gold);
border-right: 1px solid var(--color-gold);
pointer-events: none;
}
.about__section-caption {
display: block;
margin-top: var(--space-sm);
text-align: center;
font-family: var(--font-title);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-muted);
}
.about__section-body {
min-width: 0;
} .about__section--with-image .about__section-title {
text-align: left;
}
.about__section--with-image .about__section-title::after {
left: 0;
transform: none;
}
.about__section--with-image .about__list {
margin-left: 0;
}
@media (min-width: 768px) {
.about__section--with-image {
grid-template-columns: 5fr 6fr;
gap: var(--space-lg);
} .about__section--reverse .about__section-figure {
order: 2;
}
.about__section--reverse .about__section-body {
order: 1;
}
}
.about__bio p {
margin-bottom: 1.2em;
}
.about__bio p:first-child::first-letter {
font-family: var(--font-title);
font-size: 5em;
float: left;
line-height: 0.85;
margin: 0.08em 0.14em -0.05em 0;
color: var(--color-wine);
font-weight: 600;
} .about__bio p:nth-child(2) {
font-size: 1.4em;
line-height: 1.5;
font-style: italic;
color: var(--color-wine-dark);
padding: var(--space-sm) 0 var(--space-sm) var(--space-md);
border-left: 2px solid var(--color-gold);
margin: var(--space-md) 0;
max-width: 640px;
} .about__flourish {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
margin: var(--space-xl) auto;
max-width: 200px;
color: var(--color-gold);
opacity: 0.7;
}
.about__flourish::before,
.about__flourish::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-gold);
opacity: 0.5;
}
.about__flourish-dot {
width: 6px;
height: 6px;
background: var(--color-gold);
border-radius: 50%;
display: inline-block;
}
.about__section {
margin: var(--space-xl) auto;
max-width: 960px;
}
.about__section-title {
text-align: center;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
position: relative;
font-size: clamp(1.4rem, 1.8vw + 0.5rem, 2.1rem);
}
.about__section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 1px;
background: var(--color-gold);
}
.about__list {
list-style: none;
padding: 0;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 0 var(--space-lg);
max-width: 860px;
}
.about__list li {
padding: var(--space-sm) 0;
border-bottom: 1px solid var(--color-rule);
text-align: left;
font-size: 1.18rem;
line-height: 1.6;
position: relative;
padding-left: 1.4em;
}
.about__list li::before {
content: '·';
position: absolute;
left: 0.1em;
top: 50%;
transform: translateY(-55%);
color: var(--color-gold);
font-size: 2em;
line-height: 1;
}
.about__footnote {
text-align: center;
margin-top: var(--space-md);
color: var(--color-muted);
font-style: italic;
font-size: 1.08rem;
max-width: 740px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
@media (min-width: 768px) {
.about__intro {
grid-template-columns: 7fr 5fr;
gap: var(--space-xl);
align-items: center;
}
.about__portrait {
max-width: 420px;
justify-self: end;
width: 100%;
}
.about__list {
grid-template-columns: 1fr 1fr;
}
.about__bio {
font-size: 1.28rem;
}
}
@media (min-width: 1200px) {
.about__bio {
font-size: 1.32rem;
}
} .catalog {
padding: calc(var(--header-height) + var(--space-sm)) 0 var(--space-xl);
}
.catalog__title {
text-align: center;
margin-bottom: var(--space-sm);
padding-bottom: var(--space-md);
position: relative;
}
.catalog__title::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--color-gold);
}
.catalog__description {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-xl);
color: var(--color-muted);
font-style: italic;
font-size: 1.05rem;
}
.catalog__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg) var(--space-md);
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 640px) {
.catalog__grid {
grid-template-columns: 1fr 1fr;
gap: var(--space-xl) var(--space-md);
}
}
@media (min-width: 1024px) {
.catalog__grid { grid-template-columns: 1fr 1fr 1fr; }
}
.product-card {
text-align: center;
position: relative;
background: var(--color-bg-soft);
padding: var(--space-sm) var(--space-sm) var(--space-md);
transition: background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.product-card:hover {
background: #f2f2f2;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.product-card__link {
display: block;
color: inherit;
}
.product-card__image {
position: relative;
aspect-ratio: 4 / 5;
margin-bottom: var(--space-sm);
background: var(--color-white);
padding: 0;
} .product-card__image::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3px;
background-image: linear-gradient(
90deg,
var(--color-wine) 0%,
var(--color-wine-dark) 28%,
var(--color-gold) 50%,
var(--color-wine-dark) 72%,
var(--color-wine) 100%
);
background-size: 200% 100%;
animation: productBorderShift 16s ease-in-out infinite;
pointer-events: none;
z-index: 2;
}
@keyframes productBorderShift {
0%, 100% { background-position: 0% 50%; }
50%      { background-position: 100% 50%; }
}
.product-card__image-inner {
position: relative;
width: 100%;
height: 100%;
background: var(--color-white);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.product-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
padding: var(--space-sm);
transition: transform 900ms var(--ease-out);
}
.product-card:hover .product-card__image img {
transform: scale(1.035);
}
.product-card__title {
font-family: var(--font-title);
font-size: clamp(0.92rem, 1.1vw + 0.3rem, 1.1rem);
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: var(--space-xs);
font-weight: 500;
line-height: 1.3;
}
.product-card__cta {
display: inline-block;
font-family: var(--font-title);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-wine);
padding: 0.4em 0 0.3em;
position: relative;
}
.product-card__cta::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 1px;
background: var(--color-wine);
transform: scaleX(0);
transform-origin: right;
transition: transform 500ms var(--ease-out), background-color 400ms var(--ease-out);
}
.product-card:hover .product-card__cta {
color: var(--color-gold);
}
.product-card:hover .product-card__cta::after {
transform: scaleX(1);
transform-origin: left;
background: var(--color-gold);
} .woocommerce-pagination,
.catalog__pagination {
margin-top: var(--space-xl);
text-align: center;
}
.woocommerce-pagination ul.page-numbers,
.catalog__pagination .page-numbers {
list-style: none;
display: inline-flex;
gap: var(--space-sm);
padding: 0;
margin: 0;
}
.woocommerce-pagination li {
display: inline-block;
border: 0;
margin: 0;
}
.woocommerce-pagination .page-numbers {
font-family: var(--font-title);
font-size: 0.85rem;
letter-spacing: 0.18em;
padding: 0.5em 0.9em;
color: var(--color-muted);
transition: color 300ms var(--ease-out);
background: transparent;
border: 0;
}
.woocommerce-pagination .page-numbers.current {
color: var(--color-wine);
border-bottom: 1px solid var(--color-wine);
}
.woocommerce-pagination .page-numbers:hover {
color: var(--color-charcoal);
} .single-artwork {
padding-top: calc(var(--header-height) + var(--space-xs));
padding-bottom: var(--space-md);
background: var(--color-white);
}
.single-artwork__back {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-family: var(--font-title);
font-size: 0.76rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: var(--space-sm);
padding: 0.3em 0;
transition: color 300ms var(--ease-out);
}
.single-artwork__back::before {
content: '';
display: inline-block;
width: 28px;
height: 1px;
background: currentColor;
transition: width 400ms var(--ease-out);
}
.single-artwork__back:hover {
color: var(--color-wine);
}
.single-artwork__back:hover::before { width: 40px; }
.single-artwork__layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
align-items: start;
}
.single-artwork__image {
width: 100%;
background: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.single-artwork__image img {
max-width: 100%;
max-height: 70vh;
width: auto;
height: auto;
object-fit: contain;
display: block;
} .single-artwork__media {
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.single-artwork__thumbs {
display: flex;
gap: var(--space-xs);
padding: 0;
margin: 0;
list-style: none;
flex-wrap: wrap;
justify-content: center;
}
.single-artwork__thumb {
width: 64px;
height: 64px;
border: 1px solid var(--color-rule);
padding: 2px;
cursor: pointer;
background: var(--color-white);
transition: border-color 300ms var(--ease-out), transform 300ms var(--ease-out);
overflow: hidden;
}
.single-artwork__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single-artwork__thumb:hover,
.single-artwork__thumb.is-active {
border-color: var(--color-wine);
}
.single-artwork__thumb.is-active {
transform: scale(1.04);
}
.single-artwork__info {
padding: var(--space-md);
background: var(--color-white);
box-shadow:
0 2px 0 0 var(--color-gold),
0 18px 40px rgba(86, 26, 28, 0.10),
0 6px 16px rgba(0, 0, 0, 0.06);
border-top: 2px solid var(--color-wine);
}
.single-artwork__title {
font-family: var(--font-title);
font-size: clamp(1.4rem, 1.6vw + 0.8rem, 2.2rem);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-gold);
line-height: 1.25;
font-weight: 500;
color: var(--color-charcoal);
}
.single-artwork__meta {
margin-bottom: var(--space-lg);
}
.single-artwork__meta-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-sm);
padding: var(--space-sm) 0;
border-bottom: 1px dashed var(--color-rule);
font-size: 1.05rem;
line-height: 1.5;
}
.single-artwork__meta-row:last-child { border-bottom: 0; }
.single-artwork__meta-label {
font-family: var(--font-title);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-muted);
flex-shrink: 0;
}
.single-artwork__meta-value {
text-align: right;
font-style: italic;
color: var(--color-charcoal);
}
.single-artwork__cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
width: 100%;
background: var(--color-wine);
color: var(--color-white);
text-align: center;
padding: var(--space-sm) var(--space-md);
font-family: var(--font-title);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
transition: background-color 400ms var(--ease-out);
}
.single-artwork__cta:hover { background: var(--color-wine-dark); }
.single-artwork__cta svg {
width: 18px;
height: 18px;
fill: currentColor;
}
.single-artwork__nav {
display: flex;
justify-content: space-between;
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--color-rule);
font-family: var(--font-title);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.single-artwork__nav a {
color: var(--color-muted);
transition: color 300ms var(--ease-out);
}
.single-artwork__nav a:hover { color: var(--color-wine); }
.single-artwork__nav span { color: transparent; }
@media (min-width: 1024px) {
.single-artwork__layout {
grid-template-columns: 7fr 3fr;
gap: var(--space-lg);
align-items: start;
}
.single-artwork__media {
padding: 0;
}
.single-artwork__image {
padding: 0;
}
.single-artwork__image img {
max-height: calc(100vh - var(--header-height) - 80px);
}
.single-artwork__info {
padding: var(--space-md) var(--space-md) var(--space-lg);
max-width: none;
position: sticky;
top: calc(var(--header-height) + var(--space-md));
}
} .contact {
padding: calc(var(--header-height) + var(--space-lg)) 0 var(--space-xl);
position: relative;
overflow: hidden;
} .contact::before {
content: '';
position: absolute;
top: 0;
right: -10%;
width: min(60%, 780px);
height: 100%;
background-image: url(https://diegomartineznegrete.com/wp-content/uploads/fdo-contacto.png);
background-repeat: no-repeat;
background-position: center right;
background-size: contain;
opacity: 0.10;
pointer-events: none;
z-index: 0;
}
.contact .container {
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.contact::before {
right: -25%;
width: 90%;
opacity: 0.07;
}
}
.contact__title {
text-align: center;
margin-bottom: var(--space-sm);
padding-bottom: var(--space-md);
position: relative;
}
.contact__title::after {
content: '';
position: absolute;
bottom: 0; left: 50%;
transform: translateX(-50%);
width: 60px;
height: 1px;
background: var(--color-gold);
}
.contact__intro {
text-align: center;
max-width: 640px;
margin: 0 auto var(--space-xl);
color: var(--color-muted);
font-style: italic;
font-size: 1.05rem;
}
.contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
.contact__side {
padding: var(--space-lg);
background: var(--color-bg-soft);
border: 1px solid var(--color-rule);
text-align: center;
}
.contact__side-title {
font-family: var(--font-title);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--color-gold);
display: inline-block;
}
.contact__whatsapp {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
background: var(--color-wine);
color: var(--color-white);
padding: var(--space-sm) var(--space-md);
font-family: var(--font-title);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
transition: background-color 400ms var(--ease-out);
margin: var(--space-sm) 0;
}
.contact__whatsapp:hover { background: var(--color-wine-dark); }
.contact__whatsapp svg { width: 20px; height: 20px; fill: currentColor; }
.contact__phone {
display: block;
margin-top: var(--space-xs);
font-family: var(--font-body);
font-size: 1.05rem;
font-style: italic;
color: var(--color-charcoal);
}
.contact__info-label {
display: block;
font-family: var(--font-title);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-muted);
margin-top: var(--space-md);
margin-bottom: var(--space-xs);
}
.contact__info {
font-style: normal;
line-height: 1.9;
font-size: 1rem;
} .wpcf7 { }
.wpcf7-form p {
margin-bottom: var(--space-md);
}
.wpcf7-form label {
display: block;
font-family: var(--font-title);
font-size: 0.7rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 0.5em;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 100%;
padding: 0.8em 0;
border: 0;
border-bottom: 1px solid var(--color-rule);
background: transparent;
font-family: var(--font-body);
font-size: 1.05rem;
color: var(--color-text);
transition: border-color 400ms var(--ease-out);
border-radius: 0;
-webkit-appearance: none;
appearance: none;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
outline: 0;
border-bottom-color: var(--color-wine);
}
.wpcf7-form textarea {
min-height: 140px;
resize: vertical;
padding: 0.8em 0;
}
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
display: inline-block;
background: var(--color-wine);
color: var(--color-white);
border: 0;
padding: 0.95em 2.5em;
font-family: var(--font-title);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.25em;
text-transform: uppercase;
cursor: pointer;
transition: background-color 400ms var(--ease-out);
margin-top: var(--space-sm);
width: auto;
-webkit-appearance: none;
appearance: none;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
background: var(--color-wine-dark);
}
.wpcf7-not-valid-tip {
color: var(--color-wine);
font-size: 0.85rem;
font-style: italic;
margin-top: 0.25em;
display: block;
}
.wpcf7-response-output {
margin-top: var(--space-md) !important;
border: 1px solid var(--color-rule) !important;
padding: var(--space-sm) !important;
font-size: 0.95rem !important;
}
@media (min-width: 768px) {
.contact__grid {
grid-template-columns: 7fr 5fr;
gap: var(--space-xl);
}
} .error-404 {
padding: calc(var(--header-height) + var(--space-xl)) 0 var(--space-xl);
text-align: center;
min-height: 70vh;
}
.error-404__code {
font-family: var(--font-title);
font-size: clamp(4rem, 15vw, 10rem);
line-height: 1;
color: var(--color-wine);
letter-spacing: 0.1em;
margin-bottom: var(--space-md);
}
.error-404__back {
display: inline-block;
margin-top: var(--space-md);
font-family: var(--font-title);
font-size: 0.85rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-wine);
border-bottom: 1px solid currentColor;
padding-bottom: 0.2em;
} @media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.hero__slide { opacity: 1; }
.hero__slide:not(:first-child) { display: none; }
}