/* =============================================================
DANIT BOZAGLO · קוסמטיקאית לטיפולים אסתטיים · גדרה
v4 · el sistema visual de venetianspa.ca, en hebreo y RTL
PALETA DEL DESIERTO — pedida por Danit: nada de oro, tonos suaves
que transmitan calma.
franja #ddd2c3 las manchas grandes: portada, contacto, pie
texto #82705d los titulares sobre la arena
filete #c0ab96 lineas finas y adornos
arena #f2ede5 el fondo de la pagina
duna #e8e0d4 tarjetas de opiniones
El marron de las FRANJAS se aclaro a peticion de Zair (10/9): el
anterior pesaba demasiado. Pero el de los TITULARES se queda mas
hondo a proposito — son letras finas, no manchas: aclararlas las
emborrona. Por eso son dos tonos y no uno.
La pagina es RTL: propiedades LOGICAS (inline-start / inline-end)
para que el diseno se refleje solo.
Escrita PARA EL MOVIL primero (80 % de las visitas). Lo que se
anima usa transform, opacity y clip-path: nada que recalcule el
layout. Las posiciones fijas de las secciones ancladas las lleva
GSAP; aqui solo va el estado inicial y el respaldo sin JS.
============================================================= */
/* =============================================================
1. Tokens
============================================================= */
:root {
--clay: #c0ab96; /* barro claro: filetes y adornos */
--clay-band: #ddd2c3; /* las FRANJAS: portada, contacto, pie. Se
limpio de amarillo (antes #ddd2c3): mezclado
con el video daba un caqui turbio, y Danit
pidio un color "mas de lujo y mas limpio" */
--clay-deep: #82705d; /* texto: titulares sobre la arena */
--on-band: #4a4038; /* el texto que va ENCIMA de una franja. Sobre
un barro tan claro el blanco da 1,5 a 1 y no
se lee; en tinta da 7,4 a 1 */
--on-band-2: rgba(74, 64, 56, .72); /* lo secundario de las franjas */
--on-band-line: rgba(74, 64, 56, .22); /* sus filetes */
--cream: #efe8dd; /* arena: el fondo de la pagina */
--cream-2: #efe8dd; /* la seccion en arco. MISMO tono que el fondo:
un tercer color en la misma pantalla se lee
como un panel pegado encima, no como diseno.
El arco se sigue viendo, porque lo dibuja su
curva contra la franja de arriba */
--sand: #ded3c4; /* duna: tarjetas de opiniones */
--deep: #463b31; /* barro profundo: la franja del manifiesto. La
pagina no tenia ni un momento oscuro y todo
pesaba igual. Crema encima da 9 a 1 */
--white: #ffffff;
--ink: #3f3830;
--ink-soft: #6d6055; /* el cuerpo de texto */
--line: rgba(176, 154, 131, .35);
/* El glow de las opiniones: rosa del desierto, apagado, para que
acompane a la arena en vez de competir con ella. */
--glow-rim: rgba(255, 243, 236, .95);
--glow: rgba(205, 150, 135, .42);
--glow-soft: rgba(205, 150, 135, .18);
--glow-in: rgba(252, 231, 221, .42);
--serif: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
--sans: "Heebo", "Arial Hebrew", Arial, system-ui, sans-serif;
--gutter: clamp(1.25rem, 5vw, 4rem);
--maxw: 1200px;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--nav-h: 84px;
}
/* =============================================================
2. Reset y base
============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
/* NADA de scroll-behavior: smooth — del suavizado se encarga Lenis, y dos
suavizados a la vez se pelean. */
html { background: var(--cream); }
body {
font-family: var(--sans);
font-size: 16px; font-weight: 300; line-height: 1.6;
color: var(--ink-soft); background: transparent;
-webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
overflow-x: clip;
position: relative;
}
/* El fondo no es un crema plano: es crema con LUZ y con GRANO, como una
pared de microcemento iluminada. Dos capas fijas, ambas casi invisibles
por separado — juntas es lo que hace que se sienta papel bueno y no
pantalla. Van en pseudo-elementos fijos (no en background-attachment,
que en iPhone da tirones).
1 · luz: dos manchas muy suaves, una blanca arriba a la derecha y una
rosada abajo a la izquierda, en el mismo crema.
2 · grano: ruido fino al 5 %, multiplicado, encima de todo. */
/* Degradado en los BORDES: el centro se queda en el crema claro y hacia
los lados se va a un champan mas profundo, como un fondo de estudio
iluminado desde el centro. Es lo que convierte el color plano en un
escenario. Cuatro capas, de arriba abajo:
1 · los laterales: dorado transparente que se apaga hacia el centro
2 · arriba y abajo: lo mismo, mas suave
3 · una luz blanca en el centro, para que el contraste con los
bordes sea de LUZ y no de suciedad
4 · un leve calor rosado abajo a la izquierda */
body::before {
content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(to right,
rgba(176, 158, 138, .24) 0%, rgba(176, 158, 138, .11) 9%, rgba(176, 158, 138, 0) 30%,
rgba(176, 158, 138, 0) 70%, rgba(176, 158, 138, .11) 91%, rgba(176, 158, 138, .24) 100%),
linear-gradient(to bottom,
rgba(176, 158, 138, .10) 0%, rgba(176, 158, 138, 0) 18%,
rgba(176, 158, 138, 0) 82%, rgba(176, 158, 138, .10) 100%),
radial-gradient(70vw 60vh at 50% 42%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 65%),
radial-gradient(72vw 54vw at 8% 94%, rgba(205, 150, 135, .10), rgba(205, 150, 135, 0) 70%);
}
body::after {
content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none;
opacity: .05; mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px 220px;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul, ol, dl { list-style: none; padding: 0; margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--clay-deep); line-height: 1.08; text-wrap: balance; }
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link { position: fixed; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 999; padding: .6rem 1.1rem; background: var(--ink); color: var(--cream); border-radius: 6px; }
.skip-link:focus { inset-block-start: 1rem; }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--clay-band); color: var(--white); }
/* =============================================================
3. Tipografia — las escalas de Venetian (90 / 65 / 55 / 25 / 15)
============================================================= */
.h-xl { font-size: clamp(2.5rem, 9vw, 5.6rem); letter-spacing: -.004em; line-height: 1.06; }
.h-lg { font-size: clamp(2.1rem, 6.8vw, 4.1rem); line-height: 1.08; }
.kicker-lg { font-size: clamp(1.1rem, 2.4vw, 1.55rem); line-height: 1.3; }
.p { font-size: clamp(.98rem, 1.1vw, 1.05rem); line-height: 1.6; max-width: 32rem; color: var(--ink-soft); }
/* SplitType parte el texto en lineas/palabras/letras. Cada trozo se
vuelve inline-block; en un parrafo RTL los inline-block fluyen de
derecha a izquierda, asi que el hebreo se lee bien. Que no se rompan
por dentro: */
.line, .word, .char { display: inline-block; }
.word { white-space: nowrap; }
/* =============================================================
4. Botones — pildora de Venetian: borde fino, 30px de radio
============================================================= */
.pill {
display: inline-flex; align-items: center; justify-content: center;
padding: .72rem 1.8rem; border-radius: 30px;
font-family: var(--serif); font-size: 1rem; line-height: 1.3;
color: var(--clay-deep); border: 1px solid var(--clay-deep); background: transparent;
transition: color .3s ease, background-color .3s ease, border-color .3s ease;
min-height: 44px;
}
.pill:hover { color: var(--white); background: var(--clay-band); }
.pill-light {
color: var(--on-band); border-color: var(--on-band);
background: rgba(250, 247, 242, .5);
-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.pill-light:hover { color: var(--cream); background: var(--on-band); border-color: var(--on-band); }
.pill-solid { color: var(--white); background: var(--clay-band); border-color: var(--clay-band); }
.pill-sm { padding: .5rem 1.25rem; font-size: .95rem; min-height: 40px; }
.btn-row { margin-block-start: 1.75rem; }
.btn-row-center { display: flex; justify-content: center; margin-block-start: 2.5rem; }
/* =============================================================
5. Adornos de linea
============================================================= */
.orn { color: var(--clay); fill: none; }
.orn-sm { width: 120px; height: 30px; margin-block-end: 1.25rem; opacity: .9; }
.orn-col { width: 26px; height: 78px; margin-block-end: 1.5rem; }
.orn-corner { position: absolute; width: 34px; height: 42px; inset-block-start: -22px; inset-inline-end: -8px; }
.orn-big {
position: absolute; width: min(70vw, 360px); height: auto; aspect-ratio: 32 / 40;
inset-inline-start: 12%; inset-block-start: 10%;
opacity: .5; pointer-events: none; z-index: 0;
transform-origin: center;
}
/* =============================================================
6. Navegacion — transparente sobre el hero; al bajar, fondo claro
============================================================= */
.nav {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 50;
color: var(--white);
transition: color .5s ease, min-height .5s ease;
}
.nav::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(to left, #f5f3ef 0%, #f3ede1 26%, #ffffff 100%);
opacity: 0; transition: opacity .5s ease;
}
.nav.is-scrolled { color: var(--clay-deep); }
.nav.is-scrolled::before { opacity: 1; }
.nav-in {
width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
min-height: var(--nav-h); display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .7rem; min-height: 44px; }
.brand-mark { width: 26px; height: 32px; color: currentColor; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name { font-family: var(--serif); font-size: 1.15rem; }
.brand-role { font-size: .68rem; letter-spacing: .06em; opacity: .85; }
.nav-links { display: none; gap: 1.6rem; margin-inline-start: auto; font-family: var(--serif); font-size: 1rem; }
.nav-links a { padding-block: .4rem; text-decoration: underline transparent; text-underline-offset: .35em; transition: text-decoration-color .3s ease; }
.nav-links a:hover { text-decoration-color: currentColor; }
.nav-cta { display: none; color: currentColor; border-color: currentColor; }
.nav.is-scrolled .nav-cta:hover { color: var(--cream); background: var(--clay-deep); }
.nav-toggle { margin-inline-start: auto; width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; }
.nav-toggle span { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .3s ease, opacity .3s ease; }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.nav-mobile {
display: grid; gap: .25rem; padding: .5rem var(--gutter) 1.5rem;
background: var(--cream-2); color: var(--clay-deep);
font-family: var(--serif); font-size: 1.2rem;
}
.nav-mobile[hidden] { display: none; }
.nav-mobile a { padding-block: .7rem; border-block-end: 1px solid var(--line); }
.nav-mobile .pill { margin-block-start: 1rem; border: 0; justify-self: start; }
@media (min-width: 960px) {
.nav-links, .nav-cta { display: inline-flex; }
.nav-toggle, .nav-mobile { display: none; }
.nav-cta { margin-inline-start: 0; }
}
/* =============================================================
7. HERO — franja dorada + video + persianas
-------------------------------------------------------------
Es mas alto que la pantalla a proposito: ese recorrido extra es
el que usan las persianas para girar mientras la seccion en arco
se monta encima. Venetian: 182vh de alto y -625px de solape.
============================================================= */
.hero {
position: relative; height: 165svh; min-height: 720px;
background: var(--clay-band); color: var(--on-band); overflow: hidden;
z-index: 0;
}
.hero-media {
position: absolute; inset: 0; z-index: 0;
background: var(--clay-band) url("assets/video/poster.jpg?v=20260915l") center / cover no-repeat;
}
.hero-video {
width: 100%; height: 100%; object-fit: cover;
/* Desaturado a proposito: asi manda el tinte de la franja y el conjunto
sale parejo. Lo quite una vez pensando que Zair queria el color crudo
del video; queria justamente ESTE. Se queda. */
filter: saturate(.76) brightness(1) contrast(1.05);
}
/* El velo tine el video del color de la franja. Al 0,80 lo borraba: el
cuentagotas, la gota que cae y el anillo en el agua quedaban en un
borron palido, y Danit lo echo de menos ("como una tapeteta"). Al 0,42
se ve lo que pasa y el color sigue siendo el de la franja.
PLANO, nunca "multiplicar": multiplicar dos tonos medios da barro. */
/* La gota cuando el video NO puede arrancar (iPhone en bajo consumo):
una imagen animada en el mismo hueco, con el mismo tratamiento de color. */
.hero-gota {
position: absolute; inset: 0; display: block; width: 100%; height: 100%;
object-fit: cover; filter: saturate(.76) brightness(1) contrast(1.05);
}
.hero-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(221, 210, 195, .10) 0%, rgba(221, 210, 195, .20) 40%, rgba(221, 210, 195, .46) 100%); opacity: 1;
}
/* Las lamas las crea main.js dentro de .hero-cover. Cada una es una
franja dorada girada 90 grados (invisible) que se endereza al bajar.
SIN perspectiva en el contenedor: con perspectiva, una lama girada 90
grados que no esta en el centro se proyecta y asoma como una raya. */
.hero-cover { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-cover .blind {
position: absolute; inset-block: 0; background: var(--clay-band);
transform-origin: left center; transform: rotateY(-90deg);
transform-style: preserve-3d; backface-visibility: hidden;
}
/* AQUI HABIA UN VELO y sobra: se puso cuando el titular era BLANCO sobre
una franja oscura. Ahora el titular es oscuro sobre una franja clara y no
necesita apoyo ninguno.
Ademas hacia dano: ocupaba el 62 % de abajo de .hero-in, que mide una
pantalla — asi que terminaba de golpe a la altura de una pantalla y
dejaba un RECTANGULO mas claro con el borde marcado a media portada. */
.hero-in {
position: absolute; inset-inline: 0; inset-block-start: 0;
height: 100svh; min-height: 640px;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 0 var(--gutter) clamp(2.5rem, 9vh, 5.5rem);
z-index: 2;
max-width: var(--maxw); margin-inline: auto;
}
.hero-title {
color: var(--on-band);
text-shadow: 0 1px 14px rgba(250, 247, 242, .9), 0 0 36px rgba(250, 247, 242, .7);
font-size: clamp(2.7rem, 11.5vw, 5.8rem); line-height: 1.06; letter-spacing: -.004em;
}
.hero-title .line { display: block; }
.hero-cta { margin-block-start: 1.6rem; }
/* La invitacion a bajar, debajo del boton: el hilo y la GOTA que cae por
dentro. Es un adorno, asi que se va en cuanto empiezas a bajar — dejarla
dando vueltas toda la pagina la convierte en ruido. */
.hero-cue {
text-shadow: 0 1px 10px rgba(250, 247, 242, .9);
margin-block-start: clamp(1.8rem, 6vh, 3rem);
display: grid; justify-items: center; gap: .5rem;
font-size: .68rem; letter-spacing: .2em; color: var(--on-band);
opacity: .72; transition: opacity .5s ease;
}
.hero-cue i {
display: block; position: relative; overflow: hidden;
width: 1px; height: 34px; background: rgba(74, 64, 56, .25);
}
.hero-cue i::after {
content: ""; position: absolute; inset-inline: 0; height: 40%;
background: var(--on-band);
animation: gota 2.6s cubic-bezier(.16, 1, .3, 1) infinite;
}
/* Cae desde arriba del hilo y sigue hasta salir por abajo. */
@keyframes gota {
0% { transform: translateY(-100%); }
60%, 100% { transform: translateY(250%); }
}
.hero-cue.is-off { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .hero-cue i::after { animation: none; } }
/* =============================================================
8. ARCO — la seccion que se monta sobre el hero
============================================================= */
.arch {
position: relative; z-index: 2;
margin-block-start: -62svh;
background: var(--cream-2);
border-start-start-radius: 46vw; border-start-end-radius: 46vw;
overflow: hidden;
padding-block: clamp(5rem, 16vw, 9rem) clamp(4rem, 10vw, 7rem);
}
.arch-grid { display: grid; gap: 2.5rem; align-items: center; }
.arch-text { position: relative; }
.arch-text .h-lg { margin-block: .6rem .5rem; }
.arch-text .kicker-lg { margin-block-end: 1.25rem; }
.arch-media { position: relative; justify-self: center; width: min(78vw, 365px); }
/* Foto en arco (Venetian: 450px de radio arriba, 365x500) */
.arch-img { border-start-start-radius: 999px; border-start-end-radius: 999px; overflow: hidden; aspect-ratio: 365 / 500; }
.arch-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
@media (min-width: 900px) {
.arch { margin-block-start: -60svh; border-start-start-radius: 40vw; border-start-end-radius: 40vw; }
.arch-grid { grid-template-columns: 1.1fr .9fr; gap: 4rem; }
.arch-media { justify-self: end; }
}
/* =============================================================
9. SERVICIOS — carrusel de tarjetas con foto
============================================================= */
.services { padding-block: clamp(4.5rem, 12vw, 8rem); overflow: hidden; }
.sec-head-center { text-align: center; display: grid; justify-items: center; gap: 1rem; margin-block-end: clamp(2.5rem, 6vw, 4rem); }
.sec-head-center .h-xl { max-width: 20ch; }
.svc-swiper { padding-inline: var(--gutter); }
.svc-swiper .swiper-wrapper { align-items: stretch; }
.svc-swiper .swiper-slide { width: min(78vw, 417px); height: auto; display: flex; }
/* La tarjeta: foto de fondo, titulo blanco abajo (Venetian: 417x590, 30px de relleno) */
/* La tarjeta: la FOTO arriba, entera y sin velo, y el texto DEBAJO sobre
papel arena. Antes el texto iba encima de la foto con un degradado
oscuro para poder leerlo, y ese degradado se comia la mitad de abajo de
la foto — que en los antes/despues es justo el "antes". Danit
(15/9/2026): "arriba clara como debe, abajo oscura, casi no se nota el
cambio". Asi la foto se ve tal cual y el texto se lee sin trucos.
La foto va en un pseudo-elemento: hereda --bg del atributo style. */
.svc-card {
position: relative; display: flex; flex-direction: column; flex: 1;
width: 100%; background: var(--sand);
overflow: hidden; border-radius: 4px;
transform-origin: center;
}
.svc-card::before {
content: ""; display: block; width: 100%; aspect-ratio: 4 / 5;
background: var(--bg) center / cover no-repeat;
}
/* El antes/despues de anti-aging: dos fotos apiladas, mas alto que 4:5. No
se recorta (se comeria una nariz o una barbilla). En el telefono la
tarjeta es mas alta y punto; en el carrusel de ordenador la foto se
encaja ENTERA en el hueco 4:5 con papel arena a los lados, para que las
doce tarjetas sigan a la misma altura. */
.svc-card-alta::before { aspect-ratio: 4 / 5; background-size: contain; background-color: var(--sand); }
/* La tarjeta de anti-aging ensena TRES fotos: la de portada (la toalla con
su marca) y, cada pocos segundos, un fundido a cada antes/despues. Danit
mando las "bonitas" para la tarjeta y los antes/despues "para anadir".
Solo CSS: ni gestos ni JS, nada que pueda abrir Instagram por error.
Las capas van ENCIMA de la foto de portada y ocupan su mismo hueco. */
.svc-gal { position: absolute; inset-block-start: 0; inset-inline: 0; aspect-ratio: 4 / 5; overflow: hidden; pointer-events: none; }
.svc-gal i {
position: absolute; inset: 0; opacity: 0;
background: var(--sand) var(--bg) center / contain no-repeat;
animation: svc-gal 14s ease-in-out infinite;
}
.svc-gal i:nth-child(2) { animation-name: svc-gal-2; }
/* Ciclo de 14 s: portada 0-5 s, antes/despues 1 en 6-9, antes/despues 2 en
10-13, y vuelta a la portada. Fundidos de un segundo. */
@keyframes svc-gal { 0%, 35.7% { opacity: 0; } 42.9%, 64.3% { opacity: 1; } 71.4%, 100% { opacity: 0; } }
@keyframes svc-gal-2 { 0%, 64.3% { opacity: 0; } 71.4%, 92.9% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .svc-gal i { animation: none; } }
.svc-title {
position: relative; color: var(--clay-deep);
padding: clamp(1rem, 3vw, 1.3rem) clamp(1rem, 3vw, 1.4rem) 0;
font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.05; letter-spacing: -.01em;
}
.svc-card .svc-note-foto {
position: relative; margin: 0;
padding: .55rem clamp(1rem, 3vw, 1.4rem) clamp(1.1rem, 3vw, 1.5rem);
font-family: var(--sans); font-size: .95rem; font-weight: 400; line-height: 1.5;
color: var(--ink); opacity: 1;
}
.svc-nav {
position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 5;
width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--clay-deep); background: rgba(242, 237, 229, .85);
display: none; place-content: center; transition: background .3s ease, color .3s ease;
}
/* Bordes fisicos, por lo mismo que en las flechas de las opiniones. */
.svc-nav::before { content: ""; width: 9px; height: 9px; border-right: 1px solid currentColor; border-top: 1px solid currentColor; }
.svc-prev { inset-inline-start: calc(var(--gutter) - 12px); }
.svc-prev::before { transform: rotate(45deg); }
.svc-next { inset-inline-end: calc(var(--gutter) - 12px); }
.svc-next::before { transform: rotate(-135deg); }
.svc-nav:hover { background: var(--clay-band); color: var(--white); }
/* Tarjeta SIN foto: papel color arena, numero arriba, titulo en barro y
una linea de apoyo. El adorno de gota, muy tenue, al fondo. */
.svc-plain {
background: linear-gradient(160deg, #efe7db 0%, #e6dccd 100%);
border: 1px solid rgba(176, 154, 131, .55);
display: grid; grid-template-rows: auto 1fr auto; align-items: start;
padding: clamp(1.5rem, 4vw, 2.2rem);
}
.svc-plain::after { display: none; }
.svc-plain::before {
content: ""; position: absolute; inset-block-end: -14%; inset-inline-start: -12%;
width: 74%; aspect-ratio: 32 / 40; opacity: .1;
background: var(--clay);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.svc-n {
position: relative; z-index: 1;
font-family: var(--serif); font-size: .95rem; color: var(--clay-deep); opacity: .7;
padding-block-end: .8rem; border-block-end: 1px solid var(--line);
}
.svc-plain .svc-title { color: var(--clay-deep); align-self: end; }
/* Aqui estaba .svc-note, la frase de las tarjetas de SOLO TEXTO (marron
sobre papel arena). Esas tarjetas se cambiaron por fotos reales, y la
regla se quedo pisandole el color a las frases de las tarjetas con foto.
Retirada. La clase sigue en el HTML porque no molesta. */
/* Las flechas del carrusel solo en ordenador: en el telefono se arrastra.
OJO: este media query SOLO puede contener esto. El bloque de arriba
estuvo metido aqui dentro por error y las tarjetas sin foto se veian
en blanco en el movil, que es donde mira el 80 % de la gente. */
@media (min-width: 900px) { .svc-nav { display: grid; } }
/* TELEFONO: la fila se mueve de LADO con el scroll vertical. Zair
(16/9/2026): "en vertical ocupa mucho y no se ve profesional; que
mientras bajas se deslice hacia el lado y no se salte ninguna
categoria". GSAP fija la fila y la va corriendo (main.js). Aqui solo el
hueco: una tira con las doce tarjetas, recortada por el contenedor. */
@media (max-width: 899px) {
.svc-swiper { overflow: hidden; }
.svc-swiper .swiper-wrapper { display: flex; gap: 14px; will-change: transform; }
.svc-swiper .swiper-slide { flex: 0 0 auto; }
}
/* =============================================================
9b. CINE — el video de la clinica, anclado, con entrada y salida
llevadas por el scroll
-------------------------------------------------------------
El estado INICIAL (pequeno, redondeado, con velo) lo pone el CSS;
GSAP lo lleva al estado lleno y de vuelta. Sin JS se ve como un
video normal, centrado, y se reproduce solo.
============================================================= */
.cine { position: relative; height: 100svh; min-height: 640px; overflow: hidden; }
.cine-pin { position: relative; height: 100%; display: grid; place-items: center; }
.cine-frame {
position: relative; overflow: hidden; contain: paint;
width: min(72vw, 405px); aspect-ratio: 9 / 16; max-height: 82svh;
border-radius: 28px;
box-shadow: 0 60px 120px -60px rgba(42, 29, 27, .6);
transform-origin: center;
background: var(--sand);
}
/* La imagen fija manda hasta que el lienzo confirma que puede pintar. */
.cine-still, .cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-canvas { opacity: 0; transition: opacity .5s ease; }
.cine-frame.is-live .cine-canvas { opacity: 1; }
.cine-frame.is-live .cine-still { opacity: 0; }
/* Velo dorado que se retira al crecer: en pequeno se lee como una tarjeta
dorada; a pantalla completa se ve limpio. */
.cine-veil { position: absolute; inset: 0; background: var(--clay-band); mix-blend-mode: multiply; opacity: .55; pointer-events: none; }
/* El apoyo de los subtitulos: un degradado oscuro y calido en el tercio de
abajo del cuadro, donde van las frases. La pelicula pasa de un interior
crema a un cielo claro, y sobre el cielo el texto claro se perdia — Danit
lo vio: "apenas se ve". Con esto se lee sobre cualquier fotograma. */
.cine-frame::after {
content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 48%;
background: linear-gradient(to top, rgba(58, 46, 38, .62) 0%, rgba(58, 46, 38, .34) 45%, rgba(58, 46, 38, 0) 100%);
pointer-events: none; z-index: 1;
}
/* Las frases: letra a letra, en marfil con un halo dorado (como el nicho de
luz de su pared), un rotulo pequeno arriba y una linea de luz debajo.
El estado inicial es INVISIBLE; GSAP lo lleva con el scroll. */
.cine-words {
position: absolute; inset-inline: 0; inset-block-end: clamp(2.2rem, 9vh, 5rem);
z-index: 2; text-align: center; padding-inline: var(--gutter); pointer-events: none;
display: grid; grid-template-rows: auto auto auto; justify-items: center; row-gap: .8rem;
}
.cine-kicker {
grid-area: 1 / 1; margin: 0; opacity: 0;
font-family: var(--sans); font-weight: 400; font-size: .74rem; letter-spacing: .34em;
color: #fffaf3; text-shadow: 0 1px 2px rgba(40, 30, 24, .7), 0 0 14px rgba(40, 30, 24, .5);
}
.cine-line {
grid-area: 2 / 1; margin: 0;
font-family: var(--serif); font-weight: 400;
font-size: clamp(2rem, 7.8vw, 4.3rem); line-height: 1.14; letter-spacing: -.005em;
color: #fffaf3; max-width: min(92vw, 22ch);
/* Sombra que SEPARA: una oscura y pegada, y una difusa. El halo dorado
de antes hacia bonito pero no separaba el texto de un cielo claro. */
text-shadow:
0 1px 2px rgba(40, 30, 24, .7),
0 2px 10px rgba(40, 30, 24, .45),
0 0 30px rgba(40, 30, 24, .35);
perspective: 600px;
}
.cine-line .char { display: inline-block; opacity: 0; }
.cine-rule {
grid-area: 3 / 1; display: block; width: min(42vw, 220px); height: 1px;
background: linear-gradient(to right, transparent, #f6ece0, transparent);
box-shadow: 0 0 12px rgba(246, 236, 224, .85);
transform: scaleX(0); opacity: 0;
}
/* En el telefono el video vertical LLENA la pantalla al crecer. En
ordenador crece hasta un panel vertical alto, centrado: a sangre en una
pantalla apaisada se convertiria en una franja borrosa. */
@media (min-width: 900px) {
.cine-frame { width: auto; height: 62svh; max-height: none; }
}
html:not(.motion-on) .cine { height: auto; padding-block: clamp(3rem, 8vw, 5rem); }
html:not(.motion-on) .cine-veil { display: none; }
html:not(.motion-on) .cine-canvas { display: none; }
html:not(.motion-on) .mani-text .word { opacity: 1; }
html:not(.motion-on) .cine-words { position: static; display: block; margin-block-start: 1.5rem; text-align: center; }
html:not(.motion-on) .cine-kicker, html:not(.motion-on) .cine-line, html:not(.motion-on) .cine-line .char { opacity: 1; }
html:not(.motion-on) .cine-line { color: var(--clay); text-shadow: none; margin-block: .5rem; max-width: none; }
html:not(.motion-on) .cine-kicker { color: var(--clay); text-shadow: none; }
html:not(.motion-on) .cine-rule { display: none; }
/* =============================================================
10. OPINIONES — seccion anclada: las tarjetas cruzan la pantalla
-------------------------------------------------------------
GSAP la fija durante 3000 px de scroll. Las tarjetas empiezan por
debajo (y = +100vh) y salen por arriba. Aqui solo su sitio
horizontal (--x) y su tamano.
Sin fondo propio: deja pasar la luz del fondo general.
============================================================= */
.reviews-head {
position: relative; z-index: 2;
padding-block-start: calc(var(--nav-h) + clamp(1.5rem, 6vh, 4rem));
}
/* =============================================================
10b. הגישה שלי — el manifiesto, sobre franja oscura
-------------------------------------------------------------
El unico momento oscuro de la pagina. Su frase fuerte al tamano
del titular de la portada; el resto, debajo y en pequeno.
============================================================= */
.mani {
position: relative; overflow: hidden;
background: var(--deep); color: var(--cream);
padding-block: clamp(5rem, 15vw, 9rem);
}
/* Una luz muy suave desde arriba, para que la franja no sea un rectangulo
plano — la misma idea que el fondo de la pagina, al reves. */
.mani::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(80vw 60vh at 50% -10%, rgba(224, 205, 180, .16), rgba(224, 205, 180, 0) 70%);
}
.mani-in { position: relative; display: grid; justify-items: center; text-align: center; }
.mani .orn { color: var(--clay); opacity: .6; }
.mani-k {
font-size: .76rem; letter-spacing: .34em; color: var(--clay);
margin-block-end: clamp(1.4rem, 4vw, 2rem);
}
.mani-lead {
margin: 0; font-family: var(--serif); font-weight: 400;
font-size: clamp(2.1rem, 8.4vw, 4.4rem); line-height: 1.1; letter-spacing: -.006em;
color: var(--cream); max-width: 22ch; text-wrap: balance;
}
.mani-text {
margin-block-start: clamp(1.6rem, 4.5vw, 2.4rem);
max-width: 44ch; font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.7;
color: var(--cream); opacity: .78;
}
/* Las palabras se ENCIENDEN con el scroll: parten apagadas. */
.mani-text .word { opacity: .22; }
/* =============================================================
11. CLINICA — la direccion como placa grabada
-------------------------------------------------------------
Aqui habia una foto que era un fotograma del video generado y se
notaba. La direccion en grande funciona mejor: es de verdad, y es
justo lo que se busca en esta seccion.
============================================================= */
.escape {
position: relative; overflow: hidden;
padding-block: clamp(5rem, 14vw, 8rem);
min-height: 86svh; display: grid; align-items: center;
color: var(--cream);
}
.escape-media { position: absolute; inset: 0; z-index: 0; }
.escape-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* El velo: oscuro abajo, donde va el texto, y transparente arriba, para que
su cartel siga viendose. Sin el, crema sobre pared crema no se lee. */
.escape-media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(to top, rgba(48, 39, 32, .86) 0%, rgba(48, 39, 32, .68) 45%, rgba(48, 39, 32, .42) 75%, rgba(48, 39, 32, .28) 100%);
}
.escape-in { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; }
.escape .orn { color: var(--cream); opacity: .75; }
.escape-in .h-lg { color: var(--cream); text-shadow: 0 2px 14px rgba(40, 32, 26, .5); }
.escape-in .p { color: var(--cream); opacity: .9; text-shadow: 0 1px 10px rgba(40, 32, 26, .5); }
/* El boton, sobre la foto, necesita cuerpo: un relleno traslucido y un
desenfoque detras. Un borde fino a secas se pierde sobre una imagen. */
.escape-in .pill-light {
background: rgba(242, 237, 229, .14);
-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
border-color: rgba(242, 237, 229, .7);
}
.escape-in .pill-light:hover { background: var(--cream); color: var(--deep); border-color: var(--cream); }
.escape-in .h-lg { margin-block: .25rem 1.1rem; max-width: 14ch; }
.escape-in .p { margin-inline: auto; }
.plate {
margin-block-start: clamp(2.2rem, 6vw, 3.2rem);
border-color: rgba(242, 237, 229, .32);
display: grid; justify-items: center; gap: .35rem;
font-style: normal;
padding-block: clamp(1.4rem, 4vw, 2rem);
border-block: 1px solid var(--line);
min-width: min(90vw, 320px);
}
.plate-k { font-size: .74rem; letter-spacing: .3em; color: var(--cream); opacity: .75; }
.plate-street { font-family: var(--serif); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.1; color: var(--cream); text-shadow: 0 2px 12px rgba(40, 32, 26, .5); }
.plate-city { font-size: .95rem; letter-spacing: .18em; color: var(--cream); opacity: .8; }
/* La foto de la recepcion, debajo de la placa: un panel vertical centrado,
con el mismo arco suave de arriba que usa la seccion "אודות". */
.escape-img {
margin-block-start: clamp(2.5rem, 7vw, 3.5rem);
width: min(82vw, 400px); aspect-ratio: 365 / 500; overflow: hidden;
border-start-start-radius: 999px; border-start-end-radius: 999px;
}
.escape-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* =============================================================
12. TRABAJOS — rejilla + Instagram
============================================================= */
.works { padding-block: clamp(4.5rem, 12vw, 8rem); }
.works-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .75rem 2rem; margin-block-end: clamp(1.75rem, 4vw, 2.5rem); }
.handle { font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.4rem); text-decoration: underline transparent; text-underline-offset: .3em; transition: text-decoration-color .3s ease; }
.handle:hover { text-decoration-color: currentColor; }
.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3px; }
.work { overflow: hidden; aspect-ratio: 1; background: var(--sand); }
.work img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) { .works-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; } }
@media (min-width: 1100px) { .works-grid { grid-template-columns: repeat(6, 1fr); } }
/* =============================================================
13. OPINIONES - carrusel, una opinion a la vez
-------------------------------------------------------------
Antes cruzaban la pantalla de abajo arriba con la pagina anclada.
Danit (15/9/2026): "que las opiniones esten mas ordenadas, cuesta
leerlas, suben muy rapido". Con razon: un texto que se mueve no se
lee. Ahora es un carrusel que se pasa solo muy despacio (7 s), se
para en cuanto la tocas y lleva flechas y puntos.
Todas las tarjetas miden lo MISMO (flex stretch) para que la pagina
no salte de alto al cambiar de opinion.
============================================================= */
.reviews {
position: relative; overflow: hidden; background: transparent;
padding-block: clamp(4.5rem, 12vw, 8rem);
}
.reviews-head { position: relative; z-index: 3; }
.reviews-head .h-xl { max-width: 14ch; }
/* "המלצות מלקוחות": el rotulo que pidio Danit, para que no se llegue a las
opiniones "sin titulo". */
.rev-k {
margin: 0 0 .7rem; font-family: var(--sans); font-weight: 400;
font-size: .9rem; letter-spacing: .14em; color: var(--clay-deep);
}
.rev-swiper {
position: relative; z-index: 2;
margin-block-start: clamp(1.8rem, 6vw, 3rem);
padding-inline: var(--gutter);
/* El BRILLO de las tarjetas sobresale por arriba y por abajo, y Swiper
recorta todo lo que se sale del carrusel (overflow: hidden): el brillo
acababa en una linea recta sobre el arco (Zair, 17/9/2026). Ahora se
recorta solo de LADO; arriba y abajo quedan 80 px libres. No mueve
nada de sitio. */
overflow: visible;
-webkit-clip-path: inset(-80px 0 -80px 0);
clip-path: inset(-80px 0 -80px 0);
}
/* Ancho de tarjeta fijo (como el carrusel de tratamientos): asi asoma un
dedo de la siguiente y se entiende que hay que arrastrar. */
.rev-swiper .swiper-wrapper { align-items: stretch; }
.rev-swiper .swiper-slide { width: min(82vw, 400px); height: auto; display: flex; }
.rev-card {
position: relative; flex: 1;
display: flex; flex-direction: column; justify-content: center;
padding: clamp(3.4rem, 12vw, 4.4rem) clamp(1.4rem, 5vw, 2.2rem) clamp(1.6rem, 5vw, 2.2rem);
background: var(--sand);
border-start-start-radius: 140px; border-start-end-radius: 140px;
border-end-start-radius: 6px; border-end-end-radius: 6px;
text-align: center;
box-shadow: inset 0 0 0 1.5px var(--glow-rim), inset 0 0 26px var(--glow-in);
}
/* El halo detras del marco. Quieto: ya no hay movimiento en esta seccion. */
.rev-card::before {
content: ""; position: absolute; inset: -4px; z-index: -1;
border-radius: inherit;
box-shadow: 0 0 0 1px var(--glow-rim), 0 0 18px 4px var(--glow), 0 0 44px 12px var(--glow-soft);
opacity: .85;
}
/* La comilla de adorno. Va el caracter de verdad; antes habia un byte roto
y en el telefono de Danit salia un cuadrado con una D al lado. */
.rev-card::after {
content: "”";
position: absolute; inset-block-start: clamp(1rem, 4vw, 1.5rem); inset-inline-start: 50%;
transform: translateX(-50%);
font-family: var(--serif); font-size: clamp(3rem, 9vw, 3.8rem); line-height: .6;
color: var(--clay); opacity: .42; pointer-events: none;
}
.rev-q {
margin: 0; font-family: var(--serif); font-weight: 300;
font-size: clamp(1rem, 3.2vw, 1.14rem); line-height: 1.65;
color: var(--ink); text-wrap: pretty;
}
.rev-src {
display: block; margin-block-start: 1rem;
font-family: var(--sans); font-size: .68rem; letter-spacing: .14em;
color: var(--ink-soft); opacity: .8;
}
/* Mandos: flechas (solo con raton) y puntos */
.rev-ctrl {
display: flex; align-items: center; justify-content: center; gap: 1rem;
margin-block-start: clamp(1.4rem, 5vw, 2rem);
}
.rev-arrow {
display: none; place-content: center; flex: 0 0 auto;
width: 44px; height: 44px; border-radius: 50%;
border: 1px solid var(--clay-deep); background: rgba(242, 237, 229, .85);
color: var(--clay-deep); transition: background .3s ease, color .3s ease;
}
/* Bordes FISICOS: los logicos se cambian de lado en hebreo y la punta
acababa mirando arriba o abajo. En hebreo "anterior" esta a la derecha. */
.rev-arrow::before {
content: ""; width: 9px; height: 9px;
border-right: 1px solid currentColor; border-top: 1px solid currentColor;
}
.rev-prev::before { transform: rotate(45deg); } /* mira a la derecha */
.rev-next::before { transform: rotate(-135deg); } /* mira a la izquierda */
.rev-arrow:hover { background: var(--clay-band); color: var(--white); }
.rev-arrow.swiper-button-disabled { opacity: .35; }
/* Swiper le anade sus clases y una trae "width: 100%"; con eso los puntos
empujaban las flechas a los bordes de la pantalla. */
.rev-ctrl .rev-dots {
position: static; width: auto; inset: auto;
display: flex; align-items: center; justify-content: center; gap: 9px;
}
.rev-ctrl .rev-dots .swiper-pagination-bullet { margin: 0; }
/* Quince puntos no caben en un movil: se encogen y se quedan en una fila. */
.rev-dots .swiper-pagination-bullet {
width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
background: var(--clay-deep); opacity: .3;
transition: opacity .3s ease, transform .3s ease;
}
.rev-dots .swiper-pagination-bullet-active { opacity: .95; transform: scale(1.5); }
@media (hover: hover) and (min-width: 900px) {
.rev-arrow { display: grid; }
}
/* Sin JS: una fila que se arrastra con el dedo (igual que tratamientos). */
html:not(.motion-on) .rev-swiper .swiper-wrapper { display: flex; gap: 1rem; overflow-x: auto; padding-block-end: 1rem; }
html:not(.motion-on) .rev-swiper .swiper-slide { flex: 0 0 auto; }
html:not(.motion-on) .rev-ctrl { display: none; }
html:not(.motion-on) .orn-big { display: none; }
/* =============================================================
14. CONTACTO — franja dorada
============================================================= */
.cta { background: var(--clay-band); color: var(--on-band); padding-block: clamp(4.5rem, 12vw, 8rem); }
.cta .h-lg, .cta .p, .cta h3 { color: var(--on-band); }
.cta-grid { display: grid; gap: 3rem; align-items: start; }
.cta-text .p { margin-block-start: 1.1rem; }
.cta-rows { display: grid; gap: 0; border-block-start: 1px solid var(--on-band-line); }
.cta-row {
display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
padding-block: 1rem; border-block-end: 1px solid var(--on-band-line);
font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.cta-row dt { font-family: var(--serif); font-size: 1.15em; }
.cta-row a { text-decoration: underline transparent; text-underline-offset: .3em; transition: text-decoration-color .3s ease; }
.cta-row a:hover { text-decoration-color: currentColor; }
@media (min-width: 900px) { .cta-grid { grid-template-columns: 1fr 1fr; gap: 5rem; } }
/* =============================================================
15. PIE — franja dorada
============================================================= */
.foot { background: var(--clay-band); color: var(--on-band); border-block-start: 1px solid var(--on-band-line); padding-block: 2.5rem 2rem; }
.foot-in { display: grid; gap: 1.25rem; justify-items: start; }
.brand-foot .brand-name { font-size: 1.3rem; }
.foot-links, .foot-social { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: var(--serif); }
.foot-copy { font-size: .85rem; opacity: .85; margin-block-start: .5rem; }
@media (min-width: 900px) {
.foot-in { grid-template-columns: auto 1fr auto; align-items: center; }
.foot-copy { grid-column: 1 / -1; }
}
/* =============================================================
16. Respaldos — sin JS, sin librerias, o "reducir movimiento"
-------------------------------------------------------------
Todo lo que GSAP anima parte de VISIBLE. Lo unico que necesita
respaldo son las dos secciones ancladas, cuyas fotos y tarjetas
viven fuera de pantalla hasta que el scroll las trae.
============================================================= */
html:not(.motion-on) html:not(.motion-on) .orn-big { display: none; }
html:not(.motion-on) .hero { height: 100svh; }
html:not(.motion-on) .arch { margin-block-start: 0; border-radius: 0; }
html:not(.motion-on) .svc-swiper .swiper-wrapper { display: flex; gap: 1rem; overflow-x: auto; padding-block-end: 1rem; }
html:not(.motion-on) .svc-swiper .swiper-slide { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
.hero-video { display: none; }
}
/* =============================================================
17. Logo real, tarjetas de Instagram y credito
============================================================= */
/* El cartel de la pared. Blanco sobre el hero; al bajar, el menu se pone
claro y aparece la version en tinta (mismo truco que Venetian). */
.brand { position: relative; }
.brand-logo { height: 40px; width: auto; transition: opacity .5s ease, height .5s ease; }
.brand-logo-dark { position: absolute; inset-inline-start: 0; inset-block-start: 50%; transform: translateY(-50%); opacity: 0; }
.brand-logo-light { opacity: 0; }
.brand-logo-dark { opacity: 1; }
.nav.is-scrolled .brand-logo { height: 34px; }
.brand-foot .brand-logo { height: 52px; }
@media (min-width: 960px) { .brand-logo { height: 46px; } .nav.is-scrolled .brand-logo { height: 38px; } }
/* Tarjetas de Instagram: marco blanco, cabecera con perfil, foto 4:5 y
pie con la frase. Al tocar, el reel de verdad. */
.reels { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(.75rem, 2vw, 1.25rem); padding-inline: var(--gutter); max-width: var(--maxw); margin-inline: auto; }
.reel { overflow: hidden; border-radius: 14px; }
.reel-card {
display: flex; flex-direction: column; height: 100%;
background: var(--white); border-radius: 14px; overflow: hidden;
box-shadow: 0 18px 40px -28px rgba(42, 29, 27, .35);
color: var(--ink); transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.reel-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px rgba(42, 29, 27, .45); }
.reel-head { display: flex; align-items: center; gap: .55rem; padding: .6rem .75rem; }
.reel-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
.reel-user { font-family: var(--sans); font-size: .8rem; font-weight: 400; color: var(--ink); }
.reel-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); }
.reel-media img { width: 100%; height: 100%; object-fit: cover; }
.reel-play {
position: absolute; inset-block-start: .6rem; inset-inline-end: .6rem;
width: 26px; height: 26px; border-radius: 50%; background: rgba(42, 29, 27, .55);
}
.reel-play::after {
content: ""; position: absolute; inset-block-start: 7px; inset-inline-start: 10px;
border-block: 6px solid transparent; border-inline-start: 9px solid var(--white);
}
.reel-cap { display: block; padding: .65rem .8rem .85rem; font-size: .9rem; line-height: 1.45; color: var(--ink-soft); }
@media (min-width: 760px) { .reels { grid-template-columns: repeat(3, 1fr); } }
/* Credito de la agencia */
.made-by { font-size: .82rem; opacity: .85; text-decoration: underline transparent; text-underline-offset: .3em; transition: opacity .3s ease, text-decoration-color .3s ease; }
.made-by:hover { opacity: 1; text-decoration-color: currentColor; }
.made-by strong { font-weight: 400; font-family: var(--serif); font-size: 1.05em; }
@media (min-width: 900px) { .made-by { grid-column: 1 / -1; justify-self: end; margin-block-start: -2.2rem; } }
html:not(.motion-on) .reel { clip-path: none; }
/* Hilo de progreso: una linea dorada finisima arriba. Crece con scaleX
(nunca con width, que obligaria a recalcular la pagina). En RTL el origen
es la derecha, que es por donde se empieza a leer. */
.progress {
position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 80;
height: 2px; background: var(--clay);
transform: scaleX(0); transform-origin: right center;
pointer-events: none;
}
/* =============================================================
18. WhatsApp flotante — siempre a la vista
============================================================= */
.wa-float {
position: fixed; inset-block-end: max(1rem, env(safe-area-inset-bottom)); inset-inline-end: 1rem;
z-index: 70;
display: inline-flex; align-items: center; gap: .55rem;
min-height: 52px; padding: .7rem 1.1rem .7rem .9rem;
border-radius: 999px;
background: var(--clay-band); color: var(--white);
font-family: var(--serif); font-size: 1rem; line-height: 1;
box-shadow: 0 14px 30px -12px rgba(42, 29, 27, .5), 0 0 0 1px rgba(255, 255, 255, .35) inset;
transition: transform .4s var(--ease-out), background-color .3s ease;
}
.wa-float:hover { background: var(--ink-soft); transform: translateY(-2px); }
.wa-ico { width: 24px; height: 24px; flex: none; }
.wa-txt { white-space: nowrap; }
/* Entra un poco despues de cargar, para no pisar el titular del hero. */
html.motion-on .wa-float { animation: wa-entra .6s var(--ease-out) 1.4s both; }
@keyframes wa-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* =============================================================
19. Telefono — lo que solo importa en pantallas pequenas
============================================================= */
@media (max-width: 900px) {
/* El grano se QUITA en el movil. Es una capa fija del tamano de la
pantalla puesta encima de todo: mientras la pelicula repinta el lienzo,
el telefono tiene que recomponer la pagina entera a traves de ella en
cada fotograma. A 3,5 % de opacidad nadie lo echa de menos, y es el
cambio que mas se nota al arrastrar la pelicula. */
body::after { display: none; }
/* Las sombras grandes y el halo animado son lo mas caro de pintar en un
movil: se dejan, pero mas contenidas. */
.rev-card::before {
opacity: .88;
box-shadow: 0 0 0 1px var(--glow-rim), 0 0 14px 3px var(--glow);
}
.reel-card { box-shadow: 0 10px 24px -18px rgba(42, 29, 27, .35); }
/* Zonas de toque de 44 px: los enlaces de texto del pie, el usuario de
Instagram y las filas de contacto crecen por dentro, sin moverse. */
/* 44 px de alto minimo para tocar con el dedo. Con .55rem se quedaban en
43: un pixel, pero justo por debajo del minimo. */
.foot-links a, .foot-social a, .handle, .made-by, .cta-row a { display: inline-block; padding-block: .62rem; }
.cta-row { padding-block: .45rem; }
/* Las frases del cine: dos sombras en vez de cuatro. Un texto grande con
cuatro sombras difusas que ademas se mueve letra a letra es de lo mas
caro que se le puede pedir a un telefono. */
.cine-line { perspective: none; text-shadow: 0 1px 2px rgba(40, 30, 24, .75), 0 2px 8px rgba(40, 30, 24, .4); }
.cine-frame { box-shadow: none; }
}