:root {
--orange:   #A65A3B;
--garnet:   #5E2122;
--sand:     #D7D0C4;
--graphite: #282624;
--blush:    #CEA694;
--stone:    #F5F0E8;
--color-accent:    var(--orange);
--color-accent-lt: var(--sand);
--color-dark:      var(--graphite);
--color-stone:     var(--stone);
--color-stone-alt: #ede8e0;
--color-white:     #fefcf8;
--color-mid:       #4a3f2f;
--color-grey:      #8a7f72;
--color-border:    rgba(74,63,47,0.15);
--font-serif: 'Cormorant Garamond', Georgia, serif;
--font-sans:  'Raleway', system-ui, sans-serif;
--ease:     cubic-bezier(0.25,0.46,0.45,0.94);
--ease-out: cubic-bezier(0.16,1,0.3,1);
--dur:      0.55s;
--gap:      clamp(1rem,3vw,2rem);
--section-pad: clamp(4rem,10vw,9rem);
--header-h: 72px;
} .container {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: clamp(1.5rem, 6vw, 6rem);
padding-right: clamp(1.5rem, 6vw, 6rem);
box-sizing: border-box;
} *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: auto;
}
body {
font-family: var(--font-sans);
background: var(--color-white);
color: var(--color-dark);
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { display: block; max-width: 100%; } #nosotros, #coleccion, #personalizados, #galeria, #proceso, #testimonios, #contacto {
scroll-margin-top: var(--header-h);
} .section-label {
display: inline-flex;
align-items: center;
gap: 0.6rem;
font-family: var(--font-sans);
font-size: 0.68rem; font-weight: 500;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--color-accent);
margin-bottom: 1.2rem;
}
.section-label::before {
content: '';
display: inline-block;
width: 2rem;
height: 1px;
background: currentColor;
opacity: 0.5;
}
.section-title {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 400;
line-height: 1.08;
color: var(--color-dark);
}
.section-title em {
font-style: italic;
color: var(--color-accent);
} .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible {
opacity: 1;
transform: none;
} .site-header {
position: fixed;
top: 0px; left: 0; right: 0;
z-index: 900;
padding: 1.5rem 0;
background: transparent;
transition:
background var(--dur) var(--ease),
backdrop-filter var(--dur) var(--ease),
padding var(--dur) var(--ease),
box-shadow var(--dur) var(--ease);
}
.site-header.scrolled {
background: rgba(254,252,248,0.82);
backdrop-filter: blur(18px) saturate(1.6);
-webkit-backdrop-filter: blur(18px) saturate(1.6);
padding: 0.85rem 0;
box-shadow: 0 1px 0 var(--color-border);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
} .site-logo {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
text-decoration: none;
z-index: 910;
display: inline-block;
}
.logo-sill {
color: #ffffff;
transition: color var(--dur) var(--ease);
}
.logo-art { color: var(--orange); }
.site-header.scrolled .logo-sill { color: var(--graphite); } .main-nav {
display: flex;
align-items: center;
gap: 2.5rem;
}
.main-nav a {
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
position: relative;
text-decoration: none;
transition: color var(--dur) var(--ease);
}
.main-nav a::after {
content: '';
position: absolute;
bottom: -4px; left: 0;
width: 0; height: 1px;
background: #ffffff;
transition: width var(--dur) var(--ease);
}
.main-nav a:hover { color: #ffffff; }
.main-nav a:hover::after { width: 100%; }
.site-header.scrolled .main-nav a { color: rgba(40,38,36,0.8); }
.site-header.scrolled .main-nav a:hover { color: var(--graphite); }
.site-header.scrolled .main-nav a::after { background: var(--graphite); } .nav-toggle {
display: none;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
cursor: pointer;
padding: 0;
z-index: 910;
flex-direction: column;
gap: 5px;
transition: background 0.3s, border-color 0.3s;
}
.nav-toggle:hover {
background: rgba(255,255,255,0.25);
}
.site-header.scrolled .nav-toggle {
background: rgba(40,38,36,0.08);
border-color: rgba(40,38,36,0.2);
}
.nav-toggle span {
display: block;
width: 18px; height: 1.5px;
background: #ffffff;
border-radius: 2px;
transition: transform var(--dur) var(--ease), opacity var(--dur), background var(--dur);
}
.site-header.scrolled .nav-toggle span { background: var(--graphite); }
.nav-toggle.active span { background: #282624 !important; }
.nav-toggle.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .mobile-nav {
position: fixed;
top: 0; right: 0; bottom: 0;
width: 100%;
max-width: 100%;
background: #F5F0E8;
z-index: 850;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 0;
height: auto;
bottom: auto;
padding: 4.5rem 2rem 1.5rem;
transform: translateX(100%) translateZ(0);
transition: transform 0.4s var(--ease-out);
box-shadow: -4px 0 40px rgba(40,38,36,0.15);
will-change: transform;
}
.mobile-nav.open { transform: translateX(0) translateZ(0); }
.mobile-nav a {
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 300;
color: var(--graphite);
letter-spacing: 0.02em;
padding: 0.7rem 0;
border-bottom: 1px solid rgba(74,63,47,0.08);
transition: color 0.3s, padding-left 0.3s;
display: block;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { color: var(--orange); padding-left: 0.5rem; }
.mobile-nav-overlay {
position: fixed; inset: 0;
background: rgba(40,38,36,0.45);
z-index: 840;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.mobile-nav-overlay.active { opacity: 1; pointer-events: all; } .hero {
position: relative;
height: 100svh;
min-height: 600px;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
position: absolute; inset: 0;
opacity: 0;
will-change: opacity;
}
.hero-slide.active { opacity: 1; }
.hero-slide img {
width: 100%; height: 100%;
object-fit: cover;
object-position: center center;
transform: scale(1.12);
transform-origin: center center;
transition: transform 0s;
will-change: transform;
}
.hero-slide.kb-active img {
transform: scale(1);
transition: transform 9s cubic-bezier(0.25,0.46,0.45,0.94);
}
.hero::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
to top,
rgba(15,12,8,0.82) 0%,
rgba(15,12,8,0.38) 50%,
rgba(15,12,8,0.12) 100%
);
pointer-events: none;
z-index: 2;
} .hero-dust {
position: absolute; inset: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 3;
opacity: 0.7;
}
.hero-content {
position: relative;
z-index: 4;
width: 100%;
padding-bottom: clamp(3.5rem, 9vh, 6.5rem);
} .hero-eyebrow {
display: flex;
align-items: center;
gap: 0.75rem;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
margin-bottom: 1.4rem;
}
.hero-eyebrow-line {
display: inline-block;
width: 2.5rem; height: 1px;
background: rgba(255,255,255,0.4);
flex-shrink: 0;
} .hero-heading {
font-family: var(--font-serif);
font-size: clamp(2.8rem, 6.5vw, 5.2rem); font-weight: 400; line-height: 1.04;
color: #ffffff;
max-width: 12ch;
margin: 0;
}
.hero-heading-sand {
color: var(--sand);
font-style: normal;
}
.hero-heading-sand em { font-style: italic; }
.hero-heading-dot { color: var(--orange); font-style: normal; } .hero-subtext {
font-family: var(--font-sans);
font-size: clamp(0.82rem, 1.3vw, 0.95rem); font-weight: 300;
color: rgba(255,255,255,0.72);
max-width: 52ch;
line-height: 1.65;
margin-top: 1.4rem;
} .hero-ctas {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2.2rem;
}
.btn-hero-primary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.8rem;
background: #ffffff;
color: var(--graphite);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid #ffffff;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-hero-primary:hover {
background: var(--orange);
border-color: var(--orange);
color: #ffffff;
}
.btn-hero-glass {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 1.8rem;
background: rgba(255,255,255,0.10);
color: rgba(255,255,255,0.88);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
border: 1px solid rgba(255,255,255,0.28);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-hero-glass:hover {
background: rgba(255,255,255,0.22);
border-color: rgba(255,255,255,0.55);
} .hero-slide-label {
position: absolute;
bottom: 2.2rem; left: 0; right: 0;
z-index: 4;
pointer-events: none;
}
.hero-slide-label-line {
display: inline-block;
width: 2rem; height: 1px;
background: rgba(255,255,255,0.35);
vertical-align: middle;
margin-right: 0.7rem;
}
.hero-slide-label-text {
font-family: var(--font-sans);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
vertical-align: middle;
transition: opacity 0.4s var(--ease);
} .hero-scroll-hint {
position: absolute;
bottom: 2rem; right: 2.5rem;
z-index: 4;
writing-mode: vertical-rl;
font-family: var(--font-sans);
font-size: 0.6rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255,255,255,0.4);
display: flex;
align-items: center;
gap: 0.75rem;
}
.hero-scroll-hint::after {
content: '';
display: block;
width: 1px; height: 40px;
background: rgba(255,255,255,0.22);
animation: scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine {
0%,100% { opacity: 0.3; transform: scaleY(1); }
50%      { opacity: 1;   transform: scaleY(0.6); }
} .marquee-section {
background: #faf7f2;
overflow: hidden;
padding: 1.1rem 0;
border-top: 1px solid rgba(40,38,36,0.08);
border-bottom: 1px solid rgba(40,38,36,0.08);
}
.marquee-track {
display: flex;
width: max-content;
animation: marqueeScroll 28s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
0%   { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.marquee-item {
display: flex;
align-items: center;
white-space: nowrap;
}
.marquee-text {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 2.4rem;
font-weight: 400;
font-style: italic;
letter-spacing: 0.08em;
color: #282624;
padding: 0 1.2rem;
}
.marquee-sep {
color: #A65A3B;
font-size: 0.9rem;
line-height: 1;
} .nosotros {
padding: var(--section-pad) 0;
background: var(--color-white);
}
.nosotros-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: center;
}
.nosotros-image-wrap {
position: relative;
}
.nosotros-image-wrap img {
width: 100%;
height: clamp(400px, 55vw, 620px);
object-fit: cover;
position: relative; z-index: 1;
}
.nosotros-image-wrap::before {
content: '';
position: absolute;
top: -1.5rem; left: -1.5rem;
right: 1.5rem; bottom: 1.5rem;
border: 1px solid var(--color-border);
pointer-events: none; z-index: 0;
}
.nosotros-caption {
position: absolute;
bottom: 1.5rem; left: 1.5rem;
z-index: 2;
background: var(--color-dark);
color: rgba(255,255,255,0.75);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 0.55rem 1rem;
}
.nosotros-body {
font-family: var(--font-serif);
font-size: clamp(0.95rem, 1.6vw, 1.1rem);
font-weight: 400;
line-height: 1.85;
color: var(--color-mid);
margin-top: 1.5rem;
}
.nosotros-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid var(--color-border);
}
.stat-num {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 300;
color: var(--color-accent);
line-height: 1;
display: block;
}
.stat-label {
font-size: 0.62rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--color-grey);
margin-top: 0.4rem;
display: block;
} .coleccion {
padding: var(--section-pad) 0;
background: var(--color-stone);
}
.coleccion-header {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
column-gap: clamp(3rem, 6vw, 8rem);
text-align: left;
margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.coleccion-header .section-title { max-width: none; margin-inline: 0; }
.coleccion-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--color-border);
border: 1px solid var(--color-border);
}
.col-card {
position: relative;
overflow: hidden;
background: var(--color-stone);
aspect-ratio: 4 / 5;
cursor: pointer;
}
.col-card img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.9s var(--ease);
}
.col-card:hover img { transform: scale(1.05); }
.col-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(15,12,8,0.72) 0%, transparent 55%);
opacity: 0.7;
transition: opacity var(--dur);
}
.col-card:hover .col-card-overlay { opacity: 1; }
.col-card-info {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 1.5rem;
z-index: 1;
}
.col-card-num {
font-size: 0.6rem;
letter-spacing: 0.2em;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
display: block;
margin-bottom: 0.4rem;
}
.col-card-title {
font-family: var(--font-serif);
font-size: 1.2rem;
font-weight: 400;
color: var(--color-white);
line-height: 1.2;
}
.col-card-sub {
font-size: 0.68rem;
color: rgba(255,255,255,0.55);
margin-top: 0.3rem;
font-style: italic;
display: block;
} .personalizados {
padding: var(--section-pad) 0;
background: var(--color-dark);
color: var(--color-stone);
}
.personalizados-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: center;
}
.personalizados-text .section-label { color: var(--color-accent-lt); }
.personalizados-text .section-title { color: var(--color-stone); }
.personalizados-body {
font-family: var(--font-serif);
font-size: clamp(0.95rem, 1.6vw, 1.05rem);
font-weight: 300;
line-height: 1.85;
color: rgba(245,240,232,0.72);
margin-top: 1.5rem;
}
.personalizados-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 2rem;
margin-top: 2rem;
}
.personalizados-list li {
font-size: 0.78rem;
letter-spacing: 0.08em;
color: rgba(245,240,232,0.65);
padding-left: 1.1rem;
position: relative;
}
.personalizados-list li::before {
content: '—';
position: absolute; left: 0;
color: var(--color-accent);
}
.personalizados-cta { margin-top: 2.5rem; }
.btn-accent {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.95rem 2.2rem;
background: var(--color-accent);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
border: 1px solid var(--color-accent);
transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.btn-accent:hover {
background: transparent;
color: var(--color-accent-lt);
border-color: var(--color-accent-lt);
}
.personalizados-image-wrap {
position: relative;
}
.personalizados-image-wrap img {
width: 100%;
height: clamp(400px, 55vw, 600px);
object-fit: cover;
}
.personalizados-image-wrap::after {
content: '';
position: absolute;
bottom: -1.5rem; right: -1.5rem;
width: 50%; height: 50%;
border-right: 1px solid var(--color-accent);
border-bottom: 1px solid var(--color-accent);
pointer-events: none;
} .galeria {
padding: var(--section-pad) 0;
background: var(--color-white);
}
.galeria-header { margin-bottom: clamp(2rem, 4vw, 4rem); }
.galeria-header .section-title { max-width: 20ch; }
.galeria-subtext {
font-size: 0.82rem;
color: var(--color-grey);
margin-top: 0.75rem;
font-style: italic;
}
.galeria-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.galeria-grid .galeria-item:first-child {
grid-column: span 2;
grid-row: span 2;
aspect-ratio: auto;
}
.galeria-item {
position: relative;
overflow: hidden;
aspect-ratio: 1;
cursor: zoom-in;
}
.galeria-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.8s var(--ease);
}
.galeria-item:hover img { transform: scale(1.06); }
.galeria-item-info {
position: absolute; inset: 0;
background: rgba(15,12,8,0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: background var(--dur);
}
.galeria-item:hover .galeria-item-info { background: rgba(15,12,8,0.45); }
.galeria-item-info span {
font-family: var(--font-serif);
font-size: 1rem;
color: var(--color-white);
opacity: 0;
transform: translateY(8px);
transition: opacity var(--dur), transform var(--dur);
}
.galeria-item-info .galeria-item-num {
font-family: var(--font-sans);
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
margin-bottom: 0.3rem;
}
.galeria-item:hover .galeria-item-info span { opacity: 1; transform: none; } .lightbox {
position: fixed; inset: 0;
background: rgba(10,8,5,0.95);
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.lightbox.open { display: flex; }
.lightbox-inner {
position: relative;
max-width: min(92vw, 900px);
width: 100%;
}
.lightbox-inner img {
width: 100%;
max-height: 85vh;
object-fit: contain;
}
.lightbox-caption {
margin-top: 1rem;
text-align: center;
font-family: var(--font-serif);
font-size: 0.9rem;
color: rgba(255,255,255,0.55);
font-style: italic;
}
.lightbox-close {
position: absolute;
top: -2.5rem; right: 0;
background: none; border: none;
color: rgba(255,255,255,0.7);
font-size: 1.4rem;
cursor: pointer;
transition: color 0.3s;
line-height: 1;
}
.lightbox-close:hover { color: var(--color-white); }
.lightbox-prev,
.lightbox-next {
position: absolute;
top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.8);
width: 2.8rem; height: 2.8rem;
display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 1.1rem;
transition: background 0.3s, color 0.3s;
}
.lightbox-prev { left: -3.5rem; }
.lightbox-next { right: -3.5rem; }
.lightbox-prev:hover,
.lightbox-next:hover {
background: rgba(255,255,255,0.18);
color: var(--color-white);
} .proceso {
padding: var(--section-pad) 0;
background: var(--color-stone-alt);
}
.proceso-header {
text-align: center;
margin-bottom: clamp(3rem, 6vw, 5rem);
}
.proceso-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
position: relative;
}
.proceso-steps::before {
content: '';
position: absolute;
top: 2rem;
left: calc(12.5% + 1rem);
right: calc(12.5% + 1rem);
height: 1px;
background: var(--color-border);
}
.proceso-step { text-align: center; padding-top: 1rem; }
.proceso-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem; height: 4rem;
border: 1px solid var(--color-border);
background: var(--color-stone);
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 300;
color: var(--color-accent);
margin-bottom: 1.5rem;
position: relative; z-index: 1;
transition: background var(--dur), border-color var(--dur);
}
.proceso-step:hover .proceso-step-num {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
}
.proceso-step-title {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 400;
color: var(--color-dark);
margin-bottom: 0.75rem;
}
.proceso-step-text {
font-size: 0.8rem;
color: var(--color-grey);
line-height: 1.7;
} .testimonios {
padding: var(--section-pad) 0;
background: var(--color-white);
overflow: hidden;
}
.testimonios-header {
text-align: center;
margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.testimonios-slider {
position: relative;
max-width: 800px;
margin-inline: auto;
}
.testimonios-track { overflow: hidden; }
.testimonios-slides {
display: flex;
transition: transform 0.7s var(--ease-out);
}
.testimonio-slide {
min-width: 100%;
padding: 2rem;
text-align: center;
}
.testimonio-quote {
font-family: var(--font-serif);
font-size: clamp(1rem, 2vw, 1.28rem);
font-weight: 300;
font-style: italic;
line-height: 1.75;
color: var(--color-mid);
position: relative;
padding: 0 1.5rem;
}
.testimonio-quote::before {
content: '"';
position: absolute;
top: -1.5rem; left: 0;
font-family: var(--font-serif);
font-size: 5rem;
font-style: italic;
color: var(--color-accent);
opacity: 0.2;
line-height: 1;
}
.testimonio-author { margin-top: 2rem; }
.author-initials {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem; height: 3rem;
background: var(--color-accent);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 500;
letter-spacing: 0.05em;
border-radius: 50%;
margin-bottom: 0.75rem;
}
.author-name {
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 500;
color: var(--color-dark);
letter-spacing: 0.05em;
display: block;
}
.author-role {
font-size: 0.7rem;
color: var(--color-grey);
font-style: italic;
display: block;
margin-top: 0.2rem;
}
.testimonios-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 2.5rem;
}
.slider-counter {
font-size: 0.65rem;
letter-spacing: 0.15em;
color: var(--color-grey);
}
.slider-btn {
width: 2.4rem; height: 2.4rem;
border: 1px solid var(--color-border);
background: transparent;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--color-mid);
font-size: 1rem;
transition: background var(--dur), border-color var(--dur), color var(--dur);
}
.slider-btn:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
} .contacto {
padding: var(--section-pad) 0;
background: var(--color-stone);
}
.contacto-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: start;
}
.contacto-text .section-title { max-width: 18ch; }
.contacto-subtext {
font-size: 0.88rem;
color: var(--color-grey);
margin-top: 1rem;
line-height: 1.7;
}
.contacto-info {
margin-top: 3rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.contacto-info-item {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.info-label {
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-accent);
font-weight: 500;
}
.info-value {
font-family: var(--font-serif);
font-size: 0.95rem;
color: var(--color-mid);
}
.contacto-social {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.social-link {
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-grey);
border-bottom: 1px solid var(--color-border);
padding-bottom: 1px;
transition: color var(--dur), border-color var(--dur);
}
.social-link:hover { color: var(--color-accent); border-color: var(--color-accent); } .wpcf7-form .form-row { margin-bottom: 1.25rem; }
.wpcf7-form label {
display: block;
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-grey);
margin-bottom: 0.5rem;
font-weight: 500;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--color-border);
padding: 0.7rem 0;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 300;
color: var(--color-dark);
outline: none;
transition: border-color var(--dur);
appearance: none;
border-radius: 0;
}
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus { border-color: var(--color-accent); }
.wpcf7-form textarea { resize: vertical; min-height: 110px; }
.wpcf7-form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a7f72' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.25rem center;
padding-right: 1.5rem;
}
.wpcf7-form input[type="submit"] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.95rem 2.5rem;
background: var(--color-dark);
color: var(--color-white);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border: 1px solid var(--color-dark);
cursor: pointer;
transition: background var(--dur), color var(--dur), border-color var(--dur);
margin-top: 1.5rem;
width: auto;
}
.wpcf7-form input[type="submit"]:hover {
background: var(--color-accent);
border-color: var(--color-accent);
}
.wpcf7-spinner { display: none !important; }
.wpcf7 .wpcf7-response-output {
margin: 1rem 0 0;
padding: 0.75rem 1rem;
font-size: 0.8rem;
border: none;
border-left: 3px solid var(--color-accent);
}
.wpcf7-not-valid-tip {
font-size: 0.7rem;
color: #c0392b;
margin-top: 0.25rem;
}
.whatsapp-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1.25rem;
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--color-grey);
text-transform: lowercase;
transition: color var(--dur);
}
.whatsapp-link:hover { color: #25d366; }
.contacto-image-wrap { margin-top: 3rem; position: relative; }
.contacto-image-wrap img {
width: 100%; height: 280px;
object-fit: cover;
object-position: center 30%;
} .site-footer {
background: var(--color-dark);
color: rgba(245,240,232,0.55);
padding: clamp(3rem, 6vw, 5rem) 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: clamp(2rem, 4vw, 5rem);
padding-bottom: 3rem;
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.footer-brand .site-logo {
color: var(--color-stone);
font-size: 1.35rem;
display: inline-block;
margin-bottom: 1rem;
}
.footer-brand p {
font-size: 0.82rem;
line-height: 1.7;
max-width: 30ch;
}
.footer-col-title {
font-size: 0.6rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--color-accent);
font-weight: 500;
margin-bottom: 1.25rem;
display: block;
}
.footer-nav {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.footer-nav a {
font-size: 0.82rem;
color: rgba(245,240,232,0.55);
transition: color var(--dur);
}
.footer-nav a:hover { color: var(--color-stone); }
.footer-contact-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.footer-contact-list li { font-size: 0.82rem; }
.footer-contact-list a {
color: rgba(245,240,232,0.55);
transition: color var(--dur);
}
.footer-contact-list a:hover { color: var(--color-accent-lt); }
.footer-social {
display: flex;
gap: 1rem;
margin-top: 0.75rem;
}
.footer-social a {
font-size: 0.62rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(245,240,232,0.4);
border-bottom: 1px solid rgba(245,240,232,0.15);
padding-bottom: 1px;
transition: color var(--dur), border-color var(--dur);
}
.footer-social a:hover {
color: var(--color-accent-lt);
border-color: var(--color-accent-lt);
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
padding-top: 1.75rem;
}
.footer-copyright {
font-size: 0.7rem;
color: rgba(245,240,232,0.3);
letter-spacing: 0.05em;
}
.footer-made {
font-size: 0.7rem;
color: rgba(245,240,232,0.3);
font-style: italic;
} .back-to-top {
position: fixed;
bottom: 2rem; right: 2rem;
width: 2.8rem; height: 2.8rem;
background: var(--color-dark);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.7);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem;
cursor: pointer;
z-index: 500;
opacity: 0;
transform: translateY(12px);
transition: opacity var(--dur), transform var(--dur), background var(--dur);
text-decoration: none;
}
.back-to-top.visible { opacity: 1; transform: none; }
.back-to-top:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: var(--color-white);
} @media (max-width: 1024px) {
.coleccion-grid { grid-template-columns: repeat(2, 1fr); }
.proceso-steps { grid-template-columns: repeat(2, 1fr); }
.proceso-steps::before { display: none; }
}
@media (max-width: 768px) {
.main-nav { display: none; }
.nav-toggle { display: flex; }
.hero-scroll-hint { display: none; }
.nosotros-grid,
.personalizados-grid,
.contacto-grid { grid-template-columns: 1fr; }
.personalizados-image-wrap::after { display: none; }
.nosotros-image-wrap::before { display: none; }
.coleccion-grid { grid-template-columns: 1fr; }
.galeria-grid { grid-template-columns: repeat(2, 1fr); }
.galeria-grid .galeria-item:first-child {
grid-column: span 2;
aspect-ratio: 16/9;
}
.proceso-steps {
grid-template-columns: 1fr;
max-width: 320px;
margin-inline: auto;
}
.footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.footer-bottom { flex-direction: column; text-align: center; }
.lightbox-prev,
.lightbox-next { display: none; }
.nosotros-stats { grid-template-columns: repeat(3, 1fr); }
.stat-num { font-size: 1.8rem; }
.logo-sill { color: #282624; }
.site-header.scrolled .logo-sill { color: #282624; }
}
@media (max-width: 480px) {
.hero-ctas { flex-direction: column; align-items: flex-start; }
.btn-hero-primary,
.btn-hero-glass { width: 100%; justify-content: center; }
.galeria-grid { grid-template-columns: 1fr; }
.galeria-grid .galeria-item:first-child {
grid-column: 1;
aspect-ratio: 4/3;
}
.nosotros-stats { grid-template-columns: 1fr; gap: 1.25rem; }
.personalizados-list { grid-template-columns: 1fr; }
.testimonio-quote { padding: 0; }
.back-to-top { bottom: 1.25rem; right: 1.25rem; }
} @media (max-width: 768px) {
.hero-slide img {
will-change: auto;
transform: none !important;
transition: none !important;
}
.hero-dust { display: none; }
.marquee-track { animation-duration: 40s; }
* { -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
.reveal { opacity: 1; transform: none; }
* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}