/* ===================================================================================== SUΛ-B · PROPUESTA D · «TITΛNIO ÉDITION» — dirección de arte ------------------------------------------------------------------------------------- ORIGEN Fork de la propuesta C (la que eligió el cliente) + dos injertos pedidos: el pliego horizontal tipo revista de A y el espejo redondo con luz cálida de B. IDEA Película nocturna / objeto de alto rendimiento. Negro puro, acero cepillado, luz fría. Cada sección es un plano: cortes secos, asentamiento lento. Lo único cálido es LA LUZ: el espejo retroiluminado y sus reflejos. COLOR --k #050505 negro · --g #111214 grafito · --t7 #2A2C30 / --t4 #8A8F96 titanio --w #F3F4F5 blanco frío. Degradados metálicos SOLO en brillos (texto destacado, hover, bordes). Champán --champ #D8B98E SOLO como luz: halos, filos, reflejos, el especular del titanio. Nunca fondo ni bloque de color cálido. Texto secundario #A9AEB5 (AA sobre negro). TIPO Display: Anybody variable (autoalojada, subconjunto + Λ = V invertida, misma familia → la Λ encaja en ancho y peso), wdth 112–130, peso 250–400, siempre en mayúsculas. Texto: Manrope 300–600 (también las citas del pliego, a gran cuerpo, porque llevan tildes y minúsculas). HUD: JetBrains Mono 11–12 px, +0.14em. REJILLA 12 columnas, margen --gut = clamp(16px, 4vw, 64px), gutter 24px. Secciones con --sec vertical. Anchura de lectura 34–60ch. MOVIMIENTO --e-expo cubic-bezier(.16,1,.3,1) (entrada rápida, asentamiento lento) · --e-shut cubic-bezier(.77,0,.18,1) (obturador) · en GSAP: "expo.out", "d.shut", "d.cut". Escenas fijadas con barras de cine (letterbox) y grano. SECUENCIA 01 Hero «Máscara Λ»: arranca a pantalla completa (tríptico de vídeo en escritorio, vídeo del rótulo en móvil) y en 1,5 s el plano se cierra dentro de la Λ mientras S U - B se ensamblan alrededor; al hacer scroll (fijado) la Λ vuelve a crecer hasta llenar la pantalla; barras de cine; h1 + CTAs siempre visibles abajo. 02 Manifiesto fijado: decodificación de letras → las letras vuelan hacia la cámara → «NO SEGUIMOS MODΛS» llega desde detrás → «Tu imagen necesita mantenimiento.» se estira (eje wdth 50→125). 03 PLIEGO HORIZONTAL (de A, traído a la noche de C): «ΛNTES DE SUΛ-B ...» abre un carril fijado; las fotografías de campaña pasan de lado como páginas de revista, viradas a blanco y negro frío, con paralaje dentro del marco y las tres frases del cliente como grandes citas a toda página. HUD 01/08, filete de progreso, letterbox. Sin JS o con movimiento reducido: carril con scroll horizontal nativo y snap. 04 Lectura diagnóstica de problemas (se encienden en secuencia). 05 TRΛTΛMIENTOS: bobina VERTICAL (la horizontal ya la hace el pliego) — número enorme en mono, fotograma 3:2 que se enciende al entrar y al pasar por encima, categoría / precio / duración en HUD y filo cálido al recorrer la fila. 06 Asesoría: ESPEJO REDONDO retroiluminado (de B) — bisel de acero cónico, halo champán que respira, arco cálido que se dibuja con el scroll y Observamos · Λnalizamos · Escuchamos · Recomendamos encendiéndose alrededor del aro. 07 Membresías: ficha técnica con filetes de titanio, precios en mono, filas que se iluminan. 08 ¿POR QUÉ? sobre superficie de titanio WebGL (con un especular templado: el espejo también se refleja ahí). 09 Corte de cine + lectura palabra a palabra + plano final con vídeo enmarcado. 10 Centros: DOS ESPEJOS REDONDOS, el mapa invertido que se convierte en el reflejo del interior + tira de interiores. 11 FAQ. MENÚ «Obturador»: dos cuchillas negras con los ángulos de las patas de la Λ se cierran; una Λ de luz recorre la junta; detrás respira el titanio WebGL. Items enormes extendidos con índice mono, barrido de luz metálico al pasar/enfocar y preview de la sección al fondo. Servicios → rejilla de 5 columnas (escritorio) / acordeón (móvil). Fila HUD inferior: Ayuda y contacto · Acceso · lugar · Reservar cita. MÓVIL Misma película, más ligera: vídeo único 720p, sin blur ni cursor, escenas fijadas más cortas, el pliego sigue siendo horizontal (lo mueve el scroll vertical), botones ≥ 48 px, cuerpo ≥ 16 px. ===================================================================================== */ @font-face { font-family: "D Display"; src: url("fonts/d-display.woff2?v=2") format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; } :root { --k: #050505; --g: #111214; --g2: #0b0b0d; --t7: #2A2C30; --t4: #8A8F96; --w: #F3F4F5; --mut: #A9AEB5; --mut2: #C9CDD2; --line: rgba(243, 244, 245, .12); /* La luz cálida del espejo: champán SOLO como luz (halos, brillos, filos), nunca como fondo ni bloque de color. */ --champ: #D8B98E; --champ-lt: #FFE4BA; --champ-deep: #A07E52; --steel-conic: conic-gradient(from 212deg, #3c4045, #e9ebed 10%, #7a7f85 21%, #cfd3d7 34%, #55595e 49%, #f3f4f5 63%, #6d7277 77%, #b9bdc3 89%, #3c4045); --line2: rgba(243, 244, 245, .24); --metal: linear-gradient(100deg, #8A8F96 0%, #F3F4F5 28%, #9DA2A9 48%, #FFFFFF 62%, #8A8F96 100%); /* Acero cepillado de las píldoras. La banda más clara es #6e7378 a propósito: con letra blanca da 4,8 de contraste y cumple el mínimo de accesibilidad incluso en un móvil a pleno sol. */ --acero: linear-gradient(170deg, #6e7378 0%, #565b61 20%, #3b4046 46%, #656a71 64%, #2f3338 86%, #585d64 100%); --acero-brillo: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, .72) 50%, transparent 62%); --acero-relieve: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .55), 0 12px 28px -18px rgba(0, 0, 0, .95); /* Cristal metalizado (botones): translúcido de verdad — se ve el vídeo por detrás — con un velo gris muy leve que insinúa el metal. El fondo oscuro de base es lo que mantiene el rótulo legible cuando por detrás pasa una pared blanca. */ --vidrio: linear-gradient(170deg, rgba(216, 222, 230, .17) 0%, rgba(150, 158, 167, .09) 38%, rgba(120, 128, 137, .06) 58%, rgba(196, 203, 211, .14) 100%), rgba(12, 13, 15, .26); --vidrio-relieve: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(0, 0, 0, .26), 0 14px 30px -22px rgba(0, 0, 0, .9); --vidrio-brillo: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .34) 50%, transparent 60%); --vidrio-velo: blur(16px) saturate(150%); --f-d: "D Display", "Manrope", system-ui, sans-serif; --f-b: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --f-m: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --gut: clamp(16px, 4vw, 64px); --sec: clamp(96px, 16vh, 200px); --hdr: 72px; --lb: 8.5vh; --e-expo: cubic-bezier(.16, 1, .3, 1); --e-shut: cubic-bezier(.77, 0, .18, 1); --e-cut: cubic-bezier(.7, 0, .2, 1); interpolate-size: allow-keywords; color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--k); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html, body { margin: 0; overflow-x: clip; } body { background: var(--k); color: var(--w); font: 400 17px/1.6 var(--f-b); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, video, svg, canvas { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } p, h1, h2, h3, h4, figure, ol, ul, blockquote { margin: 0; padding: 0; } ol, ul { list-style: none; } b, strong { font-weight: 600; } ::selection { background: var(--w); color: var(--k); } :focus-visible { outline: 1px solid var(--w); outline-offset: 4px; } [hidden] { display: none !important; } .d-mono { font-family: var(--f-m); font-size: 11px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; } .d-wrap { padding-left: var(--gut); padding-right: var(--gut); max-width: 1920px; margin-left: auto; margin-right: auto; } .d-idx { color: var(--t4); display: inline-flex; align-items: center; gap: 14px; } .d-idx::after { content: ""; width: 48px; height: 1px; background: var(--line2); } /* Escala de titulares en tres niveles. El tamaño se mide por lo menor entre ancho y alto, y se limita además por caracteres: así una palabra corta como «CENTROS» deja de inflarse hasta ocupar la pantalla entera solo porque la ventana es ancha. La anchura de letra baja de 125% a 112%: una tipografía estirada pesa mucho más de lo que dice su tamaño. */ .d-h2 { font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300; font-size: clamp(28px, min(4vw, 6.6vh), 68px); /* nivel 2 · secciones principales */ line-height: .94; letter-spacing: -.01em; text-transform: uppercase; max-width: 20ch; } .d-metal { background: var(--metal); background-size: 220% 100%; background-position: 0 0; -webkit-background-clip: text; background-clip: text; color: transparent; } .d-skip { position: fixed; left: 12px; top: 12px; z-index: 3000; padding: 12px 18px; background: var(--w); color: var(--k); font: 500 14px/1 var(--f-b); transform: translateY(-160%); transition: transform .3s var(--e-expo); } .d-skip:focus { transform: none; } /* ---------- Grano + cursor ---------- */ .d-grain { position: fixed; inset: -50%; z-index: 940; pointer-events: none; opacity: .07; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation: d-grain 1.2s steps(6) infinite; } @keyframes d-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-6%, 4%); } 40% { transform: translate(5%, -7%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(7%, 3%); } 100% { transform: translate(0, 0); } } .d-cursor { display: none; } @media (hover: hover) and (pointer: fine) { html.has-cursor, html.has-cursor body, html.has-cursor a, html.has-cursor button, html.has-cursor summary { cursor: none; } html.has-cursor textarea, html.has-cursor input { cursor: text; } html.has-cursor .d-cursor { display: block; position: fixed; left: 0; top: 0; z-index: 2600; pointer-events: none; mix-blend-mode: difference; } .d-cursor__ring, .d-cursor__dot { position: absolute; left: 0; top: 0; border-radius: 50%; } .d-cursor__ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid rgba(255, 255, 255, .9); transition: width .45s var(--e-expo), height .45s var(--e-expo), margin .45s var(--e-expo), background-color .3s; } .d-cursor__dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; } html.cursor-hot .d-cursor__ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(255, 255, 255, .06); } html.cursor-hide .d-cursor { opacity: 0; } } /* ---------- Botones ---------- Cápsula en sans con el rótulo a la izquierda y la flecha dentro de un círculo a la derecha. Al pasar el ratón hace una sola cosa: el relleno entra de izquierda a derecha y la flecha avanza tres píxeles. Sin halos, sin destellos y sin botones que persigan al cursor. */ .d-btn { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 60px; padding: 0 10px 0 30px; border-radius: 999px; overflow: hidden; isolation: isolate; font: 600 13px/1 var(--f-b); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 1px solid rgba(243, 244, 245, .4); color: var(--w); transition: color .42s var(--e-expo), border-color .42s var(--e-expo); } .d-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--w); transform: scaleX(0); transform-origin: 0 50%; transition: transform .42s var(--e-expo); } .d-btn:hover::before, .d-btn:focus-visible::before { transform: scaleX(1); } .d-btn__txt { display: inline-block; } /* El círculo de la flecha: el único adorno que queda, y el que dice que esto lleva a algún sitio */ .d-btn__o { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(243, 244, 245, .12); transition: background-color .42s var(--e-expo); } .d-btn__o .material-symbols-outlined { font-size: 19px; transition: transform .5s var(--e-expo); } .d-btn:hover .d-btn__o .material-symbols-outlined, .d-btn:focus-visible .d-btn__o .material-symbols-outlined { transform: translateX(3px); } /* Reservar cita: el mismo acero que el resto, pero con el filo en champán y un reflejo que pasa solo cada seis segundos. Es la única pieza de la interfaz que se mueve sin que la toquen, así que se distingue de las demás sin tener que ser blanca. */ .d-btn--solid { background: var(--vidrio); color: var(--w); border-color: rgba(216, 185, 142, .62); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); box-shadow: var(--vidrio-relieve), inset 0 0 0 1px rgba(216, 185, 142, .12); } .d-btn--solid::before { display: none; } .d-btn--solid .d-btn__o { background: rgba(255, 255, 255, .13); } .d-btn--solid::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--vidrio-brillo); transform: translateX(-120%); } html.mo .d-btn--solid::after { animation: d-filo 6s var(--e-expo) infinite; } .d-btn--solid:hover::after, .d-btn--solid:focus-visible::after { animation: none; transform: translateX(120%); transition: transform .9s var(--e-expo); } .d-btn--solid:hover, .d-btn--solid:focus-visible { color: var(--w); border-color: rgba(216, 185, 142, 1); } @keyframes d-filo { 0%, 64% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } } .d-btn--ghost { background: rgba(5, 5, 5, .26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .d-btn--ghost:hover, .d-btn--ghost:focus-visible { color: var(--k); border-color: var(--w); } .d-btn--ghost:hover .d-btn__o, .d-btn--ghost:focus-visible .d-btn__o { background: rgba(5, 5, 5, .1); } /* Acero: todo lo que no lleva a la agenda. El blanco macizo queda reservado a reservar cita, que así es el único elemento sólido de la página y se distingue desde lejos. */ .d-btn--acero { background: var(--vidrio); color: var(--w); border-color: rgba(255, 255, 255, .34); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); box-shadow: var(--vidrio-relieve); } .d-btn--acero .d-btn__o { background: rgba(255, 255, 255, .13); } .d-btn--acero::before { display: none; } .d-btn--acero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--vidrio-brillo); transform: translateX(-120%); } .d-btn--acero:hover::after, .d-btn--acero:focus-visible::after { transform: translateX(120%); transition: transform .9s var(--e-expo); } .d-btn--acero:hover, .d-btn--acero:focus-visible { color: var(--w); border-color: rgba(255, 255, 255, .62); } .d-btn--xl { min-height: 66px; padding: 0 12px 0 36px; font-size: 14px; } .d-btn--xl .d-btn__o { width: 44px; height: 44px; } /* ===================================================================================== CABECERA — barra fija siempre (estructura Santé, estética D) Transparente sobre la portada (solo un velo degradado que mantiene legible el blanco); al pasar la portada, negro translúcido con desenfoque y un filete inferior. ===================================================================================== */ .d-head { position: fixed; top: 0; left: 0; right: 0; z-index: 980; color: var(--w); transition: background-color .55s var(--e-expo), -webkit-backdrop-filter .55s var(--e-expo), backdrop-filter .55s var(--e-expo); } .d-head::before { content: ""; position: absolute; inset: 0 0 -46px; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 5, 5, .72) 0%, rgba(5, 5, 5, .36) 54%, rgba(5, 5, 5, 0) 100%); transition: opacity .55s var(--e-expo); } .d-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, transparent, var(--line2) 10%, var(--line2) 90%, transparent); opacity: 0; transition: opacity .55s var(--e-expo); } html.hdr-solid .d-head, .d-head.is-mega { background: rgba(6, 6, 7, .86); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); } html.hdr-solid .d-head::before, .d-head.is-mega::before { opacity: 0; } html.hdr-solid .d-head::after, .d-head.is-mega::after { opacity: 1; } /* Con el panel abierto la barra se funde con el panel: solo queda el filete */ html.is-menu-open .d-head { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } html.is-menu-open .d-head::before { opacity: 0; } html.is-menu-open .d-head::after { opacity: 1; } .d-head__bar { position: relative; z-index: 2; height: var(--hdr); display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); padding: 0 var(--gut); max-width: 1920px; margin: 0 auto; } .d-head__logo { flex: 0 0 auto; width: clamp(84px, 6.2vw, 108px); color: #fff; display: block; } .d-head__logo svg { width: 100%; height: auto; } .d-head__hud { display: none; color: var(--t4); min-width: 2ch; } .d-head__hud::before { content: ""; display: inline-block; width: 26px; height: 1px; margin-right: 12px; background: var(--line2); vertical-align: middle; } /* ---------- Hamburguesa (móvil / tableta) ---------- */ .d-head__burger { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; margin-left: -4px; padding: 0 4px; color: var(--w); } .d-burger { position: relative; display: block; width: 20px; height: 13px; flex: 0 0 auto; } .d-burger i { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .5s var(--e-expo), opacity .3s; } .d-burger i:nth-child(1) { top: 0; } .d-burger i:nth-child(2) { top: 6px; } .d-burger i:nth-child(3) { top: 12px; } html.is-menu-open .d-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); } html.is-menu-open .d-burger i:nth-child(2) { opacity: 0; } html.is-menu-open .d-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .d-head__burgerTxt { position: relative; display: inline-grid; height: 1.4em; overflow: hidden; justify-items: start; font: 500 10px/1.4 var(--f-m); letter-spacing: .14em; text-transform: uppercase; } .d-head__burgerOpen, .d-head__burgerClose { grid-area: 1 / 1; display: block; transition: transform .6s var(--e-expo); } .d-head__burgerClose { transform: translateY(110%); } html.is-menu-open .d-head__burgerOpen { transform: translateY(-110%); } html.is-menu-open .d-head__burgerClose { transform: translateY(0); } /* ---------- Enlaces de la barra (escritorio) ---------- */ .d-head__nav { display: none; } .d-head__links { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 30px); } .d-head__li { position: relative; } /* El mega vive dentro del
  • de Tratamientos (así el tabulador va del botón a las familias), pero se posiciona contra la barra: el
  • no debe ser bloque contenedor. */ .d-head__li--trat { position: static; } .d-head__link { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 2px; font: 500 11px/1 var(--f-m); letter-spacing: .11em; text-transform: uppercase; color: var(--w); white-space: nowrap; } .d-head__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 11px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--e-expo); } .d-head__link:hover::after, .d-head__link:focus-visible::after, .d-head__link[aria-expanded="true"]::after { transform: scaleX(1); } /* Barrido metálico de la D sobre el texto */ .d-head__linkTxt { display: inline-block; background: linear-gradient(100deg, var(--w) 0%, var(--w) 38%, #ffffff 44%, #8A8F96 50%, #ffffff 56%, var(--w) 62%, var(--w) 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.6; /* el degradado solo se pinta dentro de la caja: sin aire, las tildes desaparecen */ } .d-head__link:hover .d-head__linkTxt, .d-head__link:focus-visible .d-head__linkTxt, .d-head__link[aria-expanded="true"] .d-head__linkTxt { background-position: 0 0; transition: background-position 1.1s var(--e-expo); } .d-head__link--more { color: var(--mut); } /* «Más» es un contenedor, no un destino: se lee un punto por debajo del resto */ .d-head__link--more .d-head__linkTxt { background-image: linear-gradient(100deg, var(--mut) 0%, var(--mut) 38%, #ffffff 44%, #8A8F96 50%, #ffffff 56%, var(--mut) 62%, var(--mut) 100%); } .d-caret { display: inline-block; width: 6px; height: 6px; flex: 0 0 auto; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .5s var(--e-expo); } .d-head__link[aria-expanded="true"] .d-caret, .d-lang__btn[aria-expanded="true"] .d-caret { transform: translateY(1px) rotate(-135deg); } /* ---------- Pastillas ---------- */ .d-head__acts { margin-left: auto; display: flex; align-items: center; gap: clamp(8px, .9vw, 12px); } /* Misma familia que los botones grandes (sans, cápsula, relleno que entra por la izquierda), en pequeño */ .d-pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 0 18px; border-radius: 999px; isolation: isolate; overflow: hidden; font: 600 11.5px/1 var(--f-b); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; border: 1px solid rgba(243, 244, 245, .4); color: var(--w); background: transparent; transition: color .42s var(--e-expo), border-color .42s var(--e-expo); } .d-pill::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--w); transform: scaleX(0); transform-origin: 0 50%; transition: transform .42s var(--e-expo); } .d-pill:hover::before, .d-pill:focus-visible::before { transform: scaleX(1); } .d-pill--line { background: var(--vidrio); border-color: rgba(255, 255, 255, .34); box-shadow: var(--vidrio-relieve); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); } .d-pill--line::before { display: none; } .d-pill--line::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--vidrio-brillo); transform: translateX(-120%); } .d-pill--line:hover::after, .d-pill--line:focus-visible::after { transform: translateX(120%); transition: transform .9s var(--e-expo); } .d-pill--line:hover, .d-pill--line:focus-visible { color: var(--w); border-color: rgba(255, 255, 255, .62); } .d-pill--solid { background: var(--vidrio); color: var(--w); border-color: rgba(216, 185, 142, .62); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); box-shadow: var(--vidrio-relieve), inset 0 0 0 1px rgba(216, 185, 142, .12); } .d-pill--solid::before { display: none; } .d-pill--solid::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--vidrio-brillo); transform: translateX(-120%); } html.mo .d-pill--solid::after { animation: d-filo 6s var(--e-expo) infinite; } .d-pill--solid:hover::after, .d-pill--solid:focus-visible::after { animation: none; transform: translateX(120%); transition: transform .9s var(--e-expo); } .d-pill--solid:hover, .d-pill--solid:focus-visible { color: var(--w); border-color: rgba(216, 185, 142, 1); } .d-pill--wide { width: 100%; } .d-pill .material-symbols-outlined { font-size: 18px; } .d-pill .fa-brands { font-size: 14px; } .d-head__contact, .d-head__book, .d-head__acts > .d-lang { display: none; } /* Acciones en icono (solo móvil): WhatsApp y reservar, ya que no hay botones flotantes */ .d-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 999px; border: 1px solid rgba(243, 244, 246, .28); background: rgba(10, 10, 12, .35); color: var(--w); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .3s, border-color .3s, box-shadow .3s, color .3s; } .d-ico .fa-brands { font-size: 17px; } .d-ico .material-symbols-outlined { font-size: 20px; } .d-ico--solid { background: var(--vidrio); color: var(--w); border-color: rgba(216, 185, 142, .62); box-shadow: var(--vidrio-relieve); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); } .d-ico:focus-visible { outline: 2px solid var(--champ, #d8b98e); outline-offset: 3px; } /* Mismo criterio que las pastillas: se invierte, sin halo */ .d-ico:not(.d-ico--solid) { background: var(--vidrio); border-color: rgba(255, 255, 255, .34); box-shadow: var(--vidrio-relieve); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); } @media (hover: hover) { .d-ico:not(.d-ico--solid):hover { border-color: rgba(255, 255, 255, .62); filter: brightness(1.18); } .d-ico--solid:hover { border-color: rgba(216, 185, 142, 1); filter: brightness(1.18); } } /* ---------- Desplegable «Más» ---------- */ .d-pop { position: absolute; top: calc(100% + 8px); left: 50%; min-width: 236px; padding: 8px 6px; z-index: 4; background: linear-gradient(180deg, #0c0c0e 0%, #08080a 100%); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-8px); transition: opacity .3s var(--e-expo), transform .4s var(--e-expo); } .d-pop.is-on { opacity: 1; pointer-events: auto; transform: translateX(-50%); } .d-pop__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; text-align: left; font: 400 14px/1.3 var(--f-b); color: var(--mut2); transition: color .3s, background-color .3s; } .d-pop__item:hover, .d-pop__item:focus-visible { color: #fff; background: rgba(243, 244, 245, .06); } .d-pop__item--in { padding-left: 26px; } .d-pop__h { color: var(--t4); padding: 12px 14px 3px; } .d-pop__form { margin: 0; } .d-pop .material-symbols-outlined { font-size: 18px; color: var(--t4); } /* ---------- Selector de idioma ---------- */ .d-lang { position: relative; } .d-lang__btn { padding: 0 15px; gap: 7px; } .d-lang__globe { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.3; } .d-lang__list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 196px; padding: 7px 6px; z-index: 5; background: linear-gradient(180deg, #0c0c0e 0%, #08080a 100%); border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .3s var(--e-expo), transform .4s var(--e-expo); } .d-lang__list.is-on { opacity: 1; pointer-events: auto; transform: none; } .d-lang__opt { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 44px; padding: 0 12px; text-align: left; font: 400 14px/1.2 var(--f-b); color: var(--mut2); transition: color .3s, background-color .3s; } .d-lang__opt:hover, .d-lang__opt:focus-visible { color: #fff; background: rgba(243, 244, 245, .06); } .d-lang__opt[aria-disabled="true"] { cursor: default; } .d-lang__opt[aria-current="true"] { color: #fff; } .d-lang__dot { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: var(--champ); opacity: 0; box-shadow: 0 0 10px rgba(216, 185, 142, .9); } .d-lang__opt[aria-current="true"] .d-lang__dot { opacity: 1; } /* ---------- Mega de Tratamientos ---------- */ .d-mega { position: absolute; top: 100%; left: var(--gut); right: var(--gut); max-width: 1360px; margin: 0 auto; z-index: 3; background: linear-gradient(180deg, #0c0c0e 0%, #08080a 100%); border: 1px solid var(--line); border-top: 0; box-shadow: 0 44px 100px rgba(0, 0, 0, .62); opacity: 0; pointer-events: none; transform: translateY(-10px); transition: opacity .38s var(--e-expo), transform .5s var(--e-expo); } .d-mega.is-on { opacity: 1; pointer-events: auto; transform: none; } .d-mega__in { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(18px, 2.2vw, 40px); padding: clamp(18px, 2vw, 30px) clamp(20px, 2.2vw, 36px) clamp(22px, 2.4vw, 34px); } .d-mega__all { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-bottom: 12px; font: 500 11px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--w); border-bottom: 1px solid var(--line2); } .d-mega__all:hover, .d-mega__all:focus-visible { border-color: var(--w); } .d-mega__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px clamp(10px, 1.2vw, 20px); } .d-mega__tab { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; min-height: 46px; padding: 0 12px; text-align: left; color: var(--mut2); border: 1px solid transparent; transition: color .3s, background-color .3s, border-color .3s; } .d-mega__tab:hover, .d-mega__tab:focus-visible { color: #fff; background: rgba(243, 244, 245, .05); } .d-mega__tab[aria-selected="true"] { color: #fff; background: rgba(243, 244, 245, .08); border-color: var(--line); } .d-mega__tabn { color: var(--t4); font-size: 10px; } .d-mega__tab[aria-selected="true"] .d-mega__tabn { color: var(--champ); } .d-mega__tabname { font: 500 14px/1.25 var(--f-b); overflow-wrap: break-word; } .d-mega__count { color: var(--t4); font-size: 10px; } .d-mega__panes { min-width: 0; border-left: 1px solid var(--line); padding-left: clamp(16px, 1.8vw, 32px); } .d-mega__paneh { color: var(--t4); padding-bottom: 10px; } .d-mega__srv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(12px, 1.4vw, 24px); align-content: start; max-height: min(50vh, 400px); overflow-y: auto; overscroll-behavior: contain; } .d-mega__srv a { display: flex; align-items: center; min-height: 34px; padding: 3px 0; font-size: 13.5px; line-height: 1.3; color: var(--mut2); transition: color .3s, transform .5s var(--e-expo); } .d-mega__srv a:hover, .d-mega__srv a:focus-visible { color: #fff; transform: translateX(4px); } /* ---------- Lupa de la barra + cajón del buscador (solo móvil) ---------- */ /* Sin círculo ni fondo: WhatsApp y Reservar son acciones y llevan pastilla; esto es una herramienta. */ .d-head__find { display: none; align-items: center; justify-content: center; width: 40px; height: 44px; flex: 0 0 auto; margin-right: -4px; color: #fff; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; transform: translateY(-3px); transition: opacity .4s var(--e-expo), transform .45s var(--e-expo); } .d-head__find .material-symbols-outlined { font-size: 23px; } .d-head__find:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; border-radius: 8px; } /* El cajón es una superficie propia, no cristal: debajo hay texto de la página y transparentarlo lo ensucia. Prolonga la cabecera de lado a lado. */ .d-head__cajon { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; padding: 4px var(--gut) 14px; /* Opaco del todo: al 96 % los titulares blancos de la página seguían intuyéndose por debajo y el cajón es para leer. El cristal se queda donde funciona: el hero. */ background: #0a0a0c; border-bottom: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .95); opacity: 0; transform: translateY(-12px); pointer-events: none; transition: opacity .32s var(--e-expo), transform .42s var(--e-expo); } .d-head__cajon.is-on { opacity: 1; transform: none; pointer-events: auto; } /* En la barra los resultados no flotan: forman parte del propio cajón, que crece */ .d-busca--barra { width: 100%; } .d-busca--barra .d-busca__box { background: rgba(243, 244, 245, .06); } .d-busca--barra .d-busca__panel { position: static; max-height: min(58vh, 440px); margin-top: 8px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } @media (max-width: 1099px) { /* La lupa solo asoma cuando la barra ya es sólida, es decir, pasada la portada */ .d-head__find { display: inline-flex; } html.hdr-solid .d-head__find { opacity: 1; transform: none; } html:not(.hdr-solid) .d-head__find { pointer-events: none; } html.is-menu-open .d-head__find { opacity: 0; pointer-events: none; } } @media (min-width: 1100px) { .d-head__cajon { display: none; } } .d-progress { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 1px; background: rgba(255, 255, 255, .1); } .d-progress__bar { position: absolute; inset: 0; background: #fff; transform-origin: 0 50%; transform: scaleX(0); } @media (min-width: 1100px) { .d-head__nav { display: block; } .d-head__burger { display: none; } .d-head__contact, .d-head__book, .d-head__acts > .d-lang { display: inline-flex; } .d-head__bookMob, .d-head__chatMob { display: none; } } @media (min-width: 1280px) { .d-head__hud { display: block; } } @media (max-width: 1099px) { .d-head__bar { gap: 10px; } /* «Reservar» con la palabra en vez del icono: pastilla compacta, que la barra va justa */ .d-head__bookMob { min-height: 40px; padding: 0 14px; font-size: 10.5px; letter-spacing: .05em; } /* En móvil la hamburguesa va sola: la palabra sobra y el logotipo se acerca a las tres líneas */ .d-head__burgerTxt { display: none; } .d-head__burger { gap: 0; justify-content: flex-start; padding: 0 2px; margin-left: -2px; margin-right: -18px; } html.is-menu-open .d-head__bookMob, html.is-menu-open .d-head__chatMob { display: none; } } @media (max-width: 599px) { :root { --hdr: 64px; } .d-head__bookMob { padding: 0 12px; font-size: 10px; letter-spacing: .04em; } .d-head__logo { width: 84px; } .d-ico { width: 40px; height: 40px; } } /* ===================================================================================== LETTERBOX (escenas fijadas) ===================================================================================== */ /* ===================================================================================== 01 · HERO · VÍDEO DE ENTRADA Un único plano a pantalla completa (la entrada al centro) con un velo que garantiza la lectura del titular. Sin máscara, sin letras y sin pin: mide una pantalla y se desplaza con normalidad, así que el manifiesto entra justo detrás. ===================================================================================== */ .d-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; } .d-hero__stage { position: relative; height: 100%; overflow: hidden; background: var(--k); isolation: isolate; } .d-hero__film { position: absolute; inset: 0; background: var(--k); display: flex; gap: 2px; } .d-hero__film img, .d-hero__film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Por defecto (móvil y pantallas verticales) solo se ve el plano central, a pantalla completa: es donde un vídeo vertical encaja sin estirarse. Los laterales aparecen en escritorio, más abajo. */ .d-hero__panel { position: relative; overflow: hidden; flex: 1 1 100%; } .d-hero__panel--lado { display: none; } .d-hero__foto, .d-hero__quieto { position: absolute; inset: 0; background: 50% 50% / cover no-repeat; } .d-hero__quieto { display: none; } /* Los laterales se funden al empezar a reproducirse, igual que el central */ .d-hero__vid { opacity: 0; transition: opacity .9s var(--e-expo); } .d-hero__vid.is-on { opacity: 1; } /* El plano es vertical (1080 × 1620). Mismo encuadre que la home actual de sua-b.com: en apaisado se sube lo justo para que la boca quede por encima del bloque de texto sin que las cejas se metan bajo la barra fija; en vertical se recorta a lo ancho para que el hombre y la fachada queden dentro. */ .d-hero__poster, .d-hero__video { object-position: 50% min(0px, max(calc(var(--hdr) + 16px - 15vw), calc(60vh - 41.25vw))); } /* En vertical manda el plano de móvil (recorrido por el centro, 608 × 1080): va centrado */ @media (orientation: portrait) { .d-hero__poster, .d-hero__video { object-position: 50% 50%; } } /* El póster es el primer fotograma (y el LCP); el vídeo se funde encima al empezar a reproducirse */ .d-hero__video { opacity: 0; transition: opacity .9s var(--e-expo); } .d-hero__video.is-on { opacity: 1; } /* Acercamiento lentísimo y continuo (1 → 1.06 de ida y vuelta): nunca da un tirón ni se queda congelado. Sólo con movimiento permitido, y en pausa mientras la portada no está en pantalla. */ html.mo .d-hero__film { animation: d-hero-zoom 42s ease-in-out infinite alternate; will-change: transform; } html.mo .d-hero__film.is-still { animation-play-state: paused; will-change: auto; } @keyframes d-hero-zoom { from { transform: scale(1); } to { transform: scale(1.06); } } .d-hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 42%, transparent 38%, rgba(5, 5, 5, .72) 100%), linear-gradient(180deg, rgba(5, 5, 5, .5) 0%, transparent 20%, transparent 44%, rgba(5, 5, 5, .92) 100%); } .d-hero__hud { position: absolute; inset: 0; z-index: 7; pointer-events: none; color: var(--mut2); } /* Raíl mono vertical en el margen derecho: el único resto del HUD de la versión con máscara */ .d-hero__hud-place { position: absolute; right: var(--gut); top: 50%; translate: 0 -50%; writing-mode: vertical-rl; letter-spacing: .3em; opacity: .6; } .d-hero__hud-place::before { content: ""; display: inline-block; width: 1px; height: 56px; margin-bottom: 14px; background: currentColor; opacity: .5; } .d-hero__caption { position: absolute; left: 0; right: 0; bottom: max(118px, 14vh); z-index: 8; display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 0 var(--gut); text-align: center; } /* Los dos titulares van cada uno en UNA sola línea, así que el tamaño no se elige a ojo: sale de dividir el ancho disponible entre lo que mide el texto (28,7 em el H1 a anchura 125; 18,0 em el H2 en Manrope), medido con la fuente real. En móvil no cabría de ninguna manera a esa anchura de letra — saldría a 12 px —, así que ahí la letra se estrecha a 92. */ .d-hero__tit { display: grid; justify-items: center; gap: clamp(5px, .8vh, 10px); } .d-hero__title { font-family: var(--f-d); font-stretch: 125%; font-variation-settings: "wght" 350, "wdth" 125; font-weight: 350; text-transform: uppercase; font-size: min(calc((100vw - 2 * var(--gut)) / 29.5), 30px); line-height: 1.15; letter-spacing: .04em; color: var(--w); text-shadow: 0 2px 24px rgba(0, 0, 0, .6); } .d-hero__sub { font-family: var(--f-b); font-weight: 300; letter-spacing: .01em; color: #c8ccd1; font-size: min(calc((100vw - 2 * var(--gut)) / 18.6), 18px); line-height: 1.3; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); } .d-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .d-hero__scroll { position: absolute; left: 50%; bottom: 22px; z-index: 8; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--mut2); min-height: 44px; min-width: 44px; } .d-hero__scroll > * { transition: opacity .5s var(--e-expo); } html.hero-moved .d-hero__scroll { pointer-events: none; } html.hero-moved .d-hero__scroll > * { opacity: 0; } .d-hero__scroll i { width: 1px; height: 38px; background: linear-gradient(currentColor, transparent); animation: d-drip 2.4s var(--e-expo) infinite; transform-origin: 50% 0; } @keyframes d-drip { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: 50% 0; } 55% { transform-origin: 50% 100%; } 100% { transform: scaleY(0); transform-origin: 50% 100%; } } /* Entrada del texto: un fundido corto (< 1 s) en CSS puro, así no depende de que GSAP haya cargado y el h1 nunca parpadea (su texto real está ahí desde el primer fotograma). */ html.js.mo .d-hero__tit { animation: d-hero-in .66s var(--e-expo) .06s both; } html.js.mo .d-hero__ctas { animation: d-hero-in .66s var(--e-expo) .2s both; } html.js.mo .d-hero__hud, html.js.mo .d-hero__scroll { animation: d-hero-fade .62s var(--e-expo) .32s both; } @keyframes d-hero-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes d-hero-fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 767px) { .d-hero__caption { bottom: 72px; gap: 18px; } /* Anchura 92 y menos prosa entre letras: es lo que permite que quepa de una línea a un tamaño legible (19 px en un móvil de 390, 15 en uno de 320). */ .d-hero__title { font-stretch: 92%; font-variation-settings: "wght" 350, "wdth" 92; letter-spacing: .01em; font-size: min(calc((100vw - 2 * var(--gut)) / 18.8), 24px); } .d-hero__sub { font-size: min(calc((100vw - 2 * var(--gut)) / 18.6), 16px); } .d-hero__ctas { width: 100%; flex-wrap: nowrap; } /* Las dos CTAs van en fila, una al lado de la otra, con el rótulo centrado y la flecha al lado (la flecha en su círculo dejaba un hueco en medio). «Reservar tratamiento» es mucho más largo que «Contactar», así que el reparto no es a medias: 1,1 a 1 es lo que deja el mismo aire a los dos lados de cada rótulo. Los dos entran en una sola línea hasta en 320 px. */ .d-hero__ctas { flex-direction: row; width: 100%; gap: 8px; } .d-hero__ctas .d-btn { flex: 1 1 0; min-width: 0; justify-content: center; gap: 6px; min-height: 54px; padding: 0 12px; font-size: 11px; letter-spacing: .03em; } .d-hero__ctas .d-btn:first-child { flex-grow: 1.1; } .d-hero__ctas .d-btn .d-btn__o, .d-hero__ctas .d-btn:hover .d-btn__o { width: auto; height: auto; background: none; } .d-hero__ctas .d-btn__o .material-symbols-outlined { font-size: 17px; } .d-hero__scroll { display: none; } .d-hero__hud-place { display: none; } } /* Pantallas muy estrechas (320–359): el rótulo largo rozaba el borde de la cápsula */ @media (max-width: 359px) { .d-hero__ctas .d-btn { font-size: 10px; letter-spacing: .02em; padding: 0 10px; gap: 5px; } .d-hero__ctas .d-btn__o .material-symbols-outlined { font-size: 15px; } } /* ---------- Buscador del hero (cristal sobre el vídeo) ---------- */ /* Gancho de medición: el texto del icono se queda en el DOM pero invisible, y en minúsculas exactas — el disparador de la conversión de cita distingue mayúsculas, y los botones que lo contienen van en versalitas. */ .d-gtm { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; text-transform: none; letter-spacing: 0; } /* Solo texto para lectores de pantalla */ .d-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sin JavaScript no hay búsqueda posible: la pastilla ni se enseña */ .d-busca { position: relative; display: none; width: min(560px, 100%); } html.js .d-busca { display: block; } /* Mientras el panel está abierto el titular se retira: si no, se le cruza por detrás */ .d-hero__tit { transition: opacity .35s var(--e-expo), transform .5s var(--e-expo); } html.is-buscando .d-hero__tit { opacity: 0 !important; transform: translateY(-8px) !important; } html.js.mo .d-busca { animation: d-hero-in .66s var(--e-expo) .13s both; } .d-busca__box { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 6px 0 18px; border-radius: 999px; background: rgba(243, 244, 245, .085); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); border: 1px solid rgba(243, 244, 245, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), 0 18px 46px -26px rgba(0, 0, 0, .95); transition: border-color .4s var(--e-expo), background-color .4s var(--e-expo), box-shadow .4s var(--e-expo); } .d-busca__box:focus-within { border-color: rgba(216, 185, 142, .72); background: rgba(243, 244, 245, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 0 0 3px rgba(216, 185, 142, .14), 0 18px 46px -26px rgba(0, 0, 0, .95); } .d-busca__lupa { flex: 0 0 auto; font-size: 20px; color: var(--w); opacity: .85; } .d-busca__i { flex: 1 1 auto; min-width: 0; height: 52px; border: 0; background: none; color: var(--w); /* 16 px exactos: por debajo, iOS amplía la página al enfocar el campo */ font: 400 16px/1.2 var(--f-b); letter-spacing: .01em; } .d-busca__i::placeholder { color: rgba(243, 244, 245, .6); } .d-busca__i:focus { outline: none; } .d-busca__i::-webkit-search-cancel-button, .d-busca__i::-webkit-search-decoration { -webkit-appearance: none; display: none; } .d-busca__x { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; color: var(--mut); transition: color .3s, background-color .3s; } .d-busca__x:hover, .d-busca__x:focus-visible { color: var(--w); background: rgba(243, 244, 245, .1); } .d-busca__x .material-symbols-outlined { font-size: 19px; } /* El panel abre hacia ARRIBA: en móvil el campo vive al pie del hero y el teclado del sistema se come la mitad inferior de la pantalla. */ .d-busca__panel { position: absolute; left: 0; right: 0; bottom: calc(100% + 10px); z-index: 10; max-height: min(46vh, 430px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px; border-radius: 20px; text-align: left; background: rgba(8, 8, 10, .82); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); border: 1px solid rgba(243, 244, 245, .2); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s var(--e-expo), transform .4s var(--e-expo); } .d-busca__panel.is-on { opacity: 1; transform: none; pointer-events: auto; } .d-busca__lista { display: grid; list-style: none; margin: 0; padding: 0; } .d-busca__g { padding: 12px 12px 5px; font: 500 10px/1 var(--f-m); letter-spacing: .2em; text-transform: uppercase; color: var(--t4); } .d-busca__g:first-child { padding-top: 6px; } .d-busca__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px; border-radius: 13px; color: var(--w); transition: background-color .25s; } .d-busca__r:hover, .d-busca__r[aria-selected="true"] { background: rgba(243, 244, 245, .1); } .d-busca__r[aria-selected="true"] { outline: 1px solid rgba(216, 185, 142, .4); } .d-busca__n { font: 400 15px/1.3 var(--f-b); overflow-wrap: anywhere; } .d-busca__n b { font-weight: 600; color: #fff; } .d-busca__m { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--mut); overflow-wrap: anywhere; } .d-busca__ir { flex: 0 0 auto; font-size: 18px; color: var(--t4); } .d-busca__vacio { padding: 14px 12px 16px; font-size: 14px; line-height: 1.5; color: var(--mut); } .d-busca__vacio a { color: var(--w); border-bottom: 1px solid var(--line2); } .d-busca__vacio a:hover { border-color: var(--w); } @media (max-width: 767px) { .d-busca__box { min-height: 50px; padding-left: 16px; } .d-busca__i { height: 48px; } /* Con el teclado abierto queda poca altura: el panel se queda en tres o cuatro filas */ .d-busca__panel { max-height: min(40vh, 300px); } } /* ---- Escritorio: el tríptico ------------------------------------------------------------------------- 26 % · 48 % · 26 %. A pantalla completa habría que ampliar el plano vertical ×1,79 en un monitor de 1920 y se ve pastoso; repartido en tres columnas, el central queda a ~920 px y los laterales a ~500, o sea que los vídeos (1080 y 720 de ancho) se reducen y nunca se amplían. Por debajo de 1024 px, o en pantallas verticales, solo se ve el plano central a pantalla completa. */ @media (min-width: 1024px) and (min-aspect-ratio: 4/5) { .d-hero__panel--lado { display: block; flex: 26 1 0; } .d-hero__panel--centro { flex: 48 1 0; } /* Los laterales acompañan: un velo los baja medio punto para que el ojo vaya al plano principal */ .d-hero__panel--lado::after { content: ""; position: absolute; inset: 0; z-index: 2; background: rgba(5, 5, 5, .3); } /* La foto es la única pieza con luz de día: pide algo más de velo para no desequilibrar el conjunto */ .d-hero__panel--foto::after { background: rgba(5, 5, 5, .46); } /* En el panel central el recorte es simétrico: no hay nada que reencuadrar */ .d-hero__poster, .d-hero__video { object-position: 50% 50%; } /* El acercamiento lento se queda en la foto; los dos vídeos ya se mueven solos */ html.mo .d-hero__film { animation: none; will-change: auto; } html.mo .d-hero__foto { animation: d-hero-zoom 42s ease-in-out infinite alternate; will-change: transform; } html.mo .d-hero__film.is-still .d-hero__foto { animation-play-state: paused; will-change: auto; } } /* Movimiento reducido: el lateral no se reproduce, se queda en su fotograma */ @media (prefers-reduced-motion: reduce) { .d-hero__vid { display: none; } .d-hero__quieto { display: block; } } /* ===================================================================================== 02 · MANIFIESTO (tipografía cinética) ===================================================================================== */ .d-manifesto { position: relative; background: var(--k); } .d-manifesto__stage { position: relative; } /* Sin fondo: la sección se queda en negro, que es el color de .d-manifesto */ .d-scene { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--sec) var(--gut); gap: clamp(16px, 2.6vh, 40px); min-height: 70vh; } .d-eyebrow { color: var(--mut); display: inline-flex; align-items: center; gap: 16px; } .d-eyebrow__idx { color: var(--w); } .d-eyebrow__idx::after { content: ""; display: inline-block; vertical-align: middle; width: 36px; height: 1px; margin-left: 16px; background: var(--line2); } .d-kinetic { font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300; text-transform: uppercase; /* min(ancho, alto): el titular más largo son tres líneas, así que 15.5vh por línea deja sitio para el texto y la coda incluso en una ventana baja */ font-size: clamp(34px, min(8.6vw, 13vh), 168px); line-height: .9; letter-spacing: -.012em; max-width: 13ch; } .d-kinetic .char { display: inline-block; will-change: transform, opacity; } .d-scene__text { max-width: min(52ch, 92vw); font-size: clamp(15px, min(1.25vw, 2.1vh), 19px); font-weight: 300; line-height: 1.6; color: var(--mut2); } .d-scene__coda { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 400, "wdth" 118; font-size: clamp(15px, min(1.4vw, 2.4vh), 22px); letter-spacing: .06em; text-transform: uppercase; color: var(--w); } .d-scene__coda b { font-weight: 400; } /* Cifras: el número en la tipografía de titulares y el rótulo en mono, separados por un filete */ .d-cifras { display: flex; align-items: stretch; gap: clamp(28px, 5vw, 72px); list-style: none; margin: 0; padding: 0; } .d-cifras li { display: flex; flex-direction: column; align-items: center; gap: 8px; } .d-cifras li + li { padding-left: clamp(28px, 5vw, 72px); border-left: 1px solid var(--line2); } .d-cifras b { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; font-size: clamp(28px, min(4.4vw, 7vh), 62px); line-height: 1; letter-spacing: -.01em; color: var(--w); } .d-cifras span { font-family: var(--f-m); font-size: clamp(9.5px, .72vw, 11px); letter-spacing: .2em; text-transform: uppercase; color: var(--mut); } .d-giant { font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300; text-transform: uppercase; font-size: clamp(32px, 7.2vw, 140px); line-height: .95; max-width: 92vw; letter-spacing: -.01em; } .d-giant b { font-weight: inherit; } .d-giant .char { display: inline-block; } .d-kinetic .word, .d-giant .word { white-space: nowrap; } .d-crop { position: absolute; width: 22px; height: 22px; z-index: 7; opacity: 0; pointer-events: none; } .d-crop::before, .d-crop::after { content: ""; position: absolute; background: var(--t4); } .d-crop::before { width: 100%; height: 1px; } .d-crop::after { width: 1px; height: 100%; } .d-crop--tl { left: var(--gut); top: calc(var(--lb) + 22px); } .d-crop--tr { right: var(--gut); top: calc(var(--lb) + 22px); } .d-crop--tr::before, .d-crop--tr::after { right: 0; } .d-crop--bl { left: var(--gut); bottom: calc(var(--lb) + 22px); } .d-crop--bl::before, .d-crop--bl::after { bottom: 0; } .d-crop--br { right: var(--gut); bottom: calc(var(--lb) + 22px); } .d-crop--br::before, .d-crop--br::after { right: 0; bottom: 0; } /* Las dos reglas que fijaban la pantalla a 100vh y superponían las escenas se han ido con la secuencia fijada: ahora la sección crece con su contenido, como cualquier otra. */ html.mo .d-crop { opacity: .8; } /* ===================================================================================== 03 · NUESTROS SERVICIOS Vídeo del centro de fondo y, encima, las seis familias en tarjetas de cristal con su fotografía dentro. Al pulsar una se abre, debajo de su fila, el panel con sus servicios. El fondo va más luminoso que en la 02 a propósito: el cristal necesita algo que desenfocar. ===================================================================================== */ .d-serv { position: relative; background: var(--k); overflow: hidden; padding-bottom: clamp(40px, 7vh, 100px); } .d-serv__bg { position: absolute; inset: 0; z-index: 0; } .d-serv__bg img, .d-serv__bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); } .d-serv__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(95% 75% at 50% 38%, rgba(5, 5, 5, .2) 0%, rgba(5, 5, 5, .52) 66%, rgba(5, 5, 5, .86) 100%); } .d-serv__video { opacity: 0; transition: opacity .9s var(--e-expo); } .d-serv__video.is-on { opacity: 1; } .d-serv__intro { position: relative; z-index: 2; display: grid; justify-items: center; gap: 15px; text-align: center; padding-top: var(--sec); padding-bottom: clamp(12px, 1.8vh, 26px); } /* Rótulo pequeño de la 03: el número y la palabra en la misma línea, separados por el filete */ .d-serv__eyebrow { display: inline-flex; align-items: center; gap: 14px; color: var(--mut); } .d-serv__lead { max-width: 60ch; font-size: clamp(15px, min(1.25vw, 2.1vh), 19px); line-height: 1.6; color: #c2c6ca; } .d-serv__end { position: relative; z-index: 2; display: flex; justify-content: center; padding-top: clamp(34px, 6vh, 80px); } /* ===================================================================================== 04 · MEMBRESÍΛS Tarjetas de plan en cristal sobre el acero del centro: mismo lenguaje que las familias de la sección 03, para que las dos rejillas de la página se lean como el mismo sistema. La del plan destacado lleva el filo en champán, igual que los botones de reserva. ===================================================================================== */ /* El pie de la sección respira menos que la cabecera: la rejilla ya cierra sola y, con el aire de serie, quedaba medio pantallazo en negro antes de la sección siguiente. */ .d-memb { position: relative; background: var(--k); overflow: hidden; padding: var(--sec) 0 clamp(56px, 8vh, 112px); scroll-margin-top: calc(var(--hdr) + 32px); } .d-memb__bg { position: absolute; inset: 0; z-index: 0; background: url("../media/int-centro1-2400.webp") 50% 40% / cover; filter: grayscale(1) brightness(.26) contrast(1.1); } .d-memb__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 28%, rgba(5, 5, 5, .3) 0%, rgba(5, 5, 5, .78) 62%, rgba(5, 5, 5, .95) 100%); } .d-memb > * { position: relative; z-index: 2; } .d-memb__head { display: grid; justify-items: center; gap: 16px; text-align: center; padding-bottom: clamp(30px, 5vh, 66px); } .d-memb__h { max-width: 16ch; } .d-memb__sub { max-width: 56ch; color: #c2c6ca; font-size: clamp(15px, min(1.25vw, 2.1vh), 19px); line-height: 1.6; } /* La rueda de planes: las fichas son más anchas y más altas que las de tratamientos, porque llevan lo que incluye cada plan y el precio. */ .d-memb__rueda { --ficha: clamp(238px, 20vw, 330px); } /* Dos clases: si no, manda la altura general de .d-rueda, que va más abajo en la hoja */ html.js .d-rueda.d-memb__rueda { height: clamp(380px, 38vh, 430px); } .d-planes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: clamp(12px, 1.3vw, 18px); margin: 0 auto; padding: 0 var(--gut); max-width: 1400px; } html.js .d-planes { padding: 0; max-width: none; } @media (max-width: 1100px) { .d-planes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .d-planes { grid-template-columns: 1fr; } } .d-plan { position: relative; display: flex; flex-direction: column; gap: 13px; height: 100%; min-height: 272px; padding: 22px 20px 20px; border-radius: 18px; overflow: hidden; isolation: isolate; text-decoration: none; color: var(--w); background: rgba(243, 244, 245, .055); border: 1px solid rgba(243, 244, 245, .16); -webkit-backdrop-filter: blur(20px) saturate(125%); backdrop-filter: blur(20px) saturate(125%); transition: transform .5s var(--e-expo), border-color .5s var(--e-expo), box-shadow .5s var(--e-expo); } /* filete de luz en el canto superior, como en las tarjetas de familia */ .d-plan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent); } /* la luz sigue al cursor dentro de la tarjeta */ .d-plan::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .45s var(--e-expo); background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(216, 185, 142, .16), transparent 62%); } @media (hover: hover) { .d-plan:hover::after { opacity: 1; } .d-plan:hover { transform: translateY(-6px); border-color: rgba(243, 244, 245, .34); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95); } } .d-plan:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; } .d-plan__n { font-size: 11px; letter-spacing: .2em; color: var(--mut2); } .d-plan__nom { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; text-transform: uppercase; font-size: clamp(17px, 1.5vw, 24px); line-height: 1.06; } .d-plan__desc { color: var(--mut); font-size: 14px; line-height: 1.5; } /* Lo que incluye el plan: resumido de su página, con un filete de champán por línea */ .d-plan__inc { flex: 1; display: grid; gap: 7px; align-content: start; padding-top: 3px; } .d-plan__inc span { position: relative; padding-left: 15px; font-size: 14px; line-height: 1.45; color: #b9bec4; } .d-plan__inc span::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--champ); opacity: .85; } .d-plan__precio { display: flex; align-items: baseline; gap: 6px; } .d-plan__desde { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut2); } .d-plan__eur { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; font-size: clamp(26px, 2.6vw, 40px); line-height: 1; font-variant-numeric: tabular-nums; } .d-plan__mes { font-size: 11px; letter-spacing: .14em; color: var(--mut); } .d-plan__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 6px 0 16px; border-radius: 999px; border: 1px solid rgba(243, 244, 245, .26); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; background: var(--vidrio); box-shadow: var(--vidrio-relieve); } .d-plan__cta i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(243, 244, 245, .1); } .d-plan__cta .material-symbols-outlined { font-size: 16px; transition: transform .5s var(--e-expo); } .d-plan:hover .d-plan__cta .material-symbols-outlined { transform: translateX(3px); } /* plan destacado: mismo filo de champán que los botones de reserva */ .d-plan--top { border-color: rgba(216, 185, 142, .55); } .d-plan__etq { position: absolute; right: 14px; top: 14px; z-index: 2; padding: 5px 10px; border-radius: 999px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--w); /* Cristal, como el resto. Sin desenfoque propio: la tarjeta que hay debajo ya desenfoca el fondo y encadenar dos velos se nota en el móvil. */ background: var(--vidrio); border: 1px solid rgba(216, 185, 142, .6); box-shadow: var(--vidrio-relieve); } /* El cierre es una pieza más de la rejilla: ocupa los huecos del último grupo y va en acero, para que se distinga de las tarjetas de plan sin salirse del sistema. */ /* El cierre ya no vive dentro de la rejilla: es un bloque suelto y centrado bajo la rueda */ .d-memb__fin { position: relative; z-index: 2; display: grid; justify-items: center; gap: 12px; text-align: center; /* El ancho se limita con el hueco de los lados dentro: así en móvil no llega de borde a borde (parecía una banda, no una tarjeta) y en escritorio sigue centrada. */ max-width: min(640px, calc(100% - 2 * var(--gut))); margin: clamp(22px, 4vh, 50px) auto 0; padding: 26px 28px; border-radius: 18px; /* Mismo cristal que los botones: translúcido, con el gris metalizado muy leve */ background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .22); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); box-shadow: var(--vidrio-relieve); } .d-memb__a { color: rgba(243, 244, 245, .82); font-size: clamp(14px, 1.05vw, 16px); line-height: 1.55; max-width: 46ch; } .d-memb__b { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; text-transform: uppercase; font-size: clamp(21px, 2.1vw, 34px); line-height: 1.06; max-width: 18ch; color: var(--w); } .d-memb__b b { font-weight: inherit; } .d-memb__fin .d-btn { margin-top: 8px; } @media (max-width: 620px) { .d-memb__fin { padding: 22px; } } /* ===================================================================================== 05 · ¿POR QUÉ ELEGIR? + titanio ===================================================================================== */ /* ===================================================================================== 10 · CENTROS ===================================================================================== */ .d-centros { position: relative; background: var(--k); padding-top: var(--sec); scroll-margin-top: calc(var(--hdr) + 32px); border-top: 1px solid var(--line); } .d-centros__head { display: grid; gap: 24px; padding-bottom: clamp(40px, 7vh, 80px); } .d-centros__head .d-h2 { font-size: clamp(24px, min(2.8vw, 4.6vh), 46px); max-width: 22ch; } .d-split { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); } .d-split__half { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 28px; padding: clamp(28px, 5vh, 64px) var(--gut) clamp(32px, 5vh, 56px); overflow: hidden; isolation: isolate; } .d-split__half + .d-split__half { border-left: 1px solid var(--line2); } .d-split__half::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 50% at 50% 40%, rgba(138, 143, 150, .12), transparent 70%); opacity: 0; transition: opacity .8s var(--e-expo); } .d-split__half:hover::before { opacity: 1; } /* Dos espejos redondos: el mapa se convierte en el reflejo del centro al acercarte */ .d-portal { position: relative; width: min(78%, 400px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; } .d-portal__halo { position: absolute; inset: -14%; border-radius: 50%; pointer-events: none; opacity: .34; transition: opacity 1.6s var(--e-expo); } .d-portal__halo::before { content: ""; position: absolute; inset: 0; border-radius: 50%; filter: blur(9px); background: radial-gradient(circle closest-side, rgba(255, 228, 186, 0) 61%, rgba(255, 228, 186, .5) 67%, rgba(216, 185, 142, .2) 76%, rgba(216, 185, 142, 0) 94%); animation: d-breathe 10s ease-in-out infinite alternate; } .d-portal__glass { position: absolute; inset: 9px; border-radius: 50%; overflow: hidden; background: var(--g2); } .d-portal__glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1.3s var(--e-expo), transform 2s var(--e-expo); } /* El mapa ya viene recortado en cuadrado sobre el rótulo del centro: aquí solo se invierte */ .d-portal__map { filter: invert(1) grayscale(1) contrast(1.22) brightness(.9); } .d-portal__bezel { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: var(--steel-conic); -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 9.5px), #000 calc(100% - 8.5px)); mask: radial-gradient(closest-side, transparent calc(100% - 9.5px), #000 calc(100% - 8.5px)); } .d-portal__sheen { position: absolute; inset: 9px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 0 60px rgba(255, 228, 186, .09), inset 0 -30px 60px rgba(5, 5, 5, .55), inset 0 0 0 1px rgba(243, 244, 245, .1); } .d-portal.is-lit .d-portal__halo { opacity: .8; } html:not(.mo) .d-portal__halo { opacity: .75; } /* Carrusel: dentro del espejo solo se ve la foto activa, y cambia sola cada pocos segundos mientras el centro está en pantalla. Con movimiento reducido se queda la primera. */ .d-split__info { display: grid; gap: 10px; } .d-split__n { color: var(--t4); } .d-split__name { font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300; text-transform: uppercase; font-size: clamp(18px, min(1.6vw, 2.8vh), 26px); line-height: 1.1; } /* La dirección es contenido real del cliente, no cromo: nunca por debajo de 13 px */ .d-split__addr { color: var(--mut); font-family: var(--f-m); font-size: 13.5px; line-height: 1.5; letter-spacing: .06em; text-transform: none; } /* De 768 a 1249 el bloque ya va a dos columnas pero la mono todavía no cabe de una línea (la dirección más larga mide 499 px y la columna no llega hasta ~1250): ahí también se usa la tipografía de texto, medida sobre media ventana. */ @media (min-width: 768px) and (max-width: 1249px) { .d-split__addr { font-family: var(--f-b); letter-spacing: .02em; font-size: min(calc((50vw - 2 * var(--gut)) / 27.5), 13.5px); } } /* Una sola línea siempre: la dirección es un dato, no un párrafo */ .d-split__addr a { display: inline-block; white-space: nowrap; padding: 14px 0; border-bottom: 1px solid var(--line2); transition: color .4s, border-color .4s; } .d-split__addr a:hover { color: var(--w); border-color: var(--w); } @media (max-width: 767px) { .d-split { grid-template-columns: 1fr; } .d-split__half + .d-split__half { border-left: 0; border-top: 1px solid var(--line2); } .d-portal { width: min(74%, 330px); } /* En móvil la columna son 358 px y la dirección más larga mide 37 em en la mono: no cabría de una línea ni a 10 px. Con la tipografía de texto, que es más estrecha, entra a 13 px largos. El tamaño sale del ancho disponible, así que nunca se parte. */ .d-split__addr { font-family: var(--f-b); letter-spacing: .02em; font-size: min(calc((100vw - 2 * var(--gut)) / 27.5), 14px); } } /* «Tu imagen habla antes que tú»: cierra los dos centros, antes de la tira de fotos */ .d-dice { display: grid; justify-items: center; gap: 8px; text-align: center; padding: clamp(44px, 7vh, 96px) var(--gut) 0; } .d-dice__a, .d-dice__b { font-family: var(--f-d); font-stretch: 112%; font-variation-settings: "wght" 300, "wdth" 112; font-weight: 300; text-transform: uppercase; font-size: clamp(24px, min(2.8vw, 4.6vh), 46px); line-height: 1.12; letter-spacing: -.01em; max-width: 26ch; } .d-dice__b { color: var(--mut2); } .d-strip { position: relative; padding: clamp(48px, 9vh, 120px) 0 var(--sec); overflow: hidden; } .d-strip__track { display: flex; gap: 14px; padding: 0 var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .d-strip__track::-webkit-scrollbar { display: none; } .d-strip__item { flex: 0 0 auto; scroll-snap-align: start; } .d-strip__item figure { position: relative; height: clamp(300px, 52vh, 560px); background: var(--g); overflow: hidden; } .d-strip__item img { height: 100%; width: auto; max-width: none; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(.85); transition: filter .8s var(--e-expo), transform 1.4s var(--e-expo); } .d-strip__item.is-wide img { aspect-ratio: 3 / 2; } .d-strip__item.is-tall img { aspect-ratio: 9 / 14; } .d-strip__item figure { transition: box-shadow .7s var(--e-expo); } .d-strip__item figure:hover { box-shadow: inset 0 0 0 1px rgba(216, 185, 142, .45), 0 0 44px -12px rgba(216, 185, 142, .5); } .d-strip__item figure:hover img { filter: grayscale(.1) brightness(1) contrast(1.02); transform: scale(1.04); } .d-strip__item figcaption { position: absolute; left: 12px; top: 12px; color: var(--w); background: rgba(5, 5, 5, .55); padding: 4px 8px; } /* ---------- mandos de la tira (solo donde se arrastra) ---------- */ .d-tira__hud { display: flex; align-items: center; gap: 12px; padding-top: clamp(14px, 2.4vh, 24px); } .d-tira__barra { flex: 1 1 auto; height: 2px; border-radius: 2px; background: rgba(243, 244, 245, .14); overflow: hidden; } .d-tira__barra i { display: block; height: 100%; width: 0; background: var(--w); border-radius: 2px; transition: width .18s linear; } .d-tira__pos { flex: 0 0 auto; color: var(--mut); font-size: 10px; min-width: 6ch; text-align: center; font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .d-tira__hud { display: none; } } @media (max-width: 767px) { /* Fotos del mismo tamaño y al 82 % del ancho: así siempre asoma la siguiente por el borde, que es lo que dice «esto se desliza». El precio es recortarlas a un formato común; en escritorio se mantienen sus encuadres. */ .d-strip__item figure { height: auto; width: 82vw; aspect-ratio: 4 / 5; } .d-strip__item img, .d-strip__item.is-wide img, .d-strip__item.is-tall img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 45%; } /* El borde derecho se desvanece en vez de cortarse en seco */ .d-strip::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 46px; z-index: 2; pointer-events: none; background: linear-gradient(to right, transparent, var(--k) 88%); } } @media (min-width: 1024px) { html.mo .d-strip__track { overflow: visible; width: max-content; will-change: transform; } } /* ===================================================================================== 11 · FAQ ===================================================================================== */ .d-faq { background: var(--k); padding: var(--sec) 0; border-top: 1px solid var(--line); } .d-faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; } .d-faq__head { grid-column: 1 / span 4; display: grid; gap: 24px; align-content: start; position: sticky; top: 110px; } .d-faq__h { font-size: clamp(24px, min(2.8vw, 4.6vh), 46px); max-width: 22ch; } .d-faq__list { grid-column: 6 / span 7; border-top: 1px solid var(--line2); } .d-faq__item { border-bottom: 1px solid var(--line2); } .d-faq__q { position: relative; display: grid; grid-template-columns: 48px 1fr 28px; align-items: center; gap: 12px; padding: 26px 0; list-style: none; font-size: clamp(16px, min(1.35vw, 2.3vh), 20px); line-height: 1.35; cursor: pointer; min-height: 44px; } /* la pregunta abierta se subraya sola con luz champán */ .d-faq__q::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, var(--champ), rgba(216, 185, 142, 0)); box-shadow: 0 0 12px rgba(216, 185, 142, .7); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s var(--e-expo); } .d-faq__item[open] .d-faq__q::after { transform: scaleX(1); } .d-faq__q::-webkit-details-marker { display: none; } .d-faq__q b, .d-faq__qt { margin: 0; font: inherit; font-weight: 500; } .d-faq__n { color: var(--t4); } .d-faq__plus { position: relative; width: 18px; height: 18px; justify-self: end; } .d-faq__plus::before, .d-faq__plus::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--w); transition: transform .6s var(--e-expo); } .d-faq__plus::after { transform: rotate(90deg); } .d-faq__item[open] .d-faq__plus::after { transform: rotate(0); } .d-faq__item[open] .d-faq__plus::before { transform: rotate(180deg); } .d-faq__q:hover b { color: #fff; } .d-faq__a { padding: 0 40px 30px 60px; color: var(--mut2); font-size: 16px; line-height: 1.65; max-width: 64ch; } .d-faq__item::details-content { block-size: 0; overflow: hidden; transition: block-size .6s var(--e-expo), content-visibility .6s allow-discrete; } .d-faq__item[open]::details-content { block-size: auto; } @media (max-width: 899px) { .d-faq__grid { grid-template-columns: 1fr; } .d-faq__head, .d-faq__list { grid-column: 1; position: static; } .d-faq__q { grid-template-columns: 36px 1fr 24px; } .d-faq__a { padding: 0 0 26px 48px; } } /* ===================================================================================== PIE ===================================================================================== */ .d-footer { position: relative; background: var(--k); padding: clamp(56px, 10vh, 120px) 0 96px; border-top: 1px solid var(--line); overflow: hidden; } .d-footer__logo { padding: 0 var(--gut); color: var(--t7); } .d-footer__logo svg { width: 100%; height: auto; } .d-footer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; margin-top: clamp(32px, 6vh, 64px); padding-top: 26px; border-top: 1px solid var(--line); } .d-footer__copy { font-size: 14px; color: var(--mut2); } .d-footer__legal { display: flex; flex-wrap: wrap; gap: 4px 28px; } .d-footer__legal a { font-size: 14px; color: var(--mut); display: inline-flex; align-items: center; min-height: 44px; transition: color .3s; } .d-footer__legal a:hover { color: var(--w); } .d-footer__hud { color: var(--t4); } @media (max-width: 767px) { .d-footer__bar { flex-direction: column; align-items: flex-start; } .d-footer__legal { flex-direction: column; gap: 0; } } /* ===================================================================================== PANEL A PANTALLA COMPLETA (móvil / tableta) Enlaces principales · separador TRATAMIENTOS con las familias en acordeón · enlaces secundarios · botonera fija abajo (Reservar cita / Contactar / idioma). ===================================================================================== */ .d-panel { position: fixed; inset: 0; z-index: 970; display: flex; flex-direction: column; color: var(--w); /* El área desplazable arranca bajo la barra: así el contenido no se ve pasar por detrás del aspa y el logo (la barra es transparente sobre el panel). */ padding-top: var(--hdr); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .45s var(--e-expo), visibility .45s linear; } .d-panel::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 64% at 50% -8%, rgba(216, 185, 142, .10), transparent 62%), linear-gradient(180deg, #0a0a0c 0%, var(--k) 58%); } html.is-menu-open .d-panel { visibility: visible; opacity: 1; pointer-events: auto; } .d-panel:focus { outline: none; } .d-panel__scroll { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 16px var(--gut) 26px; } .d-panel__nav ul { display: grid; } .d-panel__link { display: flex; align-items: center; gap: 10px; min-height: 52px; color: var(--w); font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; text-transform: uppercase; font-size: clamp(20px, 5.4vw, 27px); line-height: 1.1; letter-spacing: -.005em; } html.mo .d-panel__link, html.mo .d-panel__sep, html.mo .d-acc__row, html.mo .d-panel__sec { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--e-expo), transform .7s var(--e-expo); } html.mo.is-menu-open .d-panel__link, html.mo.is-menu-open .d-panel__sep, html.mo.is-menu-open .d-acc__row, html.mo.is-menu-open .d-panel__sec { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 38ms + 120ms); } .d-panel__arrow { margin-left: auto; padding-left: .5em; flex: 0 0 auto; } .d-panel__sep { display: flex; align-items: center; gap: 14px; margin: 26px 0 4px; color: var(--t4); } .d-panel__sep::before, .d-panel__sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--line); } .d-acc__row { border-bottom: 1px solid var(--line); } .d-acc__btn { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 56px; text-align: left; color: var(--w); } .d-acc__name { font: 500 16px/1.25 var(--f-b); overflow-wrap: break-word; } .d-acc__count { color: var(--t4); font-size: 10px; } .d-acc__caret { color: var(--t4); } .d-acc__btn[aria-expanded="true"] .d-acc__caret { transform: translateY(1px) rotate(-135deg); } .d-acc__list { display: grid; padding: 0 0 12px 2px; } .d-acc__list a { display: flex; align-items: center; min-height: 44px; font-size: 15px; line-height: 1.35; color: var(--mut2); transition: color .3s; } .d-acc__list a:hover, .d-acc__list a:focus-visible { color: #fff; } .d-panel__sec { padding-top: 18px; } .d-panel__sech { color: var(--t4); padding: 16px 0 2px; } .d-panel__min { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; text-align: left; font: 400 15px/1.3 var(--f-b); color: var(--mut2); transition: color .3s; } .d-panel__min:hover, .d-panel__min:focus-visible { color: #fff; } .d-panel__min .material-symbols-outlined { font-size: 18px; color: var(--t4); } .d-panel__form { margin: 0; } .d-panel__place { display: flex; align-items: center; gap: 9px; padding-top: 24px; color: var(--t4); } .d-panel__lambda { width: 8px; height: 14px; flex: 0 0 auto; fill: currentColor; } .d-panel__foot { position: relative; z-index: 2; flex: 0 0 auto; display: grid; gap: 10px; justify-items: center; padding: 14px var(--gut) calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(6, 6, 7, .96); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-top: 1px solid var(--line2); } .d-panel__foot .d-lang { width: auto; } .d-panel__foot .d-lang__list { top: auto; bottom: calc(100% + 10px); left: 50%; right: auto; transform: translateX(-50%) translateY(8px); } .d-panel__foot .d-lang__list.is-on { transform: translateX(-50%); } @media (min-width: 1100px) { .d-panel { display: none; } } html.is-menu-open #whatsapp-button, html.is-menu-open #reservar-button, html.is-menu-open #reservar-tooltip, html.is-menu-open .lux-selector { visibility: hidden !important; opacity: 0 !important; pointer-events: none; } html.is-menu-open body { overflow: hidden; } /* ===================================================================================== WIDGETS (reservar + WhatsApp) — reestilizados en titanio ===================================================================================== */ #reservar-button, #whatsapp-button { width: 52px; height: 52px; border-radius: 0; background: rgba(12, 12, 14, .82); color: var(--w); border: 1px solid rgba(243, 244, 245, .26); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .4s var(--e-expo), border-color .4s, color .4s, opacity .4s, transform .5s var(--e-expo); } #reservar-button { right: 84px; bottom: 20px; } #whatsapp-button { right: 20px; bottom: 20px; font-size: 24px; } #reservar-button span { font-size: 24px; } #reservar-button:hover, #whatsapp-button:hover { background: var(--w); color: var(--k); border-color: var(--w); transform: none; box-shadow: 0 0 34px -6px rgba(216, 185, 142, .8); } #reservar-tooltip { right: 148px; bottom: 32px; border-radius: 0; background: var(--w); color: var(--k); font: 500 11px/1.9 var(--f-m); letter-spacing: .14em; text-transform: uppercase; padding: 2px 12px; } #reservar-tooltip::after { border-left-color: var(--w); } @media (max-width: 767px) { #reservar-tooltip { display: none !important; } .d-trat__end { padding-bottom: 72px; } .d-strip, .d-faq { padding-bottom: 96px; } } .chat-popup { border-radius: 0; background: var(--g); border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); font-family: var(--f-b); z-index: 1001; } .chat-header { background: #0b0b0d; border-bottom: 1px solid var(--line); } .chat-name { font-weight: 600; letter-spacing: .02em; } .chat-status { color: var(--t4); font-family: var(--f-m); letter-spacing: .12em; text-transform: uppercase; font-size: 10px; } .chat-avatar { filter: grayscale(.2); } .chat-body { background: var(--g); background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 10px); } .chat-bubble.bot, .chat-typing { background: #1b1c1f; color: var(--w); border: 1px solid var(--line); border-radius: 0; } .chat-bubble.bot a { color: #fff; text-decoration: underline; } .chat-typing { color: var(--mut); } .chat-typing .dot { background: var(--t4); } .chat-footer { background: #0b0b0d; border-top: 1px solid var(--line); } #chat-message { background: #17181b; color: var(--w); border-radius: 0; border: 1px solid var(--line); font-size: 16px; } #chat-message::placeholder { color: var(--t4); } #chat-send { background: var(--w); color: var(--k); border-radius: 0; } #chat-send:hover { background: #fff; box-shadow: none; } /* ===================================================================================== ESTADOS INICIALES DE REVELADO (solo con JS + movimiento) ===================================================================================== */ html.js.mo [data-reveal-line] { opacity: 0; } /* ===================================================================================== MOVIMIENTO REDUCIDO — todo visible, sin animación ===================================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .d-grain { animation: none; } .d-hero__scroll > * { transition: opacity .5s var(--e-expo); } html.hero-moved .d-hero__scroll { pointer-events: none; } html.hero-moved .d-hero__scroll > * { opacity: 0; } .d-hero__scroll i { animation: none; transform: none; } } /* Sin botones flotantes: las acciones viven en la barra fija (la ventana del chat sigue funcionando) */ #whatsapp-button, #reservar-button, #reservar-tooltip { display: none !important; } /* Botón de reproducir: solo aparece cuando el sistema pide movimiento reducido */ .d-hero__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; border: 1px solid rgba(243, 244, 246, .45); background: rgba(8, 8, 10, .55); color: var(--w); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .d-hero__play[hidden] { display: none; } .d-hero__play:hover, .d-hero__play:focus-visible { background: var(--w); color: var(--k); border-color: var(--w); } .d-hero__play .material-symbols-outlined { font-size: 20px; } /* ---------- 02 · vídeo de presentación ---------- */ /* Vertical (1080 × 1920). En móvil ocupa el ancho; en escritorio manda la altura, porque un 9:16 a todo lo ancho sería una columna gigantesca. */ .d-vsl { /* flex: 0 0 auto — dentro de .d-scene es un elemento flex y, sin esto, se encoge hasta perder la proporción (se quedaba casi cuadrado). */ position: relative; flex: 0 0 auto; width: min(100%, 420px); aspect-ratio: 1080 / 1920; border-radius: 22px; overflow: hidden; isolation: isolate; background: #0a0a0c; border: 1px solid rgba(243, 244, 245, .16); box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95); } @media (min-width: 768px) { .d-vsl { width: auto; height: min(66vh, 680px); } } .d-vsl__v { display: block; width: 100%; height: 100%; object-fit: cover; background: #0a0a0c; } /* Botón de play en cristal, del mismo material que los demás botones */ .d-vsl__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; cursor: pointer; color: var(--w); background: var(--vidrio); border: 1px solid rgba(255, 255, 255, .42); box-shadow: var(--vidrio-relieve); -webkit-backdrop-filter: var(--vidrio-velo); backdrop-filter: var(--vidrio-velo); transition: transform .5s var(--e-expo), border-color .4s var(--e-expo), opacity .4s var(--e-expo); } .d-vsl__play .material-symbols-outlined { font-size: 34px; margin-left: 3px; } @media (hover: hover) { .d-vsl__play:hover { transform: translate(-50%, -50%) scale(1.06); border-color: rgba(216, 185, 142, .8); } } .d-vsl__play:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; } /* Una vez arrancado mandan los controles del navegador */ .d-vsl.is-on .d-vsl__play { opacity: 0; pointer-events: none; } .d-scene__cta { margin-top: clamp(4px, 1.2vh, 14px); } /* ---------- 02 · en ordenador, a dos columnas ---------- Apilado y centrado el bloque dejaba una columna de 470 px perdida en medio de un campo negro de 1920: el párrafo pequeño, las cifras y, debajo, el vídeo. En horizontal el texto se lee a la izquierda, más grande, y el vídeo —que es vertical— ocupa el alto por la derecha. En móvil no cambia nada: .d-scene__col es display: contents. */ .d-scene__col { display: contents; } /* En móvil el div no existe, así que el orden lo pone el flex: párrafo, cifras, vídeo y botón */ @media (max-width: 1023px) { .d-vsl { order: 1; } .d-scene__cta { order: 2; } } @media (min-width: 1024px) { .d-scene { flex-direction: row; align-items: center; justify-content: center; text-align: left; gap: clamp(44px, 5.5vw, 110px); } .d-scene__col { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(18px, 2.8vh, 38px); max-width: clamp(380px, 34vw, 620px); } .d-scene__text { max-width: none; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.45; color: #d5d8dc; } .d-cifras li { align-items: flex-start; } .d-vsl { height: min(74vh, 760px); } } /* ---------- 03 · la rueda ---------- */ /* Sin JavaScript esto es una rejilla normal con todos los servicios de todas las familias. */ .d-rueda { position: relative; z-index: 2; } .d-rueda__lista { list-style: none; margin: 0 auto; padding: 0 var(--gut); max-width: 1400px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; } /* Con JavaScript, las fichas se colocan sobre el círculo y la rejilla desaparece */ html.js .d-rueda { height: clamp(360px, 50vh, 520px); touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } html.js .d-rueda.is-arrastrando { cursor: grabbing; } html.js .d-rueda__lista { position: absolute; inset: 0; display: block; max-width: none; padding: 0; } html.js .d-rueda__item { /* El centrado va en el transform que escribe el JS (translate -50 %), para que cada ficha se centre por su propia altura: con un margen fijo quedaba un hueco muerto arriba. */ position: absolute; left: 50%; top: 50%; width: var(--ficha); will-change: transform, opacity; } /* El 30vh solo entra en ventanas anchas y bajas: ahí una ficha de 300 px de ancho mide 410 de alto y no cabe. En el resto manda el 18vw de siempre. */ :root { --ficha: clamp(176px, min(18vw, 30vh), 300px); } /* La ficha: cristal, foto arriba y rótulo debajo */ .d-ficha { display: block; border-radius: 18px; overflow: hidden; color: var(--w); text-decoration: none; background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .16); box-shadow: var(--vidrio-relieve); transition: border-color .4s var(--e-expo); } .d-ficha__im { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #0d0d10; } .d-ficha__im img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.82); transition: filter .6s var(--e-expo), transform 1s var(--e-expo); } .d-ficha__cap { display: grid; gap: 4px; padding: 11px 13px 13px; } .d-ficha__t { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; text-transform: uppercase; font-size: clamp(15px, 1.3vw, 21px); line-height: 1.1; overflow-wrap: anywhere; } .d-ficha__d { color: var(--t4); font-size: 9.5px; } @media (hover: hover) { .d-ficha:hover { border-color: rgba(216, 185, 142, .6); } .d-ficha:hover .d-ficha__im img { filter: grayscale(0) brightness(1); transform: scale(1.05); } } .d-ficha:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; } /* La del centro manda: a color y con el filo en champán */ html.js .d-rueda__item.es-centro .d-ficha { border-color: rgba(216, 185, 142, .72); } html.js .d-rueda__item.es-centro .d-ficha__im img { filter: grayscale(0) brightness(1); } /* ---------- 03 · mandos ---------- */ .d-rueda__hud { display: flex; align-items: center; justify-content: center; gap: 18px; padding-top: clamp(16px, 2.6vh, 30px); position: relative; z-index: 2; } /* Solo el ángulo, sin círculo ni fondo: la zona de pulsado sigue siendo de 44 px */ .d-rueda__nav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--mut); transition: color .35s var(--e-expo), transform .35s var(--e-expo); } .d-rueda__nav::before { content: ""; width: 11px; height: 11px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; } .d-rueda__nav[data-rueda-prev]::before { transform: translateX(2px) rotate(45deg); } .d-rueda__nav[data-rueda-next]::before { transform: translateX(-2px) rotate(-135deg); } .d-rueda__nav:hover { color: var(--w); } .d-rueda__nav:active { transform: scale(.9); } .d-rueda__nav:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; border-radius: 6px; } .d-rueda__pos { color: var(--mut); min-width: 7ch; text-align: center; font-variant-numeric: tabular-nums; } /* Una sola ficha: no hay rueda que mover */ html.js .d-rueda.es-unica { cursor: default; } html.js .d-rueda.es-unica ~ .d-rueda__hud { visibility: hidden; } /* ===================================================================================== 04 · EL CAMBIO QUE BUSCAS Pares antes/después en tarjetas pequeñas sobre negro; al pulsar una se abre en grande. Cada mitad va en 1:2, que es casi el recorte natural de las composiciones: así se ve la cara entera en vez de cortada. Cada tarjeta avisa de que la imagen es una recreación. ===================================================================================== */ /* Más apretada que el resto: es una sección de apoyo, no quiere ocupar pantalla */ .d-ad { position: relative; background: var(--k); padding: calc(var(--sec) * .7) 0 calc(var(--sec) * .55); } .d-ad__head { display: grid; justify-items: center; gap: 12px; text-align: center; padding-bottom: clamp(18px, 3vh, 34px); } .d-ad__eyebrow { color: var(--mut); } .d-ad__h { max-width: 18ch; } .d-ad__fila { list-style: none; margin: 0 auto; padding: 0 var(--gut); max-width: 1680px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 1.2vw, 18px); } @media (max-width: 1320px) { .d-ad__fila { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) and (max-width: 1320px) { .d-ad__fila { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 760px) { .d-ad__fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { /* En pantallas estrechas se pasan de lado y la tarjeta se hace grande */ .d-ad__fila { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; } .d-ad__fila > li { scroll-snap-align: center; } .d-ad__fila::-webkit-scrollbar { display: none; } } .d-ad__card { overflow: hidden; border-radius: 16px; height: 100%; background: var(--vidrio); border: 1px solid rgba(243, 244, 245, .14); box-shadow: var(--vidrio-relieve); } /* El par: las dos mitades con un filete entre ellas. Es un botón: abre el visor */ .d-ad__par { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 100%; background: rgba(243, 244, 245, .18); border: 0; padding: 0; cursor: zoom-in; } .d-ad__par[data-ad-oculto] { display: none; } .d-ad__par:focus-visible { outline: 2px solid var(--champ); outline-offset: -2px; } .d-ad__lado { position: relative; display: block; background: #0d0d10; } .d-ad__lado img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 2; object-fit: cover; } .d-ad__et { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; text-align: left; font-size: 9px; letter-spacing: .18em; color: var(--w); background: linear-gradient(to top, rgba(5, 5, 5, .8), transparent); } /* La lupa: dice que se puede agrandar */ .d-ad__lupa { position: absolute; right: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; background: rgba(5, 5, 5, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(243, 244, 245, .3); opacity: .85; transition: opacity .3s var(--e-expo); } .d-ad__lupa::before, .d-ad__lupa::after { content: ""; position: absolute; background: var(--w); } .d-ad__lupa::before { left: 7px; top: 12px; width: 12px; height: 1.4px; } .d-ad__lupa::after { left: 12px; top: 7px; width: 1.4px; height: 12px; } @media (hover: hover) { .d-ad__par:hover .d-ad__lupa { opacity: 1; } } /* nowrap: si las flechas se bajan a otra línea, esa tarjeta crece y la fila se descuadra */ .d-ad__pie { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 10px; padding: 11px 12px 0; } /* En rejilla la tarjeta se queda en 220-280 px y al rótulo no le queda sitio al lado de las flechas: el navegador partía las palabras por la mitad («ARMONIZACIO / N FACIAL»). Ahí el rótulo pasa arriba, a todo el ancho, y las flechas debajo; como le pasa a todas, la altura sigue siendo la misma en la fila. En el carrusel de móvil no hace falta: la tarjeta mide el 78 % de la pantalla y sobra sitio. */ @media (min-width: 521px) { .d-ad__pie { display: grid; gap: 4px; } .d-ad__nav { margin-left: -7px; } a.d-ad__t { justify-self: start; } } .d-ad__t { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; text-transform: uppercase; font-size: clamp(12px, 1.05vw, 15px); line-height: 1.15; color: var(--w); text-decoration: none; min-width: 0; overflow-wrap: break-word; /* Dos líneas siempre: así todas las tarjetas de la fila miden lo mismo */ min-height: 2.3em; } a.d-ad__t { border-bottom: 1px solid transparent; transition: border-color .35s var(--e-expo); } a.d-ad__t:hover { border-color: rgba(216, 185, 142, .8); } /* Las flechas, del mismo tamaño que las de la rueda: solo el ángulo */ .d-ad__nav { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } .d-ad__b { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--mut); transition: color .3s var(--e-expo), transform .3s var(--e-expo); } .d-ad__b::before { content: ""; width: 7px; height: 7px; border-left: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; } .d-ad__b[data-ad-prev]::before { transform: translateX(1px) rotate(45deg); } .d-ad__b[data-ad-next]::before { transform: translateX(-1px) rotate(-135deg); } .d-ad__b:hover { color: var(--w); } .d-ad__b:active { transform: scale(.88); } .d-ad__b:focus-visible { outline: 2px solid var(--champ); outline-offset: 3px; border-radius: 5px; } .d-ad__n { color: var(--t4); font-size: 9px; min-width: 4ch; text-align: center; } /* Ejemplos que vienen ya compuestos en una imagen (los casos reales). Ocupan el mismo hueco que un par —dos mitades de 1:2 son un cuadrado— y la imagen entra entera dentro, sin recortar: son fotos de cuero cabelludo y cortarlas se llevaría media cabeza. */ .d-ad__par--uno { grid-template-columns: 1fr; aspect-ratio: 1 / 1; } .d-ad__par--uno .d-ad__lado { height: 100%; min-height: 0; } /* En posición absoluta la imagen no puede estirar el bloque: manda la proporción del padre */ .d-ad__par--uno .d-ad__lado img { position: absolute; inset: 0; aspect-ratio: auto; width: 100%; height: 100%; object-fit: contain; } .d-ad__pie { padding-bottom: 12px; } .d-ad__fila > li { align-self: start; } /* ---------- el visor ---------- */ .d-lupa { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; touch-action: none; -webkit-user-select: none; user-select: none; padding: clamp(14px, 4vh, 48px) clamp(14px, 6vw, 90px); background: rgba(4, 4, 5, .93); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transition: opacity .3s var(--e-expo); } .d-lupa.is-on { opacity: 1; } .d-lupa__fig { margin: 0; display: grid; justify-items: center; gap: 14px; max-height: 100%; } .d-lupa__fig img { display: block; max-width: 100%; max-height: calc(100vh - 170px); object-fit: contain; border-radius: 12px; transition: transform .32s var(--e-expo), opacity .32s var(--e-expo); -webkit-user-drag: none; } .d-lupa__pie { display: grid; justify-items: center; gap: 5px; text-align: center; } .d-lupa__t { font-family: var(--f-d); font-stretch: 118%; font-variation-settings: "wght" 300, "wdth" 118; font-weight: 300; text-transform: uppercase; font-size: clamp(14px, 1.5vw, 20px); color: var(--w); } .d-lupa__n { color: var(--t4); font-size: 10px; } .d-lupa__x, .d-lupa__b { position: absolute; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--mut); transition: color .3s var(--e-expo), transform .3s var(--e-expo); } .d-lupa__x:hover, .d-lupa__b:hover { color: var(--w); } .d-lupa__x:focus-visible, .d-lupa__b:focus-visible { outline: 2px solid var(--champ); outline-offset: 4px; border-radius: 6px; } .d-lupa__x { right: clamp(10px, 3vw, 28px); top: clamp(10px, 3vh, 28px); width: 44px; height: 44px; } .d-lupa__x::before, .d-lupa__x::after { content: ""; position: absolute; width: 17px; height: 1.5px; background: currentColor; } .d-lupa__x::before { transform: rotate(45deg); } .d-lupa__x::after { transform: rotate(-45deg); } .d-lupa__b { top: 50%; width: 52px; height: 52px; margin-top: -26px; } .d-lupa__b::before { content: ""; width: 14px; height: 14px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; } .d-lupa__b--prev { left: clamp(4px, 1.5vw, 24px); } .d-lupa__b--prev::before { transform: translateX(3px) rotate(45deg); } .d-lupa__b--next { right: clamp(4px, 1.5vw, 24px); } .d-lupa__b--next::before { transform: translateX(-3px) rotate(-135deg); } .d-lupa__b[hidden] { display: none; } html.is-lupa { overflow: hidden; } /* El selector de propuestas va por encima de todo a propósito (es la herramienta para cambiar de propuesta); mientras el visor está abierto, se aparta. */ html.is-lupa .lux-selector { opacity: 0; pointer-events: none; transition: opacity .25s; }