/* ═══════════════════════════════════════════════════════════════════════════
Kalon Estética y Spa — hoja de estilos
Salón de belleza y estética en Santo Domingo.
La paleta sale de SU logotipo, no de un catálogo: verde bosque #23503C,
dorado #C8912E y crema #EDE3D7. El brief pedía «rosa claro» y se queda solo
como rubor de acento — el verde es lo que los distingue de cualquier otro
spa beige, y es lo que hace cantar al dorado.
Tipos Fraunces (display, serif blanda) · Karla (texto, humanista)
═══════════════════════════════════════════════════════════════════════════ */
:root {
/* — superficies — */
--blanco: #ffffff;
--crema: #f9f5ef;
--crema-hondo: #f0e8dc;
--rubor: #f3e6e0; /* el guiño rosa del brief, en dosis pequeña */
--verde: #23503c; /* el del logotipo. 9,2:1 sobre blanco */
--verde-hondo: #17392a;
--verde-tenue: #e8efe9;
/* — tinta — */
--tinta: #2a2521; /* 15,2:1 */
--texto-2: #6b625a; /* 6,0:1 */
--texto-inv: #f7f1e8; /* 8,2:1 sobre verde */
--texto-inv-2: #b9ccc0; /* 7,5:1 sobre verde hondo */
/* — oro — */
--oro: #c8912e; /* 2,8:1 — DECORATIVO. Nunca texto sobre claro */
--oro-texto: #8a6212; /* 5,5:1 — el oro cuando lleva texto en claro */
--oro-claro: #e5b65c; /* 4,9:1 sobre verde — el oro sobre oscuro */
/* — líneas y sombras — */
--linea: rgba(42, 37, 33, .1);
--linea-fuerte: rgba(42, 37, 33, .22);
--linea-inv: rgba(247, 241, 232, .2);
--sombra: 0 1px 2px rgba(42,37,33,.04), 0 12px 32px -12px rgba(42,37,33,.16);
--sombra-alta: 0 2px 6px rgba(42,37,33,.05), 0 28px 56px -20px rgba(42,37,33,.24);
/* — tipografía — */
--display: "Fraunces", "Iowan Old Style", Georgia, serif;
--texto-f: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
/* — ritmo y forma — */
--wrap: 1220px;
--gutter: clamp(1.25rem, 5vw, 3rem);
--seccion: clamp(4rem, 9vw, 7.5rem);
--radio: 22px;
--radio-s: 14px;
--ease: cubic-bezier(.22, 1, .36, 1);
--ease-suave: cubic-bezier(.33, 1, .68, 1);
}
/* ── base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
color-scheme: light; /* sin esto un navegador oscuro pinta el body */
-webkit-text-size-adjust: 100%;
scroll-padding-top: 7.5rem; /* alto real de la barra fija + aire */
}
body {
margin: 0;
background: var(--blanco);
color: var(--tinta);
font-family: var(--texto-f);
font-size: 1rem;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: clip;
}
/* width/height en ![]()
evita el salto de maquetación, pero exige esto o
todas las fotos se deforman al encoger. */
img, svg, video { max-width: 100%; display: block; }
img { height: auto; }
h1, h2, h3, h4 {
font-family: var(--display);
font-weight: 400;
font-variation-settings: "SOFT" 40, "WONK" 1;
line-height: 1.12;
letter-spacing: -.015em;
margin: 0 0 .5em;
color: var(--verde);
text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.22; }
h4 { font-size: 1rem; line-height: 1.3; letter-spacing: 0; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--verde); text-decoration: none; }
a:hover { color: var(--verde-hondo); }
strong { font-weight: 700; }
::selection { background: var(--oro-claro); color: var(--verde-hondo); }
/* El anillo de foco cambia con la superficie: sobre verde el verde no se ve. */
:focus-visible {
outline: 2px solid var(--verde);
outline-offset: 3px;
border-radius: 6px;
}
.banda--verde :focus-visible,
.hero :focus-visible,
.cta-final :focus-visible,
.familia :focus-visible,
.lightbox :focus-visible,
.wa-flota:focus-visible { outline-color: var(--oro-claro); }
/* La cabecera y el enlace de saltar viven sobre crema: ahí el oro claro se
queda en 1,8:1 y WCAG 1.4.11 pide 3:1. */
.cabecera :focus-visible, .saltar:focus-visible { outline-color: var(--verde); }
/* Sobre el telón crema del menú el oro no se ve: ahí manda el verde. */
.menu :focus-visible { outline-color: var(--verde); }
.sr {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip-path: inset(50%); white-space: nowrap; border: 0;
}
.saltar {
position: absolute; left: -9999px; top: 0; z-index: 300;
background: var(--verde); color: var(--texto-inv);
padding: .85rem 1.4rem; border-radius: 0 0 var(--radio-s) 0;
font-size: .85rem;
}
.saltar:focus { left: 0; }
/* ── retícula ────────────────────────────────────────────────────────────── */
.wrap {
width: min(var(--wrap), 100%);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--ancho { width: min(1440px, 100%); }
.wrap--estrecho { width: min(820px, 100%); }
.seccion { padding-block: var(--seccion); }
.seccion--corta { padding-block: clamp(2.75rem, 6vw, 5rem); }
.seccion--sigue { padding-top: 0; }
.banda--crema { background: var(--crema); }
.banda--verde { background: var(--verde); color: var(--texto-inv); }
.banda--verde h2, .banda--verde h3, .banda--verde h4 { color: var(--texto-inv); }
.banda--verde a { color: var(--oro-claro); }
/* ── piezas tipográficas ─────────────────────────────────────────────────── */
.rotulo {
display: inline-flex;
align-items: center;
gap: .7rem;
font-family: var(--texto-f);
font-size: .74rem;
font-weight: 700;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--oro-texto);
margin: 0 0 1.1rem;
}
.rotulo::before {
content: "";
width: 1.6rem; height: 2px;
border-radius: 2px;
background: var(--oro);
flex: none;
}
.banda--verde .rotulo { color: var(--oro-claro); }
.entradilla {
font-size: clamp(1.02rem, 1.4vw, 1.18rem);
line-height: 1.65;
color: var(--texto-2);
max-width: 60ch;
}
.banda--verde .entradilla { color: var(--texto-inv-2); }
.encabezado { margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.encabezado--centro { text-align: center; }
.encabezado--centro .entradilla { margin-inline: auto; }
.cuerpo { max-width: 62ch; color: var(--texto-2); }
/* ── botones ─────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .95rem 1.9rem;
border-radius: 100px;
border: 1.5px solid transparent;
background: var(--verde);
color: var(--texto-inv);
font-family: var(--texto-f);
font-size: .93rem;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
text-align: center;
transition: transform .35s var(--ease), box-shadow .35s var(--ease),
background-color .35s var(--ease), color .35s var(--ease),
border-color .35s var(--ease);
}
.btn:hover {
color: var(--texto-inv);
background: var(--verde-hondo);
transform: translateY(-2px);
box-shadow: var(--sombra);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--wa { background: #0e7a3c; } /* verde WhatsApp accesible, 5,4:1 */
.btn--wa:hover { background: #0a5e2e; color: var(--texto-inv); }
.btn--linea {
background: transparent;
color: var(--verde);
border-color: var(--linea-fuerte);
}
.btn--linea:hover { background: var(--verde); color: var(--texto-inv); border-color: var(--verde); }
.btn--claro {
background: var(--crema);
color: var(--verde);
}
.btn--claro:hover { background: var(--blanco); color: var(--verde-hondo); }
.btn--fantasma {
background: transparent;
color: var(--texto-inv);
border-color: var(--linea-inv);
}
.btn--fantasma:hover { background: var(--texto-inv); color: var(--verde); border-color: var(--texto-inv); }
.btn--grande { padding: 1.15rem 2.6rem; font-size: 1.02rem; }
.btn--bloque { display: flex; width: 100%; }
.botonera { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.enlace {
display: inline-flex;
align-items: center;
gap: .45rem;
font-weight: 700;
font-size: .93rem;
color: var(--verde);
border-bottom: 1.5px solid var(--oro);
padding-bottom: 2px;
transition: gap .35s var(--ease), color .3s var(--ease);
}
.enlace:hover { gap: .8rem; color: var(--oro-texto); }
/* ── cabecera fija ───────────────────────────────────────────────────────── */
.cabecera {
position: fixed;
inset: 0 0 auto;
z-index: 100;
background: transparent;
transition: background-color .45s var(--ease), box-shadow .45s var(--ease),
padding .45s var(--ease);
}
.cabecera.is-fija {
background: rgba(249, 245, 239, .96);
backdrop-filter: saturate(150%) blur(12px);
-webkit-backdrop-filter: saturate(150%) blur(12px);
box-shadow: 0 1px 0 var(--linea);
}
.cabecera__interior {
width: min(1440px, 100%);
margin-inline: auto;
padding: .85rem var(--gutter);
display: flex;
align-items: center;
gap: 1rem;
}
.marca { flex: none; display: flex; align-items: center; line-height: 0; }
.marca img { width: clamp(104px, 11vw, 128px); height: auto; }
/* Sobre el hero, el logotipo va en una placa crema: su silueta es verde y
sobre la foto se perdería. */
.marca__placa {
background: var(--crema);
border-radius: 100px;
padding: .4rem 1rem;
transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
box-shadow: 0 6px 20px -8px rgba(42,37,33,.35);
}
.cabecera.is-fija .marca__placa { background: transparent; box-shadow: none; }
.nav {
margin-left: auto;
display: flex;
align-items: center;
gap: clamp(.9rem, 1.9vw, 1.8rem);
}
.nav__enlace {
font-size: .9rem;
font-weight: 500;
color: var(--texto-inv);
white-space: nowrap;
padding: .4rem 0;
position: relative;
text-shadow: 0 1px 12px rgba(23,57,42,.5);
transition: color .3s var(--ease);
}
.cabecera.is-fija .nav__enlace { color: var(--verde); text-shadow: none; }
.nav__enlace::after {
content: "";
position: absolute; left: 0; bottom: 0;
width: 100%; height: 2px; border-radius: 2px;
background: var(--oro);
transform: scaleX(0);
transform-origin: right;
transition: transform .4s var(--ease);
}
.nav__enlace:hover::after, .nav__enlace:focus-visible::after,
.nav__enlace.is-activo::after { transform: scaleX(1); transform-origin: left; }
/* Sobre el hero la cabecera es transparente y el verde del botón se comía con
el verde del velo: solo se distinguía por la forma (1,8:1). En crema resalta,
y al fijarse la barra vuelve al verde de marca. */
.nav__cta {
margin-left: .6rem;
padding: .7rem 1.4rem;
font-size: .88rem;
background: var(--crema);
color: var(--verde);
}
.nav__cta:hover { background: var(--blanco); color: var(--verde-hondo); }
.cabecera.is-fija .nav__cta { background: var(--verde); color: var(--texto-inv); }
.cabecera.is-fija .nav__cta:hover { background: var(--verde-hondo); color: var(--texto-inv); }
.hamburguesa {
display: none;
position: relative;
z-index: 120; /* por encima del telón, para poder cerrarlo */
margin-left: auto;
width: 46px; height: 46px;
padding: 0; border: 0; cursor: pointer;
border-radius: 100px;
background: var(--crema);
position: relative;
box-shadow: 0 6px 20px -8px rgba(42,37,33,.35);
}
.cabecera.is-fija .hamburguesa { background: transparent; box-shadow: none; }
.hamburguesa__barra {
position: absolute; left: 13px;
width: 20px; height: 2px; border-radius: 2px;
background: var(--verde);
transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.hamburguesa__barra:nth-of-type(1) { top: 17px; }
.hamburguesa__barra:nth-of-type(2) { top: 23px; }
.hamburguesa__barra:nth-of-type(3) { top: 29px; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-of-type(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-of-type(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] .hamburguesa__barra:nth-of-type(3) { transform: translateY(-6px) rotate(-45deg); }
/* Menú móvil */
.menu {
position: fixed; inset: 0;
/* Por encima de la cabecera (100), no por debajo: con z-index 99 la barra
fija tapaba el primer enlace y no se podía pulsar. */
z-index: 110;
background: var(--crema);
padding: 6.5rem var(--gutter) 2rem; /* deja libre la hamburguesa */
display: flex; flex-direction: column;
overflow-y: auto;
opacity: 0; visibility: hidden;
transform: translateY(-1rem);
/* visibility con RETARDO, no con duración: al abrir tiene que ser visible
en el mismo instante o el .focus() del primer enlace no hace nada. */
transition: opacity .4s var(--ease), transform .5s var(--ease),
visibility 0s linear .4s;
}
.menu.is-abierto {
opacity: 1; visibility: visible; transform: none;
transition: opacity .4s var(--ease), transform .5s var(--ease), visibility 0s linear 0s;
}
.menu__enlace {
display: block;
padding: .95rem 0;
border-bottom: 1px solid var(--linea);
font-family: var(--display);
font-size: 1.6rem;
color: var(--verde);
}
.menu__pie { margin-top: auto; padding-top: 2rem; display: grid; gap: .8rem; }
/* El telón es crema OPACO y va por encima de la cabecera, así que se traga la
hamburguesa: sin este botón no había forma de cerrarlo con el dedo (Escape
no existe en un móvil). Subir el z-index de la hamburguesa no vale: la
cabecera es position:fixed con z-index propio y crea contexto de apilado,
su hijo no puede saltar por encima del telón. */
.menu__cerrar {
position: absolute;
top: 1rem; right: var(--gutter);
width: 46px; height: 46px;
display: grid; place-items: center;
border: 0; border-radius: 100px;
background: none;
color: var(--verde);
cursor: pointer;
}
.menu__cerrar svg { width: 22px; height: 22px; }
/* ── hero ────────────────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: min(96svh, 940px);
display: flex;
align-items: flex-end;
color: var(--texto-inv);
background: var(--verde-hondo);
overflow: hidden;
isolation: isolate;
}
.hero__foto {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
object-position: 50% 45%;
}
.hero::before {
content: "";
position: absolute; inset: 0; z-index: -1;
/* Velo plano + degradado: la fotografía de spa es muy clara y con un
degradado suave el titular blanco se quedaba por debajo de 3:1. */
background:
linear-gradient(to top, rgba(23,57,42,.9) 0%, rgba(23,57,42,.66) 48%, rgba(23,57,42,.3) 100%),
linear-gradient(rgba(23,57,42,.3), rgba(23,57,42,.3));
}
.hero__interior {
width: min(1440px, 100%);
margin-inline: auto;
padding: 9rem var(--gutter) clamp(2rem, 4vw, 3rem);
}
.hero__titulo {
color: var(--texto-inv);
max-width: 17ch;
margin-bottom: .35em;
/* Es el elemento LCP: sin animación de entrada, a propósito. */
}
.hero__sub {
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
color: var(--texto-inv);
max-width: 46ch;
margin-bottom: 0;
opacity: .95;
}
.hero__datos {
margin-top: clamp(2.25rem, 4vw, 3.25rem);
padding-top: 1.5rem;
border-top: 1px solid var(--linea-inv);
display: grid;
gap: 1.25rem 2rem;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.hero__dato { display: flex; gap: .7rem; align-items: flex-start; }
.hero__dato svg { width: 20px; height: 20px; flex: none; color: var(--oro-claro); margin-top: .15rem; }
.hero__dato span { font-size: .92rem; line-height: 1.45; color: var(--texto-inv); }
/* ── tarjetas ────────────────────────────────────────────────────────────── */
.rejilla { display: grid; gap: clamp(1.1rem, 2.2vw, 1.75rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
/* Ficha de tratamiento: foto, nombre, descripción, beneficios y reserva */
.trat {
display: flex;
flex-direction: column;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--radio);
overflow: hidden;
transition: transform .45s var(--ease), box-shadow .45s var(--ease),
border-color .45s var(--ease);
}
.trat:hover {
transform: translateY(-4px);
box-shadow: var(--sombra-alta);
border-color: transparent;
}
.trat__foto { position: relative; overflow: hidden; background: var(--crema-hondo); }
.trat__foto img {
width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
transition: transform 1.1s var(--ease);
}
.trat:hover .trat__foto img { transform: scale(1.05); }
.trat__cuerpo { padding: 1.35rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.trat__nombre { margin-bottom: .45rem; }
.trat__texto { font-size: .95rem; color: var(--texto-2); margin: 0 0 1.1rem; }
.trat__lista { display: grid; gap: .45rem; margin-bottom: 1.25rem; }
.trat__lista li {
display: grid;
grid-template-columns: 1.1rem 1fr;
gap: .55rem;
font-size: .88rem;
color: var(--texto-2);
align-items: start;
}
.trat__lista svg { width: 14px; height: 14px; color: var(--oro); margin-top: .35em; }
.trat__meta {
margin: 0 0 1.15rem;
padding-top: .9rem;
border-top: 1px solid var(--linea);
font-size: .82rem;
color: var(--texto-2);
}
.trat__meta strong { color: var(--verde); font-weight: 700; }
.trat .btn { margin-top: auto; }
/* Tarjeta simple con icono */
.ficha {
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--radio);
padding: clamp(1.4rem, 2.5vw, 1.9rem);
height: 100%;
transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.ficha:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.banda--crema .ficha { background: var(--blanco); }
.ficha__icono {
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 100px;
background: var(--verde-tenue);
color: var(--verde);
margin-bottom: 1rem;
}
.ficha__icono svg { width: 22px; height: 22px; }
.ficha h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.ficha p { font-size: .93rem; color: var(--texto-2); margin: 0; }
.banda--verde .ficha {
background: rgba(247, 241, 232, .06);
border-color: var(--linea-inv);
}
.banda--verde .ficha p { color: var(--texto-inv-2); }
.banda--verde .ficha__icono { background: rgba(229,182,92,.16); color: var(--oro-claro); }
/* ── el corazón: la firma de la casa ─────────────────────────────────────
Su logotipo lleva un corazón dorado sobre el pecho de la silueta. Ese
corazón se convierte en la marca del sitio: es la viñeta de cada beneficio,
el divisor entre secciones y el remate de las cabeceras. Se probó una
silueta completa como pieza fija y parecía un maniquí de costura: fuera. */
.corazon { color: var(--oro); flex: none; }
.corazon svg { width: 100%; height: 100%; display: block; }
/* Divisor: un filete que se abre para dejar pasar el corazón */
.divisor {
display: flex;
align-items: center;
gap: 1rem;
justify-content: center;
margin-block: clamp(2.5rem, 5vw, 4rem);
color: var(--oro);
}
.divisor::before, .divisor::after {
content: "";
height: 1px;
flex: 1 1 auto;
max-width: 140px;
background: linear-gradient(90deg, rgba(200,145,46,0), var(--oro));
}
.divisor::after { background: linear-gradient(90deg, var(--oro), rgba(200,145,46,0)); }
.divisor svg { width: 16px; height: 16px; }
.banda--verde .divisor, .banda--verde .divisor svg { color: var(--oro-claro); }
/* Cabecera de familia de tratamientos, a sangre */
.familia {
position: relative;
display: flex;
align-items: flex-end;
min-height: min(46svh, 420px);
color: var(--texto-inv);
background: var(--verde-hondo);
overflow: hidden;
isolation: isolate;
}
.familia__foto {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
}
.familia::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to top, rgba(23,57,42,.93) 0%, rgba(23,57,42,.68) 55%, rgba(23,57,42,.4) 100%),
linear-gradient(rgba(23,57,42,.3), rgba(23,57,42,.3));
}
.familia__interior {
width: min(var(--wrap), 100%);
margin-inline: auto;
padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
}
/* El rótulo hereda el oro oscuro pensado para fondo claro y sobre la foto
se perdía. Aquí manda el oro claro, que sobre el velo verde da 4,9:1. */
/* Medido sobre la captura, el oro claro se quedaba en 3,1-3,4:1 sobre la
foto. El crema da 8:1 y el filete dorado mantiene el guiño de marca. */
.familia .rotulo { color: var(--texto-inv); }
.familia .rotulo::before { background: var(--oro-claro); }
.familia h2 { color: var(--texto-inv); margin-bottom: .35em; }
.familia .entradilla { color: var(--texto-inv); }
.familia__cuenta {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: 1.25rem;
padding: .5rem 1rem;
border-radius: 100px;
border: 1px solid var(--linea-inv);
font-size: .82rem;
letter-spacing: .1em;
text-transform: uppercase;
white-space: nowrap; /* «Once tratamientos» partía en dos líneas */
color: var(--oro-claro);
}
/* ── galería masonry ─────────────────────────────────────────────────────── */
.galeria {
columns: 4 240px;
column-gap: clamp(.7rem, 1.4vw, 1.1rem);
}
.galeria__item {
break-inside: avoid;
margin-bottom: clamp(.7rem, 1.4vw, 1.1rem);
padding: 0;
border: 0;
background: none;
width: 100%;
display: block;
cursor: zoom-in;
border-radius: var(--radio-s);
overflow: hidden;
position: relative;
}
.galeria__item img {
width: 100%;
border-radius: var(--radio-s);
transition: transform .8s var(--ease), filter .5s var(--ease);
}
.galeria__item:hover img, .galeria__item:focus-visible img { transform: scale(1.04); filter: brightness(1.04); }
/* Lightbox */
.lightbox {
border: 0;
padding: 0;
background: transparent;
max-width: 100vw;
max-height: 100vh;
width: 100%;
height: 100%;
overflow: hidden;
}
.lightbox::backdrop { background: rgba(23, 57, 42, .93); }
.lightbox__interior {
height: 100%;
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
}
.lightbox img {
max-width: min(94vw, 1100px);
max-height: 84vh;
width: auto;
border-radius: var(--radio-s);
box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.lightbox__barra {
position: absolute;
inset: auto 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 1.25rem;
color: var(--texto-inv);
font-size: .9rem;
}
.lightbox__btn {
width: 46px; height: 46px;
display: grid; place-items: center;
border-radius: 100px;
border: 1px solid var(--linea-inv);
background: rgba(247,241,232,.1);
color: var(--texto-inv);
cursor: pointer;
transition: background-color .3s var(--ease);
}
.lightbox__btn:hover { background: rgba(247,241,232,.22); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__cerrar { position: absolute; top: 1rem; right: 1rem; }
/* ── proceso ─────────────────────────────────────────────────────────────── */
.proceso { display: grid; gap: 0; counter-reset: paso; grid-template-columns: 1fr; }
.paso {
counter-increment: paso;
display: grid;
grid-template-columns: 3.25rem 1fr;
gap: 1.25rem;
padding-bottom: 2.25rem;
position: relative;
}
.paso::before {
content: counter(paso);
width: 3.25rem; height: 3.25rem;
display: grid; place-items: center;
border-radius: 100px;
background: var(--verde);
color: var(--texto-inv);
font-family: var(--display);
font-size: 1.25rem;
z-index: 1;
}
/* El hilo que une los pasos */
.paso::after {
content: "";
position: absolute;
left: 1.6rem; top: 3.25rem; bottom: 0;
width: 2px;
background: linear-gradient(var(--oro), rgba(200,145,46,.15));
}
/* .paso tiene TRES ítems de rejilla: el ::before del número, el h3 y el p.
Sin decirlo, el auto-placement mandaba el párrafo a la columna de 52 px y
lo partía en una palabra por línea en TODO móvil. */
.paso::before { grid-column: 1; grid-row: 1; }
.paso > * { grid-column: 2; }
.paso:last-child { padding-bottom: 0; }
.paso:last-child::after { display: none; }
.paso h3 { margin-bottom: .3rem; }
.paso p { color: var(--texto-2); font-size: .96rem; margin: 0; }
@media (min-width: 900px) {
.proceso { grid-template-columns: repeat(5, 1fr); gap: clamp(1rem, 2vw, 1.75rem); }
.paso { grid-template-columns: 1fr; padding-bottom: 0; }
.paso > *, .paso::before { grid-column: 1; }
.paso::after { left: 3.25rem; right: -1.75rem; top: 1.6rem; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--oro), rgba(200,145,46,.15)); }
.paso:last-child::after { display: none; }
.paso h3 { margin-top: 1rem; }
}
/* ── testimonios ─────────────────────────────────────────────────────────── */
.carrusel { position: relative; }
.carrusel__pista {
display: flex;
gap: clamp(1rem, 2vw, 1.5rem);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-bottom: 1rem;
/* Un poco de aire al final del raíl: sin él, la última tarjeta se pegaba
al borde y se leía como un fallo de render en vez de como «hay más». */
padding-inline-end: clamp(1rem, 4vw, 3rem);
scrollbar-width: none;
}
.carrusel__pista::-webkit-scrollbar { display: none; }
.testimonio {
flex: 0 0 min(100%, 380px);
scroll-snap-align: start;
background: var(--blanco);
border: 1px solid var(--linea);
border-radius: var(--radio);
padding: clamp(1.5rem, 3vw, 2rem);
display: flex;
flex-direction: column;
}
.testimonio__estrellas { display: flex; gap: .15rem; color: var(--oro); margin-bottom: .9rem; }
.testimonio__estrellas svg { width: 17px; height: 17px; }
.testimonio__texto {
font-family: var(--display);
font-size: 1.06rem;
line-height: 1.55;
color: var(--tinta);
margin: 0 0 1.25rem;
}
.testimonio__quien { margin-top: auto; font-size: .88rem; color: var(--texto-2); }
.testimonio__quien strong { display: block; color: var(--verde); font-size: .96rem; }
.carrusel__mandos { display: flex; gap: .6rem; justify-content: center; margin-top: 1.25rem; }
.carrusel__btn {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 100px;
border: 1.5px solid var(--linea-fuerte);
background: var(--blanco);
color: var(--verde);
cursor: pointer;
transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.carrusel__btn:hover { background: var(--verde); color: var(--texto-inv); border-color: var(--verde); }
.carrusel__btn svg { width: 19px; height: 19px; }
.nota-honestidad {
margin-top: 1.25rem;
font-size: .86rem;
line-height: 1.55;
color: var(--texto-2);
max-width: 66ch;
}
/* El aviso de que los testimonios no son reseñas verificadas va DELANTE del
carrusel y con peso: de pie de página no lo lee nadie. */
.nota-honestidad--destacada {
color: var(--tinta);
background: var(--rubor);
border-radius: var(--radio-s);
padding: .85rem 1.1rem;
}
/* Aviso sanitario: es un centro de estética, no un consultorio médico. */
.aviso-salud {
display: grid;
grid-template-columns: 44px 1fr;
gap: 1.1rem;
align-items: start;
padding: clamp(1.4rem, 3vw, 2rem);
border: 1px solid var(--linea);
border-left: 4px solid var(--oro);
border-radius: var(--radio);
background: var(--crema);
}
.aviso-salud svg { width: 26px; height: 26px; color: var(--oro-texto); margin-top: .15rem; }
.aviso-salud h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: .4rem; }
.aviso-salud p { font-size: .95rem; color: var(--texto-2); margin: 0; }
/* ── Instagram ───────────────────────────────────────────────────────────── */
.ig-rejilla {
display: grid;
gap: clamp(.9rem, 2vw, 1.4rem);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
/* Una publicación cuadrada de Instagram necesita su ancho + la cabecera de la
cuenta + la barra de acciones. Con 480 px se recortaba hasta el 63 %. */
.ig-rejilla iframe {
width: 100%;
height: 700px;
border: 0;
border-radius: var(--radio-s);
background: var(--crema);
box-shadow: var(--sombra);
}
/* ── horarios y ubicación ────────────────────────────────────────────────── */
.horario { display: grid; gap: 0; }
.horario__fila {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--linea);
font-size: 1rem;
}
.horario__fila:last-child { border-bottom: 0; }
.horario__dias { font-weight: 700; color: var(--verde); }
.horario__horas { color: var(--texto-2); }
.horario__fila--cerrado .horario__horas { color: var(--texto-2); font-style: italic; }
/* El iframe lleva altura por aspect-ratio, no height:100%: dentro de un
contenedor de altura automática eso es una referencia circular y el mapa
se estiraba hasta el alto de la ventana. */
.mapa {
border-radius: var(--radio);
overflow: hidden;
border: 1px solid var(--linea);
background: var(--crema-hondo);
}
.mapa iframe {
width: 100%;
aspect-ratio: 4 / 3;
min-height: 320px;
max-height: 460px;
border: 0;
display: block;
}
.dato-contacto { display: flex; gap: .85rem; padding: .9rem 0; align-items: flex-start; }
.dato-contacto svg { width: 20px; height: 20px; color: var(--oro-texto); flex: none; margin-top: .2rem; }
.dato-contacto__clave { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 .1rem; }
.dato-contacto p, .dato-contacto address { font-style: normal; margin: 0; color: var(--tinta); }
/* ── CTA final ───────────────────────────────────────────────────────────── */
.cta-final {
position: relative;
color: var(--texto-inv);
background: var(--verde-hondo);
overflow: hidden;
isolation: isolate;
text-align: center;
}
.cta-final__foto {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover;
}
.cta-final::before {
content: "";
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(rgba(23,57,42,.86), rgba(23,57,42,.86));
}
.cta-final h2 { color: var(--texto-inv); }
.cta-final .entradilla { color: var(--texto-inv); margin-inline: auto; }
.cta-final .botonera { justify-content: center; }
/* ── pie ─────────────────────────────────────────────────────────────────── */
/* En crema, no en verde: la silueta del logotipo es verde y sobre verde
desaparecería. Además un pie claro sostiene mejor el aire del spa. */
.pie { background: var(--crema); padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; }
.pie__alto { display: grid; gap: clamp(2rem, 4vw, 3rem); padding-bottom: 2.5rem; border-bottom: 1px solid var(--linea); }
@media (min-width: 880px) { .pie__alto { grid-template-columns: 1.3fr 1fr 1fr; } }
.pie__logo img { width: 150px; margin-bottom: 1.1rem; }
.pie__titulo { font-family: var(--texto-f); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--oro-texto); margin-bottom: 1rem; }
.pie__lista { display: grid; gap: .2rem; font-size: .95rem; color: var(--texto-2); }
.pie__lista li { padding-block: .28rem; }
.pie__lista a { display: inline-block; padding-block: .28rem; color: var(--texto-2); }
.pie__lista a:hover { color: var(--verde); }
.pie__bajo { padding-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; font-size: .84rem; color: var(--texto-2); }
/* ── botón flotante de WhatsApp ──────────────────────────────────────────── */
.wa-flota {
position: fixed;
right: clamp(1rem, 3vw, 1.75rem);
bottom: clamp(1rem, 3vw, 1.75rem);
z-index: 90;
display: flex;
align-items: center;
gap: .6rem;
padding: .85rem 1.3rem .85rem 1rem;
border-radius: 100px;
background: #0e7a3c;
color: #fff;
font-weight: 700;
font-size: .93rem;
box-shadow: 0 12px 30px -10px rgba(14,122,60,.7);
transition: transform .35s var(--ease), background-color .3s var(--ease);
}
.wa-flota:hover { transform: translateY(-3px) scale(1.02); background: #0a5e2e; color: #fff; }
.wa-flota svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 560px) { .wa-flota__texto { display: none; } .wa-flota { padding: .9rem; } }
/* ── movimiento ──────────────────────────────────────────────────────────── */
/* La clase .js la pone el guardián del : si el script no llega a
cargar, se quita y la página se ve entera en vez de quedarse invisible. */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-visible {
opacity: 1; transform: none;
transition: opacity .8s var(--ease-suave), transform .9s var(--ease);
}
/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
.nav { display: none; }
.hamburguesa { display: block; }
}
@media (max-width: 640px) {
.galeria { columns: 2 auto; column-gap: .7rem; } /* 2 columnas hasta 320 px */
.botonera .btn { width: 100%; }
/* Son 25 fichas y en una sola columna la página se iba a 50 pantallas de
móvil. La foto pasa de 4:5 a 3:2 y la ficha respira menos: se recorta
más de un tercio del recorrido sin quitar ni un dato. */
.trat__foto img { aspect-ratio: 3 / 2; }
.trat__cuerpo { padding: 1.1rem 1.1rem 1.25rem; }
.trat__texto { margin-bottom: .9rem; }
.trat__lista { gap: .35rem; margin-bottom: 1rem; }
.trat__meta { margin-bottom: .95rem; padding-top: .75rem; }
.rejilla { gap: 1rem; }
}
/* Los enlaces de contacto y del pie eran objetivos de 19 px de alto. */
.dato-contacto a { display: inline-block; padding-block: .55rem; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.js .reveal { opacity: 1; transform: none; }
.carrusel__pista { scroll-behavior: auto; }
}
@media print {
.cabecera, .menu, .wa-flota, .lightbox, .hamburguesa { display: none !important; }
}
/* El corazón dentro de las píldoras de recuento es un