@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(assets/fonts/archivo-latin.woff2?v=e3a28ead) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color-bg:#fbf5f7;--color-bg-2:#f5e2e8;--color-primary:#d83f79;--color-primary-d:#ad3261;--color-secondary:#d8f068;--color-light:#2a1018;--color-lime-ink:#4d6310;--color-bg-rgb:251,245,247;--color-text-rgb:42,16,24;--color-primary-rgb:216,63,121;--color-text:var(--color-light);--color-text-soft:rgba(var(--color-text-rgb),0.720);--color-text-muted:rgba(var(--color-text-rgb),0.616);--color-text-faint:rgba(var(--color-text-rgb),0.479);--color-line:rgba(var(--color-text-rgb),0.14);--color-line-2:rgba(var(--color-text-rgb),0.28);--color-surface:rgba(var(--color-text-rgb),0.04);--color-surface-2:rgba(var(--color-text-rgb),0.07);--color-on-primary:#000000;--color-on-secondary:#000000;--color-on-light:#fbf5f7;--color-primary-readable:#ad3261;--color-primary-on-dim:#a22f5b;--color-primary-dim:rgba(var(--color-primary-rgb),0.14);--color-secondary-dim:rgba(216,240,104,0.14);--font-display:'Archivo','Helvetica Neue',Arial,sans-serif;--font-body:'Archivo','Helvetica Neue',Arial,sans-serif;--size-xs:13px;--size-sm:15px;--size-base:17px;--size-lg:20px;--size-xl:26px;--lh-body:1.65;--lh-tight:1.02;--sp-xs:8px;--sp-sm:16px;--sp-md:32px;--sp-lg:64px;--sp-xl:120px;--sp-2xl:180px;--r-sm:4px;--r-md:10px;--r-lg:22px;--r-pill:100px;--ease:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.55,.055,.675,.19);--duration:0.38s}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}html{overflow-x:hidden;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{max-width:100vw;overflow-x:hidden;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:var(--size-base);line-height:var(--lh-body);font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
opacity: 0.035;
pointer-events: none;
z-index: 9998;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 3px;
border-radius: 3px;
}
.skip-link {
position: absolute;
top: -100%;
left: 16px;
background: var(--color-secondary);
color: var(--color-on-secondary);
padding: 10px 18px;
border-radius: var(--r-sm);
font-weight: 800;
z-index: 10000;
}
.skip-link:focus { top: 16px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: var(--lh-tight);
letter-spacing: -0.035em;
font-weight: 800;
text-wrap: balance;
}
h1 { font-size: clamp(44px, 9vw, 104px); }
h2 { font-size: clamp(34px, 6.2vw, 82px); }
h3 { font-size: clamp(21px, 2.6vw, 30px); letter-spacing: -0.02em; }
h4 { font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.01em; }
.display-xl {
font-size: clamp(46px, 9.4vw, 108px);
font-weight: 900;
font-stretch: 88%;
line-height: 0.9;
letter-spacing: -0.05em;
text-transform: uppercase;
}
.accent {
color: var(--color-light);
background: var(--color-secondary);
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
padding: 0 0.10em 0.03em;
margin: 0 -0.04em;
}
.accent-pink { color: var(--color-primary-readable); }
.lead {
font-size: clamp(17px, 1.9vw, 21px);
line-height: 1.62;
color: var(--color-text-soft);
max-width: 54ch;
}
.eyebrow {
display: inline-block;
font-size: var(--size-xs);
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--color-primary-readable);
}
.hero__title .eyebrow { margin-bottom: 14px; }
.micro {
font-size: var(--size-xs);
letter-spacing: 0.04em;
color: var(--color-text-muted);
line-height: 1.55;
}
p + p { margin-top: var(--sp-sm); }
.wrap {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 32px;
}
.wrap--narrow { max-width: 880px; }
section { padding: clamp(72px, 8vw, 120px) 0; position: relative; }
#nosotros, #contacto { padding-block: clamp(104px, 12vw, 180px); }
#legal { padding-top: clamp(140px, 14vw, 200px); }
.section--alt { background: var(--color-bg-2); }
.section--alt::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(var(--color-primary-rgb), 0.07) 0%, transparent 70%);
pointer-events: none;
}
.section--alt > * { position: relative; z-index: 1; }
.sec-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-md);
padding-bottom: var(--sp-md);
border-bottom: 1px solid var(--color-line-2);
margin-bottom: clamp(40px, 5vw, 64px);
}
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-md); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-md); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-sm); align-items: center; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lineGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.js-motion .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js-motion .reveal.visible { opacity: 1; transform: none; }
.js-motion .stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
transition-delay: calc(var(--i, 0) * 40ms);
}
.js-motion .stagger.visible > * { opacity: 1; transform: none; }
.js-motion .tst__grid.stagger > * {
transform: translateY(34px) scale(0.965);
transition: opacity .62s var(--ease), transform .62s var(--ease);
transition-delay: calc(var(--i, 0) * 90ms);
}
.js-motion .tst__grid.stagger.visible > * { transform: none; }
.hero-animate-1 { animation: fadeUp 1.1s var(--ease) 0.15s both; }
.hero-animate-2 { animation: fadeUp 1.1s var(--ease) 0.35s both; }
.hero-animate-3 { animation: fadeUp 1.1s var(--ease) 0.55s both; }
.hero-animate-4 { animation: fadeUp 1.1s var(--ease) 0.75s both; }
.hero-line-animate { animation: lineGrow 1.2s var(--ease) 0.95s both; transform-origin: left; }
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
padding: 20px 0;
transition: background var(--duration) var(--ease),
backdrop-filter var(--duration) var(--ease),
padding var(--duration) var(--ease),
border-color var(--duration) var(--ease);
border-bottom: 1px solid transparent;
}
.site-header.scrolled {
background: rgba(var(--color-bg-rgb), 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 11px 0;
border-bottom-color: var(--color-line);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-md);
}
.nav__logo { display: flex; align-items: center; flex: none; }
.nav__logo img { width: 168px; height: auto; transform-origin: left center; transition: transform var(--duration) var(--ease); }
.site-header.scrolled .nav__logo img { transform: scale(0.833); }
.nav__menu { display: flex; align-items: center; gap: 30px; }
.nav__link {
position: relative;
font-size: var(--size-sm);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--color-text-soft);
transition: color var(--duration) var(--ease);
padding: 4px 0;
}
.nav__link::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 1.5px;
background: var(--color-primary);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration) var(--ease);
}
.nav__link:hover { color: var(--color-text); }
.nav__link:hover::after { transform: scaleX(1); }
.nav__right { display: flex; align-items: center; gap: 14px; flex: none; }
.btn--lang {
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--color-primary-readable);
background: var(--color-surface);
border: 1.5px solid var(--color-line-2);
border-radius: var(--r-pill);
padding: 6px 14px;
min-height: 48px;
min-width: 48px;
transition: background var(--duration), color var(--duration), border-color var(--duration);
white-space: nowrap;
flex-shrink: 0;
line-height: 1;
}
.btn--lang:hover {
background: var(--color-secondary);
color: var(--color-on-secondary);
border-color: var(--color-primary);
}
.nav__burger {
display: none;
width: 48px; height: 48px;
align-items: center; justify-content: center;
flex-direction: column; gap: 5px;
}
.nav__burger span {
display: block;
width: 24px; height: 2px;
background: var(--color-text);
transition: transform var(--duration) var(--ease), opacity var(--duration);
}
.nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity: 0; }
.nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
position: fixed;
inset: 0;
background: rgba(var(--color-bg-rgb), 0.985);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
z-index: 980;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
opacity: 0;
pointer-events: none;
transition: opacity var(--duration) var(--ease);
}
.nav__mobile[hidden] { display: none; }
.nav__mobile.open { opacity: 1; pointer-events: all; }
.nav__mobile-cta { margin-top: var(--sp-md); }
.nav__mobile .nav__link {
font-family: var(--font-display);
font-size: clamp(28px, 7vw, 44px);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--color-text);
padding: 10px 0;
}
.nav__mobile .nav__link::after { display: none; }
.nav__mobile .btn--lang { margin-top: var(--sp-md); font-size: 14px; padding: 10px 22px; }
.btn--lang--wide { letter-spacing: 0.04em; text-transform: none; }
.nav__mobile .btn--lang--wide,
.nav__mobile .nav__mobile-cta { width: auto; }
body:has(#nav-mobile.open) .site-header .btn--lang { display: none; }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
min-height: 48px;
border-radius: var(--r-pill);
font-size: var(--size-sm);
font-weight: 700;
letter-spacing: 0.045em;
text-transform: uppercase;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease),
transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease),
border-color var(--duration) var(--ease);
white-space: nowrap;
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn:active, .svc__filter:active, .cmp__tab:active, .svc__book:active, .btn--lang:active {
transform: scale(.97);
transition-duration: .07s;
}
.btn--primary:hover {
background: var(--color-primary-d);
color: var(--color-on-primary);
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(var(--color-primary-rgb), 0.28);
}
.btn--outline {
background: transparent;
color: var(--color-text);
border: 1.5px solid var(--color-line-2);
}
.btn--outline:hover { border-color: var(--color-primary); color: var(--color-primary-readable); transform: translateY(-2px); }
.btn--ghost {
padding: 0;
min-height: 48px;
color: var(--color-primary-readable);
position: relative;
background: none;
border-radius: 0;
display: inline-flex;
}
.btn--ghost::after {
content: '';
position: absolute;
bottom: 10px; left: 0; right: 0;
height: 1px;
background: var(--color-primary-readable);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--duration) var(--ease);
}
.btn--ghost:hover::after { transform: scaleX(1); }
.hero {
position: relative;
min-height: 88svh;
display: flex;
align-items: center;
padding: 124px 0 var(--sp-lg);
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(var(--color-primary-rgb), 0.16) 0%, transparent 72%);
pointer-events: none;
}
.hero__grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr minmax(240px, 400px) 1fr;
align-items: center;
gap: var(--sp-md);
width: 100%;
}
.hero__col--left { text-align: right; }
.hero__col--right { text-align: left; }
.hero__title {
grid-column: 1 / -1;
text-align: center;
margin-bottom: -2.4vw;
position: relative;
z-index: 3;
pointer-events: none;
}
.hero__media {
position: relative;
border-radius: 300px 300px var(--r-lg) var(--r-lg);
overflow: hidden;
isolation: isolate;
}
.hero__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.hero__rule {
display: block;
height: 1.5px;
background: var(--color-primary);
margin: var(--sp-sm) 0;
}
.hero__col--left .hero__rule { margin-left: auto; width: 64px; }
.hero__col--right .hero__rule { margin-right: auto; width: 64px; }
.hero__side-p { font-size: clamp(15px, 1.5vw, 18px); line-height: 1.6; color: var(--color-text-soft); }
.hero__col--left .hero__side-p { margin-left: auto; max-width: 30ch; }
.hero__col--right .hero__side-p { margin-right: auto; max-width: 30ch; }
.hero__cta { margin-top: var(--sp-md); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hero__col--left .hero__cta { align-items: flex-end; }
.hero__stat { display: block; }
.hero__stat b {
display: block;
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 52px);
font-weight: 900;
font-stretch: 88%;
letter-spacing: -0.04em;
line-height: 1;
color: var(--color-primary-readable);
}
.hero__stat > span { display: block; font-size: var(--size-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-muted); }
.hero__scroll {
position: absolute;
bottom: 24px; left: 50%;
transform: translateX(-50%);
z-index: 3;
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.marquee {
padding: 0;
background: var(--color-secondary);
border-top: 1px solid rgba(var(--color-text-rgb), 0.18);
border-bottom: 1px solid rgba(var(--color-text-rgb), 0.18);
overflow: hidden;
}
.marquee__track {
display: flex;
width: max-content;
animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group { display: flex; flex: none; }
.marquee__item {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 15px 22px;
font-family: var(--font-display);
font-size: clamp(15px, 1.7vw, 20px);
font-weight: 800;
font-stretch: 88%;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--color-on-secondary);
white-space: nowrap;
}
.marquee__item::after { content: '✦'; font-size: 0.7em; opacity: 0.6; }
.proof__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-line); border: 1px solid var(--color-line); }
.proof__cell {
background: var(--color-bg);
padding: var(--sp-md) var(--sp-sm);
text-align: center;
}
.proof__num {
font-family: var(--font-display);
font-size: clamp(38px, 5.4vw, 68px);
font-weight: 900;
font-stretch: 88%;
line-height: 1;
letter-spacing: -0.045em;
color: var(--color-primary-readable);
}
.proof__label {
display: block;
margin-top: 10px;
font-size: var(--size-xs);
letter-spacing: 0.13em;
text-transform: uppercase;
color: var(--color-text-muted);
}
.proof__stars {
position: relative;
display: inline-block;
font-size: 18px;
letter-spacing: 2px;
line-height: 1;
white-space: nowrap;
}
.proof__stars-base { color: rgba(var(--color-primary-rgb), .26); }
.proof__stars-fill {
position: absolute;
top: 0; left: 0;
overflow: hidden;
color: var(--color-primary-readable);
}
.proof__src { margin-top: var(--sp-md); text-align: center; }
.svc__filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: var(--sp-md);
}
.svc__filter {
padding: 10px 20px;
min-height: 48px;
border: 1.5px solid var(--color-line-2);
border-radius: var(--r-pill);
font-size: var(--size-sm);
font-weight: 600;
color: var(--color-text-soft);
transition: all var(--duration) var(--ease);
}
.svc__filter:hover { border-color: var(--color-primary); color: var(--color-text); }
.svc__filter[aria-pressed="true"] {
background: var(--color-secondary);
border-color: var(--color-primary);
color: var(--color-on-secondary);
font-weight: 700;
}
.svc__list { border-top: 1px solid var(--color-line); }
.svc__row {
display: flex;
align-items: baseline;
gap: 14px;
padding: 20px 84px 20px 0;
border-bottom: 1px solid var(--color-line);
transition: transform var(--duration) var(--ease), background var(--duration) var(--ease);
}
.svc__row:hover { transform: translateX(10px); background: var(--color-surface); }
.svc__row[hidden] { display: none; }
.svc__info { flex: 1; min-width: 0; }
.svc__name {
display: block;
font-family: var(--font-display);
font-size: clamp(18px, 2.1vw, 24px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-text);
}
.svc__desc { display: block; margin-top: 5px; font-size: var(--size-sm); color: var(--color-text-muted); line-height: 1.5; }
.svc__price {
font-family: var(--font-display);
font-size: clamp(17px, 2vw, 22px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--color-primary-readable);
white-space: nowrap;
align-self: center;
}
.svc__price small { font-size: 0.62em; font-weight: 600; color: var(--color-text-muted); letter-spacing: 0.04em; }
.svc__note {
margin-top: var(--sp-md);
padding: 18px 22px;
background: var(--color-primary-dim);
border: 1px solid rgba(var(--color-primary-rgb), 0.28);
border-radius: var(--r-md);
}
.svc__note p { font-size: var(--size-sm); color: var(--color-text-soft); line-height: 1.6; }
.svc__empty { padding: var(--sp-lg) 0; text-align: center; color: var(--color-text-muted); }
.svc__empty[hidden] { display: none; }
.cmp__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: var(--sp-md); }
.cmp__tab {
padding: 10px 20px;
min-height: 48px;
border: 1.5px solid var(--color-line-2);
border-radius: var(--r-pill);
font-size: var(--size-sm);
font-weight: 600;
color: var(--color-text-soft);
transition: all var(--duration) var(--ease);
}
.cmp__tab:hover { border-color: var(--color-primary); color: var(--color-text); }
.cmp__tab[aria-selected="true"] {
background: var(--color-primary);
border-color: var(--color-primary);
color: var(--color-on-primary);
}
.cmp__stage {
position: relative;
width: 100%;
max-width: 540px;
margin: 0 auto;
aspect-ratio: 3 / 4;
border-radius: var(--r-lg);
overflow: hidden;
background: var(--color-bg-2);
touch-action: pan-y;
user-select: none;
cursor: ew-resize;
}
.cmp__img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
pointer-events: none;
}
.cmp__antes { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.cmp__handle {
position: absolute;
top: 0; bottom: 0;
left: 50%;
width: 3px;
background: var(--color-secondary);
transform: translateX(-50%);
pointer-events: none;
will-change: left;
}
.cmp__knob {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 52px; height: 52px;
border-radius: 50%;
background: var(--color-secondary);
color: var(--color-on-secondary);
display: flex;
align-items: center;
justify-content: center;
font-size: 17px;
font-weight: 900;
letter-spacing: -1px;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.cmp__tag {
position: absolute;
top: 16px;
padding: 7px 15px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
pointer-events: none;
z-index: 2;
}
.cmp__tag--antes { left: 16px; background: rgba(0, 0, 0, 0.72); color: #fff; }
.cmp__tag--despues { right: 16px; background: var(--color-secondary); color: var(--color-on-secondary); }
.cmp__range {
position: absolute;
inset: 0;
width: 100%; height: 100%;
opacity: 0;
margin: 0;
pointer-events: none;
}
.cmp__range:focus-visible { opacity: 1; outline: 2px solid var(--color-primary); outline-offset: 3px; }
.cmp__caption { margin-top: var(--sp-md); text-align: center; }
.resultados__galeria { margin-top: clamp(40px, 5vw, 72px); }
.gal__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.gal__item {
position: relative;
overflow: hidden;
border-radius: var(--r-md);
background: var(--color-bg-2);
}
.gal__item[hidden] { display: none; }
.gal__item img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
transition: transform 0.7s var(--ease);
}
.gal__item:hover img { transform: scale(1.06); }
.gal__cap {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 30px 16px 14px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.30) 55%, transparent);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
opacity: 0.82;
transition: opacity var(--duration) var(--ease);
}
.gal__item:hover .gal__cap, .gal__item:focus-within .gal__cap { opacity: 1; }
.about__grid { display: grid; grid-template-columns: 0.85fr 1fr; gap: var(--sp-lg); align-items: center; }
.about__media { border-radius: var(--r-lg); overflow: hidden; }
.about__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 30%; }
.about__body h2 { margin-bottom: var(--sp-md); }
.about__pillars {
margin-top: var(--sp-md);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-md);
}
.about__pillar { padding: var(--sp-sm) 0 0; border-top: 1.5px solid var(--color-line-2); }
.about__pillar h3 { font-size: clamp(19px, 2.2vw, 23px); }
.about__pillar h4 { color: var(--color-primary-readable); margin-bottom: 8px; }
.about__pillar p { margin-top: 8px; font-size: var(--size-sm); color: var(--color-text-muted); line-height: 1.55; max-width: 34ch; }
.tst__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-md); }
.tst__card { grid-column: span 2; }
.tst__card:nth-child(4) { grid-column: 2 / span 2; }
.tst__card:nth-child(5) { grid-column: 4 / span 2; }
.tst__card {
display: flex;
flex-direction: column;
padding: var(--sp-md);
background: var(--color-surface);
border: 1px solid var(--color-line);
border-radius: var(--r-md);
transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.tst__card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.tst__stars { color: var(--color-primary-readable); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
.tst__text { flex: 1; font-size: var(--size-base); line-height: 1.6; color: var(--color-text-soft); }
.tst__who { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-md); padding-top: var(--sp-sm); border-top: 1px solid var(--color-line); }
.tst__initials {
width: 40px; height: 40px;
flex: none;
border-radius: 50%;
background: rgba(var(--color-primary-rgb), 0.20);
color: #8f2952;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
letter-spacing: 0.02em;
}
.tst__name { font-weight: 700; font-size: var(--size-sm); }
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--sp-sm);
padding: 24px 0;
min-height: 48px;
cursor: pointer;
list-style: none;
font-family: var(--font-display);
font-size: clamp(17px, 2vw, 22px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-text);
transition: color var(--duration);
}
.faq-question:hover { color: var(--color-primary-readable); }
.faq-question::-webkit-details-marker { display: none; }
.faq-icon { font-size: 26px; color: var(--color-primary-readable); transition: rotate var(--duration) var(--ease); flex: none; line-height: 1; }
details[open] .faq-icon { rotate: 45deg; }
.faq-answer { padding: 0 0 24px; color: var(--color-text-soft); max-width: 72ch; }
.ct__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); align-items: start; }
.ct__block + .ct__block { margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px solid var(--color-line); }
.ct__block h4 { color: var(--color-primary-readable); margin-bottom: 10px; }
.ct__block a:not(.btn) {
display: inline-flex;
align-items: center;
min-height: 48px;
color: var(--color-text);
border-bottom: 1px solid var(--color-line-2);
transition: border-color var(--duration), color var(--duration);
}
.ct__block a:not(.btn):hover { color: var(--color-primary-readable); border-color: var(--color-primary); }
.ct__hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: var(--size-sm); }
.ct__hours dt { color: var(--color-text-muted); }
.ct__hours dd { color: var(--color-text); font-variant-numeric: tabular-nums; }
.ct__map { margin-top: var(--sp-lg); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--color-line); }
.form { display: flex; flex-direction: column; gap: var(--sp-sm); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--size-sm); font-weight: 600; color: var(--color-text-soft); }
.field .req { color: var(--color-primary-readable); }
.field input, .field textarea {
width: 100%;
min-height: 48px;
padding: 13px 15px;
font-family: inherit;
font-size: 16px;
color: var(--color-text);
background: rgba(var(--color-text-rgb), 0.06);
border: 1.5px solid var(--color-line-2);
border-radius: var(--r-sm);
transition: border-color var(--duration), background var(--duration);
}
.field input::placeholder, .field textarea::placeholder { color: var(--color-text-muted); }
.field input:focus, .field textarea:focus {
outline: none;
border-color: var(--color-primary);
background: rgba(var(--color-text-rgb), 0.10);
}
.field textarea { resize: vertical; min-height: 110px; }
.field__err { font-size: var(--size-xs); color: var(--color-primary-readable); min-height: 1em; }
.form__msg { font-size: var(--size-sm); min-height: 1.4em; }
.form > .micro { text-align: center; margin-top: calc(var(--sp-sm) * -1 + 6px); }
.form__msg[data-state="ok"] { color: var(--color-lime-ink); font-weight: 600; }
.form__msg[data-state="err"] { color: var(--color-primary-readable); }
.site-footer { padding: var(--sp-lg) 0 var(--sp-md); border-top: 1px solid var(--color-line); background: var(--color-bg-2); }
.footer__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--sp-md); }
.footer__logo img { width: 190px; }
.footer__social { display: flex; gap: 12px; margin-top: var(--sp-sm); }
.footer__social a {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--color-line-2);
border-radius: 50%;
transition: all var(--duration) var(--ease);
}
.footer__social a:hover { border-color: var(--color-primary); color: var(--color-primary-readable); transform: translateY(-2px); }
.footer__social svg { width: 19px; height: 19px; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.footer__nav a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
min-width: 48px;
padding: 0 5px;
font-size: var(--size-sm);
color: var(--color-text-muted);
transition: color var(--duration);
}
.footer__nav a:hover { color: var(--color-primary-readable); }
.footer__legal a { display: inline-flex; align-items: center; min-height: 48px; }
.footer__legal {
margin-top: var(--sp-lg);
padding-top: var(--sp-md);
border-top: 1px solid var(--color-line);
display: flex;
flex-wrap: wrap;
gap: var(--sp-sm) var(--sp-md);
justify-content: space-between;
}
@media (max-width: 768px) {
.footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-sm); }
.footer__nav a { justify-content: flex-start; padding: 0; }
.footer__legal { margin-top: var(--sp-md); gap: 0; }
.footer__sep { display: none; }
.footer__legal .micro a { display: flex; }
}
.wa-float {
position: fixed;
right: 20px; bottom: 20px;
z-index: 940;
width: 58px; height: 58px;
border-radius: 50%;
background: #25d366;
color: #0d0208;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
transition: transform var(--duration) var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float { animation: wa-pulsa 2.4s ease-out infinite; }
.wa-float:hover, .wa-float:focus-visible { animation: none; }
@keyframes wa-pulsa {
0%, 60% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 0 rgba(37,211,102,.45); }
78% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 8px rgba(37,211,102,.28); }
100% { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 16px rgba(37,211,102,0); }
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float--cede {
opacity: 0;
transform: scale(0.7);
pointer-events: none;
animation: none;
}
@media (max-width: 1024px) {
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.nav__menu { display: none; }
.nav__burger { display: flex; }
.nav__cta { display: none; }
.gal__grid { grid-template-columns: repeat(2, 1fr); }
.tst__grid { grid-template-columns: repeat(2, 1fr); }
.tst__card, .tst__card:nth-child(4), .tst__card:nth-child(5) { grid-column: auto; }
.tst__card:nth-child(5) { grid-column: 1 / -1; }
.about__grid { grid-template-columns: 1fr; gap: var(--sp-md); }
.about__media { max-width: 420px; }
.ct__grid { grid-template-columns: 1fr; gap: var(--sp-lg); }
.hero__grid { grid-template-columns: 1fr; gap: var(--sp-sm); }
.hero__title { margin-bottom: var(--sp-sm); }
.hero__title .display-xl { font-size: clamp(38px, 7.2vw, 64px); }
.hero__col--left, .hero__col--right { text-align: center; }
.hero__col--left .hero__rule,
.hero__col--right .hero__rule { margin-left: auto; margin-right: auto; }
.hero__col--left .hero__side-p,
.hero__col--right .hero__side-p { margin-left: auto; margin-right: auto; }
.hero__col--left .hero__cta,
.hero__col--right .hero__cta { align-items: center; margin-top: var(--sp-sm); }
.hero__media { max-width: 300px; margin: 0 auto; order: 2; }
.hero__col--left { order: 3; }
.hero__col--right { order: 4; }
.hero__stat b { font-size: clamp(28px, 3.4vw, 38px); }
.hero__scroll { display: none; }
}
@media (max-width: 768px) {
.wrap { padding-left: 20px; padding-right: 20px; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.proof__grid { grid-template-columns: repeat(3, 1fr); }
.gal__grid { grid-template-columns: repeat(2, 1fr); }
.tst__grid { grid-template-columns: 1fr; }
.tst__card, .tst__card:nth-child(4), .tst__card:nth-child(5) { grid-column: auto; }
.about__pillars { grid-template-columns: 1fr; gap: var(--sp-sm); }
.cta-row { flex-direction: column; align-items: stretch; }
.sec-head { flex-direction: column; align-items: flex-start; gap: var(--sp-xs); }
.footer__legal { flex-direction: column; }
.hero { padding-top: 116px; padding-bottom: var(--sp-md); }
.svc__desc { font-size: var(--size-xs); }
.cmp__knob { width: 46px; height: 46px; }
}
@media (max-width: 480px) {
.btn { width: 100%; }
.hero__cta .btn { width: 100%; }
.gal__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.nav__logo img { width: 132px; }
.site-header.scrolled .nav__logo img { width: 118px; }
.svc__row { flex-wrap: wrap; align-items: center; row-gap: 12px; padding-right: 0; }
.svc__info { flex: 1 0 100%; }
.svc__price { width: auto; }
.svc__book { margin-left: auto; }
.hero__title .eyebrow { font-size: 11px; letter-spacing: 0.10em; }
}
@media (max-width: 420px) {
.proof__cell { padding: 22px 8px; }
.proof__num { font-size: clamp(28px, 8.4vw, 38px); }
.proof__label { font-size: 11px; letter-spacing: 0.06em; }
.proof__stars { font-size: 15px; letter-spacing: 1px; }
}
.svc__book {
flex: none;
align-self: center;
padding: 8px 14px;
min-height: 48px;
display: inline-flex;
align-items: center;
border: 1.5px solid var(--color-line-2);
border-radius: var(--r-pill);
font-size: var(--size-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-primary-readable);
white-space: nowrap;
opacity: 0.75;
transition: opacity var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.svc__row:hover .svc__book,
.svc__book:focus-visible { opacity: 1; }
.svc__book:hover { opacity: 1; background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.svc__note-lead {
font-family: var(--font-display);
font-size: clamp(17px, 1.9vw, 21px);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-text);
margin-bottom: 10px;
}
@keyframes filterIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.filtering .svc__row:not([hidden]),
.filtering .gal__item:not([hidden]) { animation: filterIn .32s var(--ease) both; }
@keyframes sending { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.form button[type="submit"]:disabled { animation: sending 1.1s ease-in-out infinite; cursor: progress; }
.cita__h2 { margin-top: 10px; }
.cita__lead { margin-top: var(--sp-sm); max-width: 62ch; }
.cita__grid {
display: grid;
grid-template-columns: 1fr 380px;
gap: var(--sp-lg);
align-items: start;
}
@media (max-width: 900px) {
.cita__grid { grid-template-columns: 1fr; gap: var(--sp-md); }
.cita__media { max-width: 420px; margin-inline: auto; }
}
.cita__form { gap: var(--sp-md); }
.cita__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
@media (max-width: 560px) { .cita__row { grid-template-columns: 1fr; gap: var(--sp-sm); } }
.cita__grid > *,
.cita__row > * { min-width: 0; }
.cita__form select,
.cita__form input[type="date"] {
width: 100%;
min-height: 48px;
padding: 13px 15px;
font-family: inherit;
font-size: 16px;
color: var(--color-text);
background: rgba(var(--color-text-rgb), 0.06);
border: 1.5px solid var(--color-line-2);
border-radius: var(--r-sm);
transition: border-color var(--duration), background var(--duration);
}
.cita__form select:focus,
.cita__form input[type="date"]:focus {
outline: none;
border-color: var(--color-primary);
background: rgba(var(--color-text-rgb), 0.10);
}
.cita__previo {
padding: 16px 18px;
background: var(--color-bg);
border: 1px solid var(--color-line-2);
border-radius: var(--r-md);
}
.cita__previo-et {
display: block;
font-size: var(--size-xs);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-primary-readable);
margin-bottom: 8px;
}
.cita__previo-txt { font-size: var(--size-sm); line-height: 1.6; color: var(--color-text-soft); }
.cita__enviar { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.cita__enviar svg { width: 21px; height: 21px; flex: none; }
.cita__enviar { animation: cita-pulsa 2.4s ease-out infinite; }
.cita__enviar:hover, .cita__enviar:focus-visible { animation: none; }
@keyframes cita-pulsa {
0%, 60% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), .42); }
78% { box-shadow: 0 0 0 8px rgba(var(--color-primary-rgb), .26); }
100% { box-shadow: 0 0 0 16px rgba(var(--color-primary-rgb), 0); }
}
.cita__directo { align-items: center; justify-content: center; width: 100%; }
.cita__confirma {
margin-top: var(--sp-sm);
text-align: center;
color: var(--color-text-muted);
}
.cita__media picture { display: block; border-radius: var(--r-lg); overflow: hidden; }
.cita__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.cita__media-cap { margin-top: 10px; text-align: center; }
.legal__fecha { margin-top: var(--sp-sm); color: var(--color-text-muted); }
.legal__cuerpo { margin-top: var(--sp-lg); max-width: 68ch; }
.legal__cuerpo h2 {
margin-top: var(--sp-lg);
margin-bottom: var(--sp-sm);
font-size: var(--size-lg);
}
.legal__cuerpo h2:first-child { margin-top: 0; }
.legal__cuerpo p { margin-bottom: var(--sp-md); }
.legal__cuerpo p:last-child { margin-bottom: 0; }
.legal__cuerpo a { color: var(--color-primary-readable); text-decoration: underline; }
.marcas__carrusel {
margin-top: var(--sp-lg);
overflow: hidden;
-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marcas__pista {
display: flex;
width: max-content;
animation: marcas-desfile 42s linear infinite;
}
.marcas__carrusel:hover .marcas__pista { animation-play-state: paused; }
.marcas__grupo { display: flex; flex: none; align-items: center; }
.marcas__logo {
flex: none;
height: clamp(26px, 3vw, 38px);
width: auto;
margin: 0 clamp(24px, 3.2vw, 50px);
filter: brightness(0) opacity(0.42);
transition: filter var(--duration) var(--ease);
}
.marcas__carrusel:hover .marcas__logo { filter: brightness(0) opacity(0.62); }
.marcas__logo[src*="moroccanoil"] { filter: brightness(0) opacity(0.60); }
.marcas__carrusel:hover .marcas__logo[src*="moroccanoil"] { filter: brightness(0) opacity(0.80); }
@keyframes marcas-desfile {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marcas__pista { animation: none; }
.marcas__carrusel {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.marcas__grupo[aria-hidden="true"] { display: none; }
}
.svc__pista {
margin-bottom: 12px;
font-size: var(--size-sm);
font-weight: 600;
color: var(--color-primary-readable);
}
.svc__pista::after {
content: ' ↓';font-weight:800}.svc__filters--llama.svc__filters--vista .svc__filter{animation:svc-llama 5.5s var(--ease) 3}.svc__filters--vista .svc__filter:nth-child(1){animation-delay:0ms}.svc__filters--vista .svc__filter:nth-child(2){animation-delay:80ms}.svc__filters--vista .svc__filter:nth-child(3){animation-delay:160ms}.svc__filters--vista .svc__filter:nth-child(4){animation-delay:240ms}@keyframes svc-llama{0%,9%,100%{transform:none;box-shadow:0 0 0 0 rgba(var(--color-primary-rgb),0)}3%{transform:translateY(-7px) scale(1.06);box-shadow:0 0 0 6px rgba(var(--color-primary-rgb),0.20)}6%{transform:translateY(0) scale(1);box-shadow:0 0 0 14px rgba(var(--color-primary-rgb),0)}}.svc__filter[aria-pressed="true"]{box-shadow:0 2px 10px rgba(var(--color-primary-rgb),0.22)}@media (prefers-reduced-motion:reduce){.svc__filters--llama .svc__filter{animation:none}}.tst__carrusel{overflow:hidden;margin-top:var(--sp-lg);-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}.tst__pista{display:flex;width:max-content;animation:tst-desfile 60s linear infinite}.tst__carrusel:hover .tst__pista,.tst__carrusel:focus-within .tst__pista{animation-play-state:paused}.tst__grupo{display:flex;flex:none;gap:var(--sp-md);padding-right:var(--sp-md)}.tst__grupo .tst__card{width:340px;flex:none;grid-column:auto}@keyframes tst-desfile{from{transform:translateX(0)}to{transform:translateX(-50%)}}@media (max-width:480px){.tst__grupo .tst__card{width:280px}.tst__pista{animation-duration:45s}}@media (prefers-reduced-motion:reduce){.tst__pista{animation:none}.tst__carrusel{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-mask-image:none;mask-image:none}.tst__grupo .tst__card{scroll-snap-align:start}.tst__grupo[aria-hidden="true"]{display:none}}.promo__caja{padding:var(--sp-lg) var(--sp-md) var(--sp-md);text-align:center;background:var(--color-bg);border:2px solid var(--color-primary);border-radius:var(--r-lg);box-shadow:0 10px 34px rgba(var(--color-primary-rgb),0.14)}.promo__h2{margin-top:10px}.promo__lead{margin:var(--sp-sm) auto 0;max-width:46ch}.promo__cta{margin-top:var(--sp-md)}.promo__terminos{margin-top:var(--sp-md)}.promo__terminos summary{cursor:pointer;font-size:var(--size-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--color-text-soft);min-height:48px;display:inline-flex;align-items:center}.promo__terminos summary:hover{color:var(--color-primary-readable)}.promo__terminos p{margin:0 auto;max-width:62ch;text-align:left;color:var(--color-text-soft)}@media (max-width:480px){.promo__caja{padding:var(--sp-md) 18px}}.proof__cta{margin-top:var(--sp-md);text-align:center}.ct__map-btn{margin-top:var(--sp-sm)}@media (max-width:768px){.ct__map iframe{height:240px}}
img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;}