/* ============================================================================ SPA EJECUTIVO LA PERLA — sistema visual v5 «la perla» WebClicStudio · 15-sep-2026 · reemplaza a styles.css + arte.css (ronda 4) ---------------------------------------------------------------------------- DIRECCIÓN DE ARTE · Una firma: el círculo y su perla. Sale del medallón del logo (aro dorado y el filete — · ● · — de su pie) y de la luna de la sala de parejas. · Formas propias por página: arco, círculo, cápsula, media luna, espejo (la forma orgánica del espejo del local), boleto y collar de perlas. · Tipografía: Noto Serif Display en ancho 75 con la CURSIVA DORADA como acento (el de cada titular) + Hanken Grotesk para leer. Alojadas aquí. · Fotos: el grado de color va HORNEADO en el archivo (docs/grado_perla.py). Este CSS no aplica filtros, velos ni mezclas a ninguna foto. · Nada de mármol dibujado, caligrafía, ramas, texto vertical ni botones con degradado: fue lo que hizo que el sitio pareciera plantilla (PROGRESO §12). ÍNDICE 1. Fuentes 8. Menú móvil 15. Formas (piezas) 2. Tokens 9. Pie 16. Portada 3. Base 10. Flotantes / visor 17+. Páginas (ver final) 4. Tipografía 11. Formularios 5. Estructura 12. Avisos / estado 6. Botones 13. Acordeón 7. Cabecera 14. Entrada al scroll ========================================================================== */ /* ─────────────────────────────── 1. FUENTES ─────────────────────────────── */ @font-face { font-family: "LP Display"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/lp-display.woff2") format("woff2"); } @font-face { font-family: "LP Display"; font-style: italic; font-weight: 300 500; font-display: swap; src: url("../fonts/lp-display-italic.woff2") format("woff2"); } @font-face { font-family: "LP Texto"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/lp-texto.woff2") format("woff2"); } /* ─────────────────────────────── 2. TOKENS ──────────────────────────────── */ :root { /* noche: el negro cálido del medallón */ --noche: #0e0c0a; --noche-2: #15120f; --noche-3: #1d1915; --noche-4: #28221c; --hilo: rgba(232, 200, 126, .16); --hilo-fuerte: rgba(232, 200, 126, .36); /* oro: identidad, en dosis chicas */ --oro: #c9a24b; --oro-claro: #e3c27a; --oro-hondo: #a88434; --oro-texto: #7a5e20; /* dorado para texto sobre marfil: 5.4:1 */ --brasa: #c0552a; /* el calor del infrarrojo: solo en el sauna */ /* crema: texto sobre noche */ --crema: #f3ede3; --crema-2: #cbc1b2; /* 10:1 */ --crema-3: #a0968a; /* 6.6:1 */ /* marfil: las secciones de día */ --marfil: #f4efe6; --marfil-2: #ebe3d5; --tinta: #1a1510; --tinta-2: #574c40; /* 7.3:1 sobre marfil */ --hilo-tinta: rgba(26, 21, 16, .14); --vivo: #7ccf95; --wa: #16874a; /* verde con texto blanco: 4.57:1 (24-09: más vivo, como la referencia) */ --f-display: "LP Display", "Noto Serif Display", "Bodoni 72", Didot, "Times New Roman", serif; --f-texto: "LP Texto", "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif; --t-hero: clamp(3.2rem, min(5.6vw, 10.4vh), 6.6rem); --t-h1: clamp(2.9rem, 1.8rem + 3.6vw, 5.4rem); --t-h2: clamp(2.4rem, 1.5rem + 2.9vw, 4.4rem); --t-h3: clamp(1.45rem, 1.2rem + .9vw, 2rem); --t-base: clamp(16px, .95rem + .18vw, 17.5px); --t-sm: 14.5px; --t-xs: 13px; --ancho: 1280px; --canal: clamp(20px, 5vw, 64px); --cab-h: 84px; --seccion: clamp(76px, 9vw, 140px); --radio: 3px; --curva: cubic-bezier(.2, .7, .1, 1); --sombra: 0 30px 80px -30px rgba(0, 0, 0, .75); } /* ───────────────────────────── 3. BASE ──────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Ronda 11: el documento es oscuro. Decirlo hace que el navegador pinte en oscuro lo que no controlamos —la barra de desplazamiento, el rebote del final de la página, los desplegables nativos— en vez de meter un rectángulo blanco en medio de la marca. */ color-scheme: dark; scrollbar-color: var(--oro-hondo) var(--noche-2); /* Un enlace a #ancla no debe dejar el titular debajo de la cabecera fija. */ scroll-padding-top: calc(var(--cab-h) + 18px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Fundido entre páginas en los navegadores que lo traen (Chrome 126+). Sin él no se pierde nada: es el remate, no el mecanismo. La regla va al nivel más alto —es donde el navegador la reconoce— y quien pide menos movimiento simplemente se queda sin la animación. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } body { margin: 0; background: var(--noche); color: var(--crema); font: 400 var(--t-base)/1.62 var(--f-texto); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.sin-scroll { overflow: hidden; } img, video { display: block; max-width: 100%; height: auto; } picture { display: contents; } /* 02-10 · Encuadre de cada foto de la sesión del cliente (foco_foto() en inc/datos.php): toda caja que recorta (object-fit: cover) lo usa; un --pos puesto por la página manda sobre él. Las reglas de cada tarjeta más abajo conservan su valor de antes solo para las fotos que no tienen encuadre propio. */ img.foto { object-position: var(--pos, var(--foco, 50% 50%)); } figure { margin: 0; } svg { width: 1.15em; height: 1.15em; flex: none; } a { color: inherit; text-decoration: none; } p { margin: 0 0 1em; } p:last-child { margin-bottom: 0; } ul, ol { margin: 0; padding: 0; } button { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--hilo); margin: 2rem 0; } :focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; } ::selection { background: var(--oro); color: var(--noche); } .solo-lectores, .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .saltar { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--oro); color: var(--noche); font-weight: 600; border-radius: var(--radio); } .saltar:focus { top: 12px; } [hidden] { display: none !important; } /* Los hijos de un grid tienen min-width:auto: una imagen o un mapa lo desbordan */ .rejilla > *, [class*="__cuerpo"] > * { min-width: 0; } /* ─────────────────────────── 4. TIPOGRAFÍA ──────────────────────────────── */ h1, h2, h3, h4 { margin: 0; font-family: var(--f-display); font-weight: 460; line-height: 1; letter-spacing: -.012em; text-wrap: balance; } h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); } h3 { font-size: var(--t-h3); line-height: 1.08; } h4 { font-size: 1.2rem; line-height: 1.15; } h1 em, h2 em, h3 em, .titular em { font-style: italic; font-weight: 400; color: var(--oro-claro); letter-spacing: -.02em; } .titular { font-family: var(--f-display); font-weight: 460; line-height: .92; letter-spacing: -.012em; text-wrap: balance; } .titular .l { display: block; } /* El rótulo: — · ● · — + texto en versalitas espaciadas. Número opcional. */ .perla-marca { display: inline-block; flex: none; width: 38px; height: 9px; vertical-align: middle; background: radial-gradient(circle, currentColor 0 3.2px, transparent 3.8px) 50% 50% / 9px 9px no-repeat, radial-gradient(circle, currentColor 0 1.4px, transparent 1.9px) 11px 50% / 4px 4px no-repeat, radial-gradient(circle, currentColor 0 1.4px, transparent 1.9px) calc(100% - 11px) 50% / 4px 4px no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 8px 1px no-repeat, linear-gradient(currentColor, currentColor) 100% 50% / 8px 1px no-repeat; } .rotulo { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; font: 600 12.5px/1.3 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); } .rotulo b { font: 500 15px/1 var(--f-display); letter-spacing: .04em; color: var(--crema); } .entrada { font-size: clamp(16.5px, .9rem + .35vw, 19.5px); line-height: 1.62; color: var(--crema-2); max-width: 48ch; } .texto-suave { color: var(--crema-2); } .texto-tenue { color: var(--crema-3); } .pequeno { font-size: var(--t-sm); } .mini { font-size: var(--t-xs); } .enlace { color: var(--oro-claro); border-bottom: 1px solid var(--hilo-fuerte); transition: border-color .2s; } .enlace:hover { border-color: var(--oro-claro); } .enlace-flecha { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14.5px; letter-spacing: .03em; color: var(--oro-claro); } .enlace-flecha svg { transition: transform .3s var(--curva); } .enlace-flecha:hover svg, a:hover .enlace-flecha svg { transform: translateX(4px); } /* Prosa larga (fichas, promociones) */ .prosa { max-width: 68ch; color: var(--crema-2); } .prosa h2 { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.5rem); color: var(--crema); margin: 2.2em 0 .6em; } .prosa h3 { color: var(--crema); margin: 1.8em 0 .5em; } .prosa strong { color: var(--crema); font-weight: 600; } .prosa ul { padding-left: 0; list-style: none; margin: 0 0 1.2em; } .prosa li { position: relative; padding-left: 26px; margin-bottom: .5em; } .prosa li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--oro); } .prosa a { color: var(--oro-claro); border-bottom: 1px solid var(--hilo-fuerte); } /* ─────────────────────────── 5. ESTRUCTURA ──────────────────────────────── */ .contenedor { width: 100%; max-width: calc(var(--ancho) + 2 * var(--canal)); margin-inline: auto; padding-inline: var(--canal); } .contenedor-ancho { max-width: calc(1440px + 2 * var(--canal)); } .contenedor-angosto { max-width: calc(880px + 2 * var(--canal)); } .seccion { position: relative; padding-block: var(--seccion); } .seccion-sm { position: relative; padding-block: calc(var(--seccion) * .6); } /* Temas de sección: noche (por defecto), noche-2 y marfil */ .s-noche-2 { background: var(--noche-2); } .s-marfil { background: var(--marfil); color: var(--tinta); } .s-marfil .rotulo { color: var(--oro-texto); } .s-marfil .rotulo b { color: var(--tinta); } .s-marfil h1 em, .s-marfil h2 em, .s-marfil h3 em, .s-marfil .titular em { color: var(--oro-texto); } .s-marfil .entrada, .s-marfil .texto-suave { color: var(--tinta-2); } .s-marfil .texto-tenue { color: var(--tinta-2); } .s-marfil .enlace-flecha, .s-marfil .enlace { color: var(--oro-texto); } .s-marfil hr { border-color: var(--hilo-tinta); } /* Costura entre secciones: un hilo con su perla, nunca ondas ni cortes dibujados */ .costura { position: relative; height: 1px; background: linear-gradient(90deg, transparent, var(--hilo-fuerte) 20%, var(--hilo-fuerte) 80%, transparent); } .costura::after { content: ""; position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 6px var(--noche); } /* Encabezado de sección: rótulo, titular y acción a la derecha */ .encabezado { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px 48px; margin-bottom: clamp(40px, 5vw, 72px); } .encabezado > div { display: grid; gap: 18px; } .encabezado .entrada { margin: 4px 0 0; } .encabezado--centro { grid-template-columns: 1fr; justify-items: center; text-align: center; } .encabezado--centro .entrada { margin-inline: auto; } @media (max-width: 760px) { .encabezado { grid-template-columns: 1fr; } } /* Migas de pan */ .migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--crema-3); } .migas a:hover { color: var(--oro-claro); } .migas svg { width: 12px; height: 12px; opacity: .6; } .migas span[aria-current] { color: var(--crema-2); } /* ───────────────────────────── 6. BOTONES ───────────────────────────────── */ .grupo-botones, .botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 1px solid transparent; border-radius: 2px; cursor: pointer; font: 600 15px/1 var(--f-texto); letter-spacing: .02em; white-space: nowrap; background: none; transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--curva); } .btn svg { width: 18px; height: 18px; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-oro { background: var(--oro); color: #16110b; } .btn-oro:hover:not(:disabled) { background: var(--oro-claro); } .btn-linea { border-color: rgba(243, 237, 227, .3); color: var(--crema); } .btn-linea:hover:not(:disabled) { border-color: var(--oro); color: var(--oro-claro); } .btn-tinta { background: var(--tinta); color: var(--crema); } .btn-tinta:hover:not(:disabled) { background: #30271e; } .btn-wa { background: var(--wa); color: #fff; } .btn-wa:hover:not(:disabled) { background: #11703c; } .btn-fantasma { border: 0; min-height: 0; padding: 0; color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; } .btn-sm { min-height: 42px; padding: 0 18px; font-size: 14px; } .cab-cita { font-style: normal; } /* la palabra que el celular angosto se guarda */ .btn-lg { min-height: 58px; padding: 0 32px; font-size: 16px; } .btn-bloque { width: 100%; } .s-marfil .btn-linea { border-color: rgba(26, 21, 16, .3); color: var(--tinta); } .s-marfil .btn-linea:hover:not(:disabled) { border-color: var(--tinta); color: var(--tinta); } .s-marfil .btn-fantasma { color: var(--oro-texto); } /* ──────────────────────────── 7. CABECERA ───────────────────────────────── */ .cabecera { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--cab-h); transition: background-color .35s, border-color .35s, height .35s; border-bottom: 1px solid transparent; } .cabecera::before { /* sombra desde arriba mientras es transparente: los enlaces se leen sobre cualquier foto */ content: ""; position: absolute; inset: 0 0 -60%; pointer-events: none; background: linear-gradient(180deg, rgba(14, 12, 10, .72), rgba(14, 12, 10, 0)); transition: opacity .35s; } .cabecera.solida, .cabecera-fija .cabecera, .cabecera.menu-abierto { /* Ronda 11: a .95 se veía pasar el contenido por detrás (un botón, un titular) y la cabecera parecía sucia. Opaca + un velo borroso por debajo. */ background: var(--noche); border-bottom-color: var(--hilo); box-shadow: 0 14px 34px -26px rgba(0, 0, 0, .9); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .cabecera.solida, .cabecera-fija .cabecera, .cabecera.menu-abierto { background: rgba(14, 12, 10, .86); -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08); } } .cabecera.solida::before, .cabecera-fija .cabecera::before, .cabecera.menu-abierto::before { opacity: 0; } .cabecera > .contenedor { position: relative; height: 100%; display: flex; align-items: center; gap: 24px; } .barra-aviso { position: relative; z-index: 61; padding: 9px var(--canal); background: var(--oro); color: #16110b; text-align: center; font-size: var(--t-xs); font-weight: 600; } .barra-aviso + .cabecera { top: 38px; } .marca { display: flex; align-items: center; gap: 13px; margin-right: auto; } .marca img { width: 48px; height: 48px; } .marca-texto strong { display: block; font: 500 15px/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--crema); } .marca-texto span { display: block; margin-top: 6px; font: 600 10px/1 var(--f-texto); letter-spacing: .38em; text-transform: uppercase; color: var(--oro); } .nav { display: flex; align-items: center; gap: 2px; } .nav-enlace { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; background: none; border: 0; cursor: pointer; font: 500 14.5px/1 var(--f-texto); color: var(--crema-2); transition: color .2s; } .nav-enlace .chevron { width: 13px; height: 13px; transition: transform .3s var(--curva); } .nav-item.abierto .chevron { transform: rotate(180deg); } .nav-enlace:hover, .nav-item.abierto > .nav-enlace, .nav-item.activo > .nav-enlace { color: var(--crema); } .nav-item > .nav-enlace::after { /* la perla bajo el ítem activo */ content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--oro); opacity: 0; transform: scale(.3); transition: .3s var(--curva); } .nav-item.activo > .nav-enlace::after { opacity: 1; transform: none; } /* una sola perla: la de la página actual */ .nav-item.con-panel > .nav-enlace::after { margin-left: -9px; } /* Mega-panel: se centra en la cabecera, no en el ítem (así nunca se sale) */ .panel { --w: 380px; position: absolute; top: calc(100% - 8px); left: 50%; width: min(var(--w), calc(100vw - 2 * var(--canal))); transform: translate(-50%, 10px); opacity: 0; visibility: hidden; pointer-events: none; padding: 28px; background: var(--noche-2); border: 1px solid var(--hilo); border-radius: 4px; box-shadow: var(--sombra); transition: opacity .25s, transform .35s var(--curva), visibility 0s .35s; } .panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } /* puente del puntero */ .panel::after { content: ""; position: absolute; left: 28px; right: 28px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--oro), transparent); } .nav-item.abierto .panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition: opacity .25s, transform .35s var(--curva), visibility 0s; } .panel-servicios { --w: 1000px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 28px 32px; } .panel-experiencias { --w: 820px; } #panel-mas { --w: 420px; left: auto; right: var(--canal); transform: translateY(10px); } .nav-item.abierto #panel-mas { transform: none; } .panel-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .panel-titulo { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font: 600 12px/1.3 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } .panel-titulo svg { width: 17px; height: 17px; } .panel-lista { list-style: none; display: grid; gap: 2px; } .panel-enlace { display: flex; align-items: center; gap: 14px; padding: 9px 10px; margin-inline: -10px; border-radius: 2px; transition: background-color .2s; } .panel-enlace:hover { background: var(--noche-3); } .panel-enlace b { display: block; font-weight: 500; font-size: 14.5px; line-height: 1.3; color: var(--crema); } .panel-enlace small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--crema-3); } .panel-enlace.compacto { padding-block: 6px; } .panel-enlace.compacto b { font-size: 14px; color: var(--crema-2); font-weight: 400; } .panel-enlace.compacto:hover b { color: var(--crema); } .panel-enlace .ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); color: var(--oro-claro); flex: none; } .panel-enlace .ico svg { width: 17px; height: 17px; } .panel-destacado { position: relative; display: grid; align-content: end; gap: 6px; min-height: 300px; padding: 22px; overflow: hidden; border-radius: 140px 140px 3px 3px; isolation: isolate; } .panel-destacado img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1s var(--curva); } .panel-destacado::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14,12,10,0) 30%, rgba(14,12,10,.92)); } .panel-destacado:hover img { transform: scale(1.05); } .panel-destacado h4 { font-size: 1.5rem; } .panel-destacado p { font-size: 13px; color: var(--crema-2); margin: 0 0 6px; } .panel-destacado .etiqueta { justify-self: start; } .panel-pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--hilo); } .panel-exp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; } .exp-mini { display: grid; gap: 12px; } .exp-mini img { width: 100%; aspect-ratio: .82; object-fit: cover; border-radius: 999px 999px 3px 3px; transition: transform .6s var(--curva); } .exp-mini:hover img { transform: translateY(-4px); } .exp-mini-cuerpo b { display: flex; align-items: center; gap: 8px; font: 460 1.3rem/1.1 var(--f-display); color: var(--crema); } .exp-mini-cuerpo b svg { width: 18px; height: 18px; color: var(--oro); } .exp-mini-cuerpo small { display: block; margin-top: 4px; font-size: 13px; color: var(--crema-3); line-height: 1.4; } .cabecera-acciones { display: flex; align-items: center; gap: 10px; } .hamburguesa { display: none; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(243, 237, 227, .26); border-radius: 2px; background: none; cursor: pointer; } /* 09-10 · Instagram y TikTok en los dos cuadros que el cliente marcó en la cabecera del celular, con la misma forma que el botón del menú. Aparecen junto con el menú (≤1060 px); en la computadora están en el pie. */ .cab-redes { display: none; gap: 8px; } .cab-red { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid rgba(243, 237, 227, .26); border-radius: 2px; color: var(--oro-claro); transition: border-color .2s, color .2s; } .cab-red svg { width: 20px; height: 20px; } .cab-red:hover, .cab-red:focus-visible { border-color: var(--oro); color: var(--crema); } .hamburguesa svg { width: 22px; height: 22px; } .hamburguesa .icono-cerrar { display: none; } .hamburguesa[aria-expanded="true"] .icono-abrir { display: none; } .hamburguesa[aria-expanded="true"] .icono-cerrar { display: block; } @media (max-width: 1180px) { .nav-enlace { padding-inline: 9px; font-size: 14px; } .marca-texto strong { font-size: 13.5px; } } @media (max-width: 1060px) { .nav { display: none; } .hamburguesa { display: grid; } .cab-redes { display: flex; } } @media (max-width: 760px) { :root { --cab-h: 70px; } .marca img { width: 42px; height: 42px; } .marca-texto strong { font-size: 13px; letter-spacing: .16em; } .marca-texto span { font-size: 9px; } /* Ronda 11: antes el botón de reservar SE OCULTABA y, arriba del todo, el celular se quedaba sin llamada a la acción (la barra inferior solo aparece a los 320 px de scroll). Ahora se encoge a una pastilla: el icono y la palabra. */ .cabecera-acciones { gap: 8px; } .cabecera-acciones .btn { min-height: 40px; padding: 0 14px; font-size: 13.5px; gap: 7px; border-radius: 999px; } .cabecera-acciones .btn svg { width: 16px; height: 16px; } .hamburguesa { width: 42px; height: 42px; } .cab-red { width: 42px; height: 42px; } .cab-redes { gap: 8px; } } /* Pantallas angostas: el nombre escrito cede su sitio; el medallón ya identifica la marca. */ @media (max-width: 430px) { .marca-texto { display: none; } .cabecera-acciones .btn { padding: 0 13px; } .cab-cita { display: none; } } /* 24-09 · home en el celular: la cabecera es el logo con «SPA EJECUTIVO / LA PERLA» y el menú, sin la pastilla «Reservar»: la portada ya trae «Reservar cita» y, al bajar, aparece la barra inferior con «Reservar mi cita». Así lo muestran las dos referencias del cliente. */ @media (max-width: 760px) { .pag-inicio .cabecera-acciones .btn { display: none; } .pag-inicio .marca-texto { display: block; } } /* 09-10 · Con Instagram y TikTok en la cabecera, en los celulares angostos (360 px) todo se achica un poco para que «SPA EJECUTIVO» no se parta en dos renglones */ @media (max-width: 380px) { .cabecera-acciones, .cab-redes { gap: 6px; } .cab-red { width: 38px; height: 38px; } .cab-red svg { width: 18px; height: 18px; } .hamburguesa { width: 40px; height: 40px; } .pag-inicio .marca-texto strong { letter-spacing: .12em; } } @media (max-width: 350px) { .cab-red { width: 36px; height: 36px; } .hamburguesa { width: 38px; height: 38px; } .pag-inicio .marca img { width: 38px; height: 38px; } .pag-inicio .marca-texto strong { font-size: 11.5px; letter-spacing: .08em; } } /* ──────────────────────────── 8. MENÚ MÓVIL ─────────────────────────────── */ .menu-movil { position: fixed; inset: var(--cab-h) 0 0; z-index: 55; overflow-y: auto; overscroll-behavior: contain; background: var(--noche); padding: 18px 0 40px; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .35s var(--curva); } .menu-movil.abierto { opacity: 1; transform: none; } .mm-lista { list-style: none; } .mm-item { border-bottom: 1px solid var(--hilo); } .mm-enlace { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 16px 0; background: none; border: 0; cursor: pointer; text-align: left; font: 460 1.75rem/1.05 var(--f-display); color: var(--crema); } .mm-enlace .chevron { width: 20px; height: 20px; color: var(--oro); transition: transform .3s var(--curva); } .mm-item.abierto .chevron { transform: rotate(180deg); } .mm-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--curva); } .mm-sub > div { overflow: hidden; } .mm-item.abierto .mm-sub { grid-template-rows: 1fr; } .mm-sublista { list-style: none; padding: 0 0 16px; } .mm-cat-tit { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; font: 600 12px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } .mm-cat-tit svg { width: 15px; height: 15px; } .mm-subenlace { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 16px; color: var(--crema-2); } .mm-subenlace .ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--hilo); color: var(--oro); } .mm-subenlace .ico svg { width: 15px; height: 15px; } .mm-subenlace.destacado { color: var(--oro-claro); } .mm-pie { display: grid; gap: 10px; margin-top: 26px; } .mm-datos { display: grid; gap: 8px; margin-top: 24px; font-size: var(--t-sm); color: var(--crema-3); } .mm-redes { display: flex; gap: 10px; margin-top: 8px; } /* ─────────────────────────────── 9. PIE ─────────────────────────────────── */ .pie { position: relative; overflow: hidden; background: var(--noche); border-top: 1px solid var(--hilo); padding-bottom: 32px; } /* La luna del pie: un aro enorme que asoma, con el lema adentro */ .pie-luna { position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 26px; padding: clamp(80px, 11vw, 150px) var(--canal) clamp(60px, 7vw, 96px); } .pie-luna::before { content: ""; position: absolute; left: 50%; top: clamp(30px, 4vw, 60px); width: min(980px, 130vw); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; border: 1px solid var(--hilo-fuerte); background: radial-gradient(circle at 50% 30%, rgba(227, 194, 122, .08), transparent 55%); } .pie-luna::after { content: ""; position: absolute; left: 50%; top: calc(clamp(30px, 4vw, 60px) - 7px); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6de 0 12%, var(--oro-claro) 38%, #8c6a26 100%); box-shadow: 0 0 0 6px var(--noche); } .pie-luna > * { position: relative; } .pie-luna .titular { font-size: clamp(2.8rem, 1.6rem + 4.4vw, 6rem); color: var(--crema); } .pie-luna .titular .frase { white-space: nowrap; } .pie-luna p { max-width: 46ch; color: var(--crema-2); margin: 0; } .pie-rejilla { position: relative; display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 48px; border-top: 1px solid var(--hilo); } .pie-marca { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .pie-marca img { width: 58px; height: 58px; } .pie-desc { font-size: var(--t-sm); color: var(--crema-3); max-width: 36ch; } .pie h4 { margin-bottom: 16px; font: 600 12px/1.3 var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); } .pie ul { list-style: none; display: grid; gap: 10px; font-size: var(--t-sm); color: var(--crema-2); } .pie ul a:hover { color: var(--oro-claro); } .pie-contacto li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; } .pie-contacto svg { width: 17px; height: 17px; margin-top: 3px; color: var(--oro); } .redes { display: flex; gap: 10px; } .red { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--hilo-fuerte); border-radius: 50%; color: var(--crema-2); transition: .2s; } .red:hover { color: var(--noche); background: var(--oro); border-color: var(--oro); } .red svg { width: 18px; height: 18px; } .pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hilo); font-size: var(--t-xs); color: var(--crema-3); } .pie-legal a { color: var(--crema-2); text-decoration: underline; text-underline-offset: 3px; } .pie-legal a:hover { color: var(--oro-claro); } @media (max-width: 960px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .pie-rejilla { grid-template-columns: 1fr; } } /* ─────────────────────── 10. FLOTANTES Y VISOR ──────────────────────────── */ .wa-flotante { position: fixed; right: 22px; bottom: 22px; z-index: 50; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 12px 30px -8px rgba(0,0,0,.6); transition: opacity .3s, transform .3s var(--curva); } .wa-flotante:hover { transform: scale(1.06); } body:has(.cabecera:not(.solida)) .wa-flotante { opacity: 0; pointer-events: none; transform: translateY(12px); } /* arriba no tapa la portada: aparece al bajar */ .wa-flotante svg { width: 28px; height: 28px; } .barra-movil { display: none; } @media (max-width: 760px) { .wa-flotante { display: none; } .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 7px; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(14, 12, 10, .96); border-top: 1px solid var(--hilo); transform: translateY(110%); transition: transform .35s var(--curva); } .barra-movil.visible { transform: none; } /* 24-09: tres botones (Reservar mi cita · Servicios · WhatsApp), como la referencia del cliente */ .barra-movil .btn { min-height: 46px; padding: 0 6px; gap: 6px; border-radius: 4px; font-size: clamp(11.5px, 3.3vw, 14px); } .barra-movil .btn svg { width: 17px; height: 17px; } .barra-movil .btn-linea { border-color: rgba(227, 194, 122, .55); } .barra-movil .btn-linea svg { color: var(--oro-claro); } .barra-movil__extra { font-style: normal; } body.con-barra-movil .pie { padding-bottom: 96px; } } @media (max-width: 370px) { .barra-movil__extra { display: none; } } .visor { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 60px 70px; background: rgba(10, 8, 7, .96); opacity: 0; transition: opacity .25s; } .visor.abierto { opacity: 1; } .visor img { max-height: 82vh; width: auto; border-radius: 3px; } .visor-cerrar, .visor-nav { position: absolute; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); background: var(--noche-2); cursor: pointer; } .visor-cerrar { top: 18px; right: 18px; } .visor-nav.prev { left: 16px; } .visor-nav.next { right: 16px; } .visor-pie { position: absolute; bottom: 20px; left: 0; right: 0; margin: 0; text-align: center; font-size: var(--t-sm); color: var(--crema-2); } @media (max-width: 640px) { .visor { padding: 60px 12px; } .visor-nav { top: auto; bottom: 56px; } } /* ──────────────────────────── 11. FORMULARIOS ───────────────────────────── */ .campo { display: grid; gap: 7px; margin-bottom: 18px; } .campo label { font-size: var(--t-sm); font-weight: 600; color: var(--crema); } .req { color: var(--oro); } .control { width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid rgba(243, 237, 227, .2); border-radius: 2px; background: var(--noche-2); color: var(--crema); font: 400 16px/1.4 var(--f-texto); transition: border-color .2s, box-shadow .2s; } .control::placeholder { color: var(--crema-3); } .control:focus { outline: none; border-color: var(--oro); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); } textarea.control { min-height: 120px; resize: vertical; } select.control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; padding-right: 44px; } .pista { font-size: var(--t-xs); color: var(--crema-3); } .msg-error { display: none; font-size: var(--t-xs); color: #f0a58a; } .campo.error .control { border-color: #e0795a; } .campo.error .msg-error { display: block; } .honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .s-marfil .campo label { color: var(--tinta); } .s-marfil .control { background: #fffdf8; color: var(--tinta); border-color: rgba(26, 21, 16, .22); } .s-marfil .control::placeholder { color: #8a7f72; } .s-marfil .pista { color: var(--tinta-2); } .s-marfil .msg-error { color: #a33b1c; } /* ─────────────────────── 12. AVISOS, ETIQUETAS Y ESTADO ─────────────────── */ .aviso { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 2px; border: 1px solid var(--hilo-fuerte); background: var(--noche-2); font-size: var(--t-sm); } .aviso svg { width: 20px; height: 20px; margin-top: 1px; } .aviso-ok { border-color: rgba(124, 207, 149, .5); } .aviso-ok svg { color: var(--vivo); } .aviso-error { border-color: rgba(224, 121, 90, .6); } .aviso-error svg { color: #f0a58a; } .aviso-info svg { color: var(--oro); } .aviso a { color: var(--oro-claro); text-decoration: underline; } .s-marfil .aviso { background: #fffdf8; border-color: var(--hilo-tinta); } .etiqueta { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--hilo-fuerte); border-radius: 999px; font: 600 12px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--oro-claro); background: rgba(14, 12, 10, .6); } .etiqueta svg { width: 13px; height: 13px; } .estado { display: inline-flex; align-items: center; gap: 10px; } .estado .punto { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--crema-3); flex: none; } .estado.abierto .punto { background: var(--vivo); } .estado.abierto .punto::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--vivo); animation: latido 2.4s ease-out infinite; } @keyframes latido { from { opacity: .8; transform: scale(.5); } to { opacity: 0; transform: scale(1.4); } } .esqueleto { display: block; min-height: 46px; border-radius: 2px; background: linear-gradient(90deg, var(--noche-2), var(--noche-3), var(--noche-2)); background-size: 200% 100%; animation: brillo 1.4s linear infinite; } @keyframes brillo { to { background-position: -200% 0; } } /* ──────────────────────────── 13. ACORDEÓN ──────────────────────────────── */ .faq { display: grid; border-top: 1px solid var(--hilo); } .faq-item { border-bottom: 1px solid var(--hilo); } .faq-pregunta { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; background: none; border: 0; cursor: pointer; text-align: left; font: 460 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.2 var(--f-display); color: var(--crema); } .faq-pregunta .signo { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); transition: background-color .25s, border-color .25s; } .faq-pregunta .signo::before, .faq-pregunta .signo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--oro-claro); transition: transform .3s var(--curva); } .faq-pregunta .signo::after { transform: rotate(90deg); } .faq-item.abierto .signo { background: var(--oro); border-color: var(--oro); } .faq-item.abierto .signo::before { background: var(--noche); } .faq-item.abierto .signo::after { transform: rotate(0); background: var(--noche); } .faq-respuesta { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--curva); } .faq-respuesta > div { overflow: hidden; } .faq-respuesta p { padding: 0 60px 24px 0; color: var(--crema-2); margin: 0; } .faq-item.abierto .faq-respuesta { grid-template-rows: 1fr; } .s-marfil .faq, .s-marfil .faq-item { border-color: var(--hilo-tinta); } .s-marfil .faq-pregunta { color: var(--tinta); } .s-marfil .faq-pregunta .signo { border-color: rgba(26, 21, 16, .25); } .s-marfil .faq-pregunta .signo::before, .s-marfil .faq-pregunta .signo::after { background: var(--tinta); } .s-marfil .faq-item.abierto .signo { background: var(--tinta); border-color: var(--tinta); } .s-marfil .faq-item.abierto .signo::before, .s-marfil .faq-item.abierto .signo::after { background: var(--marfil); } .s-marfil .faq-respuesta p { color: var(--tinta-2); } /* ───────────────────────── 14. ENTRADA AL SCROLL ────────────────────────── */ .js .revelar { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--curva), transform 1.1s var(--curva); } .js .revelar.visible { opacity: 1; transform: none; } .js .revelar.r1 { transition-delay: .1s; } .js .revelar.r2 { transition-delay: .2s; } .js .revelar.r3 { transition-delay: .3s; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; } .js .revelar { opacity: 1; transform: none; } } /* ──────────────────────────── 15. FORMAS ────────────────────────────────── */ /* Una «pieza» es una foto con forma. La forma vive en --r, así el marco (::before, a 10 px) sigue exactamente el mismo contorno. */ .pieza { position: relative; display: block; --r: 3px; --marco: 10px; } .pieza > img, .pieza > picture > img, .pieza > .pieza-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); background: var(--noche-3); } .pieza.marco::before { content: ""; position: absolute; inset: calc(var(--marco) * -1); border: 1px solid var(--hilo-fuerte); border-radius: var(--r); pointer-events: none; transition: border-color .35s, inset .45s var(--curva); } .s-marfil .pieza.marco::before { border-color: rgba(122, 94, 32, .4); } .arco { --r: 999px 999px 3px 3px; } .arco-inv { --r: 3px 3px 999px 999px; } .circulo { --r: 50%; aspect-ratio: 1; } .capsula { --r: 999px; } .luna-media { --r: 999px 999px 0 0; aspect-ratio: 2 / 1; } .espejo { --r: 46% 54% 44% 56% / 36% 40% 60% 64%; } /* el espejo orgánico de la sala de parejas */ .hoja { --r: 999px 3px 999px 3px; } .pieza figcaption, .pieza .pie-foto { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 2; white-space: nowrap; padding: 7px 13px; background: var(--noche); border: 1px solid var(--hilo-fuerte); border-radius: 999px; font: 600 12px/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--crema-2); } .s-marfil .pieza figcaption { background: var(--marfil); color: var(--tinta-2); border-color: rgba(122, 94, 32, .35); } /* La perla suelta (sobre un aro, en un canto) */ .gema { display: block; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6de 0 12%, var(--oro-claro) 38%, #8c6a26 100%); box-shadow: 0 0 0 5px var(--noche), 0 0 20px 3px rgba(227, 194, 122, .3); } .s-marfil .gema { box-shadow: 0 0 0 5px var(--marfil), 0 6px 16px rgba(60, 40, 10, .3); } /* ═══════════════════════════════ 16. PORTADA ═══════════════════════════════ Las entradas son ANIMACIONES CSS, no clases puestas por JS: si el JS falla, todo se ve igual (Ley #4). Con «reducir movimiento» se apagan. */ @keyframes subir { from { opacity: 0; transform: translateY(.4em); } to { opacity: 1; transform: none; } } @keyframes aparecer { from { opacity: 0; } to { opacity: 1; } } @keyframes trazar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes asomar { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } /* ─── Portada v6 «láminas» (ronda 6) ──────────────────────────────────────── Una LÁMINA mide una pantalla en escritorio (≥1100 px de ancho y ≥600 px de alto). Lo de adentro se mide con min(vw, vh): la composición entra entera de 1280×650 a 2560×1440 — incluida la pantalla de Johnny (1536×730). */ @keyframes latir { 50% { opacity: .7; transform: scale(1.04); } } @keyframes girar { to { transform: rotate(360deg); } } @keyframes desfile { to { transform: translateX(-50%); } } @keyframes polvo { 0% { opacity: 0; transform: translateY(24px); } 20% { opacity: .9; } 75% { opacity: .5; } 100% { opacity: 0; transform: translateY(-90px); } } @keyframes onda { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.34); opacity: 0; } } .lam { position: relative; padding-block: clamp(64px, 11vh, 140px); } .lam h2 { font-size: clamp(2.4rem, min(4.8vw, 9.4vh), 5.6rem); } @media (min-width: 1100px) and (min-height: 600px) { .lam { min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--cab-h) + 2vh) 4vh; } } /* Portátiles de pantalla baja (600–680 px de alto): se recortan los aires para que la lámina siga cabiendo entera y no asome un filo de la siguiente. */ @media (min-width: 1100px) and (max-height: 680px) { .lam { padding-block: calc(var(--cab-h) + 1.4vh) 2.4vh; } } /* El borde de arriba sube como una luna: la sección clara no choca en recto con la oscura */ .lam--arco { border-radius: 50% 50% 0 0 / clamp(36px, 6vw, 120px) clamp(36px, 6vw, 120px) 0 0; } /* En monitores grandes el marco del home respira hasta 1600 px (el resto del sitio se queda en 1440): así la escena y el titular crecen con la pantalla. */ [data-lamina] > .contenedor { max-width: calc(min(1600px, 100vw - 2 * var(--canal)) + 2 * var(--canal)); } /* ═══ Portada v7 (cambios del 24-09): la foto a pantalla completa ═══ Pedido del cliente: al entrar desde el celular, la primera pantalla es una fotografía del spa desde debajo del encabezado hasta el final visible de la pantalla, sin que asome la sección siguiente. `100svh` es el alto de la pantalla CON las barras del navegador a la vista: así el borde inferior de la foto coincide con lo que se ve al abrir la página en cualquier celular. Cada foto tenía versión vertical y horizontal (index.php → $portada) y un punto de encuadre por versión: nunca se deforma (object-fit: cover) y lo importante —la luna, la cabina, el logo— queda a la vista. Desde el 05-10 el celular muestra la horizontal COMPLETA (bloque «05-10» más abajo). */ .hero7 { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; height: 100vh; height: 100svh; min-height: 520px; background: var(--noche); } /* overflow: hidden — el acercamiento (scale 1.07 → 1, 14 s) agrandaba la foto por encima de su caja y asomaba una franja sin velo entre la cabecera y la portada; como la foto cambia cada 7 s, la animación nunca terminaba y la franja se veía casi siempre. */ .hero7__fotos { position: absolute; inset: var(--cab-h) 0 0; z-index: -1; overflow: hidden; } .hero7__foto { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; } .hero7__foto.activa { opacity: 1; } .hero7__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--vpos, 50% 50%); } @media (min-aspect-ratio: 1/1) { .hero7__foto img { object-position: var(--hpos, 50% 50%); } } .hero7__foto.activa img { animation: acercar 14s ease-out both; } @keyframes acercar { from { transform: scale(1.07); } to { transform: none; } } /* El velo: oscuro arriba (el rótulo se lee) y abajo (el titular se lee); en medio, la foto limpia */ .hero7__fotos::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(14, 12, 10, .82) 0%, rgba(14, 12, 10, .2) 13%, rgba(14, 12, 10, 0) 26%, rgba(14, 12, 10, 0) 40%, rgba(14, 12, 10, .55) 58%, rgba(14, 12, 10, .9) 78%, var(--noche) 100%); } .hero7__cuerpo { position: relative; flex: 1; display: flex; flex-direction: column; padding-top: calc(var(--cab-h) + clamp(10px, 2svh, 22px)); padding-bottom: max(14px, calc(env(safe-area-inset-bottom) + 10px)); } .hero7__rotulo { display: flex; align-items: center; gap: 12px; margin: 0; font: 500 clamp(10.5px, 2.95vw, 14px)/1.2 var(--f-display); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-claro); animation: aparecer 1s ease both .2s; } .hero7__adorno { display: inline-flex; align-items: center; gap: 7px; color: var(--oro); flex: none; } .hero7__adorno::before, .hero7__adorno::after { content: ""; height: 1px; background: currentColor; } .hero7__adorno::before { width: 14px; } .hero7__adorno::after { width: 26px; } .hero7__adorno svg { width: 20px; height: 20px; } .hero7__txt { margin-top: auto; display: grid; gap: clamp(10px, 1.9svh, 24px); } .hero7 .titular { font-size: clamp(2.9rem, min(15.4vw, 8.4svh), 7.6rem); color: var(--crema); text-shadow: 0 2px 30px rgba(0, 0, 0, .5); } .hero7 .titular .l { animation: subir 1s var(--curva) both; } .hero7 .titular .l:nth-child(3) { animation-delay: .12s; } .hero7 .titular .l:nth-child(4) { animation-delay: .24s; } .hero7 .entrada { margin: 0; max-width: 46ch; font-size: clamp(14px, 3.85vw, 19px); line-height: 1.5; color: var(--crema); text-shadow: 0 1px 14px rgba(0, 0, 0, .6); animation: aparecer 1s ease both .45s; } .hero7__botones { display: grid; grid-template-columns: 1.14fr 1fr 1fr; gap: 8px; animation: aparecer 1s ease both .55s; } .hero7__botones .btn { min-height: 56px; padding: 0 6px; gap: 8px; border-radius: 4px; font-size: clamp(12px, 3.5vw, 15.5px); } .hero7__botones .btn svg { width: 20px; height: 20px; } .hero7__botones .btn-linea { border-color: rgba(227, 194, 122, .62); background: rgba(14, 12, 10, .6); color: var(--crema); } .hero7__botones .btn-linea svg { color: var(--oro-claro); } .hero7__botones .btn-linea:hover { background: rgba(14, 12, 10, .8); } @media (max-width: 374px) { .hero7__botones .btn-linea svg { display: none; } .hero7__rotulo { gap: 9px; letter-spacing: .14em; } .hero7__adorno::after { width: 16px; } } .hero7__puntos { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: clamp(8px, 1.6svh, 20px); } .hero7__puntos::before, .hero7__puntos::after { content: ""; width: clamp(40px, 14vw, 90px); height: 1px; margin-inline: 8px; background: linear-gradient(90deg, transparent, var(--oro)); } .hero7__puntos::after { background: linear-gradient(90deg, var(--oro), transparent); } .hero7__puntos button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; } .hero7__puntos button::before { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--oro-claro); transition: background-color .3s, transform .3s var(--curva); } .hero7__puntos button[aria-pressed="true"]::before { background: var(--oro-claro); transform: scale(1.12); } @media (min-width: 761px) { .hero7__fotos::after { background: linear-gradient(90deg, rgba(14, 12, 10, .78) 0%, rgba(14, 12, 10, .35) 42%, rgba(14, 12, 10, 0) 70%), linear-gradient(180deg, rgba(14, 12, 10, .7) 0%, rgba(14, 12, 10, 0) 22%, rgba(14, 12, 10, 0) 55%, rgba(14, 12, 10, .85) 100%); } .hero7__txt { max-width: 780px; } .hero7 .titular { font-size: clamp(3.6rem, min(7.6vw, 12.4svh), 8.4rem); } .hero7__botones { display: flex; flex-wrap: wrap; gap: 12px; } .hero7__botones .btn { min-height: 56px; padding: 0 28px; font-size: 15.5px; } .hero7__puntos { justify-content: flex-start; } .hero7__puntos::before { display: none; } } /* 28-09 · En pantallas horizontales el texto iba anclado abajo (como la maqueta del celular) y se veía hundido: medio hero vacío arriba y los botones casi en el borde. Va centrado en el alto libre entre el rótulo y los puntos. En el celular sigue abajo, como la referencia del cliente. */ @media (min-width: 761px) and (min-aspect-ratio: 1/1) { .hero7__txt { margin-block: auto; } .hero7__cuerpo { padding-bottom: max(22px, calc(env(safe-area-inset-bottom) + 14px)); } } /* 02-10 · Revisión de encuadres. Estirada a todo el ancho, la foto perdía la mitad de su alto: a una terapeuta de la pareja la tapaba el titular y a la del bambú se le cortaba la cabeza. La primera corrección (la foto entera y angosta sobre un fondo desenfocado) se veía «rara, muy fuerte el efecto». Ahora la foto ocupa el 72 % del ancho a la derecha, se recorta un poco arriba y abajo (--hpos de cada foto en index.php) y se funde LARGO hacia la izquierda en la oscuridad, como la portada a sangre con su velo de siempre, pero sin nadie detrás del texto. Debajo, la misma foto muy desenfocada y muy oscura (--fondo, la de 480 px) solo entibia el negro. */ @media (min-width: 761px) and (min-aspect-ratio: 1/1) { .hero7__foto::before { content: ""; position: absolute; inset: -80px; background: var(--fondo) 70% 50% / cover no-repeat; filter: blur(70px) brightness(.24) saturate(1.05); } .hero7__foto img { left: auto; width: 72%; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 14%, #000 34%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 14%, #000 34%); } .hero7__fotos::after { background: linear-gradient(90deg, rgba(14, 12, 10, .6) 0%, rgba(14, 12, 10, .3) 34%, rgba(14, 12, 10, 0) 56%), linear-gradient(180deg, rgba(14, 12, 10, .55) 0%, rgba(14, 12, 10, 0) 18%, rgba(14, 12, 10, 0) 66%, rgba(14, 12, 10, .75) 100%); } } /* 05-10 · En el celular la foto se ve COMPLETA (Johnny, con su referencia: «en la portada de celular tiene que verse completa la imagen»). El recorte vertical a pantalla completa dejaba ver una sola terapeuta de la pareja. Ahora va la misma foto horizontal de la computadora, entera y a todo el ancho debajo de la cabecera (sin el acercamiento, que recortaba los bordes), fundida hacia abajo en la oscuridad. Como en la referencia, el titular se apoya en el borde de la foto: empieza en su último sexto, ya apagado, nunca sobre una cara. En pantallas altas lo que sobra queda abajo, después de los puntos: la portada sigue ocupando la pantalla y no asoma la sección siguiente (pedido del 24-09). En pantallas bajas la portada crece unos píxeles en vez de tapar la foto. «not all and (min-aspect-ratio: 1/1)» = exactamente lo contrario de las reglas apaisadas de arriba. */ @media not all and (min-aspect-ratio: 1/1) { .hero7 { height: auto; min-height: 100vh; min-height: 100svh; } .hero7__fotos { background: radial-gradient(ellipse 80% 34% at 50% calc(75vw * .92), rgba(201, 162, 75, .1), transparent 72%); } .hero7__foto img { inset: 0 0 auto; height: auto; aspect-ratio: 4 / 3; object-position: 50% 50%; -webkit-mask-image: linear-gradient(180deg, #000 0, #000 64%, rgba(0, 0, 0, .5) 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 64%, rgba(0, 0, 0, .5) 84%, transparent 100%); } .hero7__foto.activa img { animation: none; } /* Solo un velo arriba, para el rótulo dorado: el resto de la foto, limpio */ .hero7__fotos::after { background: linear-gradient(180deg, rgba(14, 12, 10, .72) 0, rgba(14, 12, 10, 0) 58px); } /* El texto empieza al 84 % del alto de la foto (75vw) y la sigue */ .hero7__rotulo { margin-bottom: calc(63vw - 20px - clamp(10px, 2svh, 22px)); } .hero7__txt { margin-top: 0; } } @media (prefers-reduced-motion: reduce) { .hero7__foto { transition: none; } .hero7__foto.activa img { animation: none; } } /* Celular en horizontal (≈ 844×390): con el mínimo de 520 px y el titular en tres líneas, los tres botones quedaban bajo el pliegue. Cabecera más baja, titular en una línea y sin la entrada. */ @media (orientation: landscape) and (max-height: 500px) { :root { --cab-h: 64px; } .marca img { width: 40px; height: 40px; } .hero7 { min-height: 0; } .hero7 .titular { font-size: clamp(2rem, 12svh, 3.2rem); } .hero7 .titular .l { display: inline-block; margin-right: .22em; } .hero7 .entrada { display: none; } } /* Reunión del 25-09: el home quedó en portada · sauna · promociones · cómo llegar. Los bloques .paq7, .cinta, .carta6, .visita6/.collar, .panorama6 y .dudas ya no los usa index.php; se dejan para recuperar una sección si el cliente la pide (el home anterior está en docs/respaldos/home-antes-reunion-25-09/). */ /* ═══ Paquetes de Bienestar (cambios del 24-09): la segunda pantalla ═══ Reemplaza a las tres puertas bajo la luna. Primero el celular: las tres puertas caben en una fila, debajo el horario, la dirección y el WhatsApp, y al pie cuatro sellos. En escritorio, las puertas a la derecha. */ .paq7 { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(18px, 3svh, 90px) clamp(30px, 5svh, 100px); background: radial-gradient(ellipse 60% 24% at 50% 0%, rgba(227, 194, 122, .2), transparent 72%), radial-gradient(ellipse 34% 20% at 0% 100%, rgba(214, 140, 60, .16), transparent 72%), radial-gradient(ellipse 40% 30% at 100% 58%, rgba(227, 194, 122, .07), transparent 70%), var(--noche); border-top: 1px solid var(--hilo); } .paq7__cuerpo { display: grid; gap: clamp(14px, 2.2svh, 40px); } .paq7__cab { position: relative; display: grid; justify-items: center; gap: 7px; text-align: center; } .paq7__adorno { display: flex; align-items: center; gap: 14px; color: var(--oro); } .paq7__adorno::before, .paq7__adorno::after { content: ""; width: min(26vw, 160px); height: 1px; background: linear-gradient(90deg, transparent, var(--oro)); } .paq7__adorno::after { background: linear-gradient(90deg, var(--oro), transparent); } .paq7__adorno svg { width: 24px; height: 24px; } .paq7 h2 { font-size: clamp(1.8rem, 7.7vw, 4.4rem); font-style: italic; font-weight: 500; line-height: 1; letter-spacing: -.02em; } .paq7 h2 span { color: var(--crema); } .paq7 h2 em { color: var(--oro-claro); } /* La firma en cursiva que acompaña al titular en la referencia del cliente */ .paq7__firma { position: absolute; right: -8px; top: 16px; margin: 0; text-align: center; font: italic 400 clamp(10px, 2.6vw, 18px)/1.02 var(--f-display); color: var(--oro-claro); transform: rotate(-9deg); } .paq7__lema { margin: 0; font: 500 clamp(11.5px, 3.3vw, 16px)/1.2 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--crema); } .paq7__entrada { margin: 0; max-width: 62ch; font-size: clamp(12px, 3.1vw, 17px); line-height: 1.45; color: var(--crema-2); } .paq7__puertas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(6px, 1.9vw, 26px); margin-inline: calc(var(--canal) * -1 + 8px); padding-top: 18px; } .paq7__puerta { position: relative; display: flex; flex-direction: column; padding: 5px 5px 0; border: 1px solid var(--hilo-fuerte); border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, rgba(40, 34, 28, .35), rgba(14, 12, 10, .94) 62%); transition: border-color .35s, transform .5s var(--curva); } .paq7__puerta:hover, .paq7__puerta:focus-visible { border-color: var(--oro); transform: translateY(-4px); } .paq7__num { position: absolute; left: 50%; top: -17px; z-index: 3; transform: translateX(-50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--noche); border: 1px solid var(--oro); font: 500 14px/1 var(--f-display); color: var(--oro-claro); transition: background-color .3s, color .3s; } .paq7__puerta:first-child .paq7__num, .paq7__puerta:hover .paq7__num, .paq7__puerta:focus-visible .paq7__num { background: radial-gradient(circle at 34% 30%, #fff7e2 0 10%, var(--oro-claro) 36%, var(--oro) 64%, #7d5d1e 100%); color: #1a1208; border-color: var(--oro-claro); } .paq7__foto { position: relative; display: block; aspect-ratio: .74; overflow: hidden; border-radius: 999px 999px 3px 3px; background: var(--noche-3); } .paq7__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); } .paq7__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, 0) 52%, rgba(14, 12, 10, .95)); } .paq7__puerta:hover .paq7__foto img { transform: scale(1.05); } .paq7__txt { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: -1.9em; padding: 0 3px 12px; text-align: center; } .paq7__nombre { font: 460 clamp(15px, 4.9vw, 30px)/1 var(--f-display); color: var(--crema); } .paq7__nombre span { display: block; } .paq7__tag { font: 600 clamp(8px, 2.15vw, 11.5px)/1.25 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--oro-claro); } .paq7__desc { font-size: clamp(10px, 2.6vw, 14.5px); line-height: 1.32; color: var(--crema-2); } .paq7__ir { display: grid; place-items: center; width: 30px; height: 30px; margin-top: auto; border-radius: 50%; border: 1px solid var(--oro); color: var(--oro-claro); transition: background-color .3s, color .3s; } .paq7__ir svg { width: 15px; height: 15px; } .paq7__puerta:hover .paq7__ir { background: var(--oro); color: #16110b; } .paq7__puerta:focus-visible { outline-offset: 4px; } .paq7__datos { list-style: none; width: min(100%, 860px); margin-inline: auto; border-top: 1px solid var(--hilo); } .paq7__datos li { border-bottom: 1px solid var(--hilo); } .paq7__datos a { display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 7px 2px; transition: background-color .25s; } .paq7__datos a:hover { background: rgba(227, 194, 122, .05); } .paq7__ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--oro); color: var(--oro-claro); } .paq7__ico svg { width: 19px; height: 19px; } .paq7__datos b { display: block; font-weight: 500; font-size: clamp(13px, 3.4vw, 16px); line-height: 1.3; color: var(--crema); } .paq7__datos small { display: block; margin-top: 1px; font-size: 12px; color: var(--crema-3); } .paq7__chev { width: 18px; height: 18px; color: var(--oro); } .paq7__sellos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(100%, 860px); margin-inline: auto; } .paq7__sellos li { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 2px 5px; text-align: center; border-left: 1px solid var(--hilo-fuerte); font: 600 clamp(9px, 2.35vw, 12px)/1.3 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--crema-2); } .paq7__sellos li:first-child { border-left: 0; } .paq7__sellos svg { width: 26px; height: 26px; color: var(--oro); } @media (max-width: 760px) { .paq7__datos, .paq7__sellos { width: auto; margin-inline: calc(var(--canal) * -1 + 12px); } .paq7__datos a { gap: 10px; } .paq7__datos b { font-size: clamp(12.5px, 3.3vw, 16px); } } @media (min-width: 761px) { .paq7__puertas { margin-inline: auto; width: min(100%, 1080px); } .paq7__firma { right: 4%; } } /* Escritorio: una lámina de una pantalla; las puertas a la derecha */ @media (min-width: 1100px) { .paq7__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); grid-template-areas: "cab puertas" "datos puertas" "sellos puertas"; align-items: center; align-content: center; column-gap: clamp(40px, 5vw, 96px); row-gap: 24px; } .paq7__cab { grid-area: cab; } .paq7__puertas { grid-area: puertas; width: 100%; } .paq7__datos { grid-area: datos; } .paq7__sellos { grid-area: sellos; } .paq7 h2 { font-size: clamp(2.4rem, min(3.3vw, 7vh), 4.2rem); } .paq7__firma { right: -4%; top: 22px; } .paq7__foto { aspect-ratio: auto; height: clamp(170px, 34vh, 380px); } } @media (min-width: 1100px) and (min-height: 600px) { .paq7 { min-height: 100svh; display: grid; align-items: center; padding-block: calc(var(--cab-h) + 1vh) 3vh; } } /* ═══ Cinta: los servicios desfilan ═══ */ .cinta { position: relative; overflow: hidden; padding-block: clamp(18px, 3.4vh, 36px); background: var(--noche); border-block: 1px solid var(--hilo); } .cinta__pista { --g: clamp(22px, 2.6vw, 48px); display: flex; align-items: center; gap: var(--g); padding-right: var(--g); width: max-content; animation: desfile 52s linear infinite; } .cinta:hover .cinta__pista { animation-play-state: paused; } .cinta span { font: italic 400 clamp(2.4rem, min(6vw, 11vh), 7rem)/1.05 var(--f-display); color: var(--crema); white-space: nowrap; } .cinta .cinta__hueca { color: transparent; -webkit-text-stroke: 1px var(--oro); } .cinta .gema { flex: none; width: 14px; height: 14px; box-shadow: 0 0 0 5px var(--noche), 0 0 18px 3px rgba(227, 194, 122, .35); } /* ═══ 01 · Servicios (antes «La carta de la casa»): la carta con su luna ═══ 24-09: el cliente pidió el mismo fondo negro que el resto del home (antes era una lámina marfil). Los colores de abajo son los de la noche. */ /* El aro de puntos GIRA: su caja cuadrada barre las esquinas fuera de pantalla y eso cuenta como desborde del documento aunque el dibujo sea un círculo. Se recorta aquí (la sección ya ocupa todo el ancho: no se pierde nada). */ .carta6 { overflow: hidden; } .carta6__cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 3.4vw, 80px); align-items: center; } .carta6 h2 { font-size: clamp(2.3rem, min(4vw, 8.4vh), 5rem); } .carta6__txt { display: grid; gap: clamp(10px, 1.8vh, 24px); align-content: center; } .carta6__tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: .6vh; } html:not(.js) .carta6__tabs { display: none; } .carta6__tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 7px 9px; cursor: pointer; border: 1px solid rgba(243, 237, 227, .22); border-radius: 999px; background: transparent; font: 500 14px/1 var(--f-texto); color: var(--crema-2); transition: background-color .25s, border-color .25s, color .25s; } .carta6__tab i { min-width: 1.4em; font: italic 400 16px/1 var(--f-display); color: var(--oro-claro); text-align: center; } .carta6__tab small { padding: 3px 7px; border-radius: 99px; background: rgba(243, 237, 227, .1); font-size: 12px; } .carta6__tab:hover { border-color: var(--oro); color: var(--crema); } .carta6__tab[aria-selected="true"] { background: var(--oro); border-color: var(--oro); color: #16110b; } .carta6__tab[aria-selected="true"] i { color: #4a3510; } .carta6__tab[aria-selected="true"] small { background: rgba(22, 17, 11, .14); } /* Ronda 12: antes el alto se reservaba con un número a mano («6 filas») para que la carta no saltara al cambiar de pestaña. Tras el tarifario la categoría más larga tiene 5 y sobraba un hueco muerto debajo de la lista. Ahora los paneles se apilan en la MISMA celda: el alto es exactamente el de la categoría más larga, sin número mágico y sin salto. */ .js .carta6__paneles { display: grid; } .js .carta6__panel { grid-area: 1 / 1; } .js .carta6__panel:not(.activo) { visibility: hidden; pointer-events: none; animation: none; } .js .carta6__bajada { display: none; } /* con pestañas, la categoría ya se lee arriba */ .carta6__panel { animation: aparecer .5s ease both; } html:not(.js) .carta6__panel + .carta6__panel { margin-top: 34px; } .js .carta6__cat { display: none; } .carta6__cat { font-size: 1.7rem; color: var(--crema); margin-bottom: 6px; } .carta6__cat i { font-style: italic; color: var(--oro-claro); } .carta6__bajada { margin: 0 0 8px; font-size: 15px; color: var(--crema-2); } .carta6__lista { list-style: none; border-top: 1px solid var(--hilo); } .carta6__fila { position: relative; display: flex; align-items: baseline; gap: 10px; padding: clamp(8px, 1.25vh, 15px) 0; border-bottom: 1px solid var(--hilo); transition: padding-left .35s var(--curva); } .carta6__fila::before { content: ""; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--oro); opacity: 0; transform: scale(.3); transition: opacity .3s, transform .3s var(--curva); } .carta6__fila:hover, .carta6__fila:focus-visible, .carta6__fila.activa { padding-left: 22px; } .carta6__fila:hover::before, .carta6__fila:focus-visible::before, .carta6__fila.activa::before { opacity: 1; transform: none; } .carta6__fila:focus-visible { outline-offset: 2px; } .carta6__nombre { font: 460 clamp(1.08rem, min(1.35vw, 2.7vh), 1.5rem)/1.2 var(--f-display); color: var(--crema); } .carta6__nombre small { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--oro); color: #16110b; font: 600 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; vertical-align: 3px; } .carta6__nombre small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #16110b; } .carta6__puntos { flex: 1; min-width: 16px; border-bottom: 1.5px dotted rgba(243, 237, 227, .25); transform: translateY(-5px); } .carta6__dur { flex: none; font: italic 400 17px/1 var(--f-display); color: var(--oro-claro); white-space: nowrap; } .carta6__flecha { flex: none; align-self: center; width: 16px; height: 16px; color: var(--oro-claro); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s var(--curva); } .carta6__fila:hover .carta6__flecha, .carta6__fila:focus-visible .carta6__flecha, .carta6__fila.activa .carta6__flecha { opacity: 1; transform: none; } .carta6__acciones { margin-top: .6vh; } /* Ronda 8: la luna pasa de 438 a ~580 px en 1536×730 (casi el doble de área) */ .carta6__luna { position: relative; justify-self: center; width: min(100%, 42vw, 79vh, 760px); aspect-ratio: 1; margin: 0; } .carta6__halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 75, .2), transparent 62%); animation: latir 8s ease-in-out infinite; } .carta6__disco { position: absolute; inset: 5.5%; overflow: hidden; border-radius: 50%; background: var(--noche-3); box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .8); } .carta6__disco img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease, transform 1.2s var(--curva); } .carta6__disco img.cambiando { opacity: 0; transform: scale(1.06); } .carta6__disco::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(14, 12, 10, 0) 48%, rgba(14, 12, 10, .78)); } .carta6__aro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: girar 80s linear infinite; } .carta6__aro circle { fill: none; stroke: var(--oro); stroke-width: .55; stroke-linecap: round; stroke-dasharray: 0 1.6; } .carta6__gema { position: absolute; left: calc(85.4% - 8px); top: calc(14.6% - 8px); } .carta6__rotulo { position: absolute; left: 12%; right: 12%; bottom: 15%; display: grid; justify-items: center; gap: 8px; text-align: center; color: var(--crema); } .carta6__rotulo em { font: italic 400 clamp(1.5rem, min(2.7vw, 5.2vh), 3.2rem)/1.05 var(--f-display); max-width: 15ch; } .carta6__rotulo span { font: 600 12px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); } @media (min-width: 1100px) and (max-height: 680px) { .carta6 h2 { font-size: clamp(2.1rem, min(3.6vw, 7.6vh), 4rem); } .carta6__fila { padding-block: clamp(6px, 1vh, 15px); } } @media (max-width: 1099px) { .carta6__cuerpo { grid-template-columns: 1fr; } .carta6__luna { order: -1; width: min(72vw, 420px); } } @media (max-width: 620px) { /* Ronda 12: con «Bienestar y relajación» ninguna pareja de pestañas cabía en una fila, así que las cuatro se apilaban y el filtro se comía 190 px de pantalla antes de enseñar un solo servicio. Ahora desfilan en un carril. */ .carta6__tabs { flex-wrap: nowrap; gap: 8px; margin-inline: calc(var(--canal) * -1); padding: 2px var(--canal); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--canal); scrollbar-width: none; -ms-overflow-style: none; } .carta6__tabs::-webkit-scrollbar { display: none; } .carta6__tab { flex: none; scroll-snap-align: start; white-space: nowrap; } .carta6__acciones .btn { flex: 1 1 100%; } .carta6__fila:hover, .carta6__fila.activa { padding-left: 18px; } } /* ═══ 02 · El sauna: lámina roja ═══ */ .estrella6 { overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 48% 70% at 27% 55%, rgba(192, 85, 42, .27), transparent 70%), linear-gradient(180deg, #130d0a, var(--noche)); } .estrella6__fondo { position: absolute; z-index: -1; left: 50%; bottom: 3vh; transform: translateX(-50%); font: 400 min(16.5vw, 34vh)/.8 var(--f-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(214, 110, 60, .24); pointer-events: none; user-select: none; } .estrella6__cuerpo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 4vw, 90px); align-items: center; } /* Ronda 8: la foto del sauna pasa de 378 a ~480 px en 1536×730 */ .estrella6__escena { position: relative; justify-self: center; width: min(100%, 46vw, 79vh, 800px); aspect-ratio: 1; } .estrella6__calor { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(214, 110, 60, .34), transparent 62%); animation: latir 6s ease-in-out infinite; } .estrella6__escena::before, .estrella6__escena::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid rgba(232, 200, 126, .18); } .estrella6__escena::before { inset: 5%; } .estrella6__escena::after { inset: -2%; border-color: rgba(232, 200, 126, .08); } .estrella6__foto { position: absolute; inset: 9%; aspect-ratio: auto; } .estrella6__foto img { object-position: var(--foco, 50% 45%); } .estrella6__ondas i { position: absolute; inset: 9%; border-radius: 50%; border: 1.5px solid rgba(214, 110, 60, .6); animation: onda 5.4s cubic-bezier(.2, .6, .3, 1) infinite; } .estrella6__ondas i:nth-child(2) { animation-delay: 1.8s; } .estrella6__ondas i:nth-child(3) { animation-delay: 3.6s; } .estrella6__sello { position: absolute; right: 6%; bottom: 12%; z-index: 2; display: grid; place-items: center; align-content: center; width: clamp(88px, min(9.4vw, 18vh), 148px); aspect-ratio: 1; border-radius: 50%; background: var(--oro); color: #16110b; box-shadow: 0 0 0 8px #120d0a; font: 600 12px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; } .estrella6__sello b { font: 460 clamp(34px, min(3.6vw, 6.8vh), 56px)/.9 var(--f-display); letter-spacing: 0; } .estrella6__txt { display: grid; gap: clamp(12px, 2.4vh, 24px); } .estrella6__datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; border-block: 1px solid var(--hilo); } .estrella6__datos li { display: grid; gap: 4px; padding: clamp(12px, 2.2vh, 20px) 16px; border-left: 1px solid var(--hilo); } .estrella6__datos li:first-child { border-left: 0; padding-left: 0; } .estrella6__datos b { font: 460 clamp(22px, min(1.9vw, 3.8vh), 30px)/1 var(--f-display); color: var(--crema); } .estrella6__datos span { font-size: 13px; color: var(--crema-3); } .estrella6__datos b.estrella6__precio { color: var(--oro-claro); } @media (max-width: 1099px) { .estrella6__cuerpo { grid-template-columns: 1fr; } .estrella6__escena { width: min(84vw, 460px); } .estrella6__fondo { font-size: 19vw; bottom: auto; top: 3vh; } } /* Ronda 12: apilados en una columna, tres datos de dos palabras se comían 500 px de pantalla. Caben en tres columnas estrechas sin perder nada. */ @media (max-width: 480px) { .estrella6__datos li { padding: 14px 10px; } .estrella6__datos b { font-size: 20px; } .estrella6__datos span { font-size: 12px; line-height: 1.25; } } /* ═══ 03 · Tu visita: el collar de perlas ═══ */ .visita6 .encabezado { margin-bottom: clamp(20px, 5vh, 64px); } .visita6__acciones { justify-content: center; margin-top: clamp(20px, 3vh, 48px); } /* Ronda 8: perlas de 70 a ~105 px. La curva del hilo es algo más baja (1000/150) para que el collar siga entrando en una pantalla. */ .collar { --perla: clamp(76px, 14.4vh, 132px); position: relative; max-width: min(1240px, 170vh); margin: 0 auto clamp(118px, 20vh, 190px); aspect-ratio: 1000 / 150; } .collar__hilo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .collar__hilo path { fill: none; stroke: var(--oro); stroke-width: 1.2; stroke-opacity: .6; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--curva) .2s; } .js .collar.visible .collar__hilo path, html:not(.js) .collar__hilo path { stroke-dashoffset: 0; } .collar__perlas { list-style: none; } .collar__perlas li { position: absolute; left: var(--x); top: var(--y); width: min(300px, 24vw); margin-left: calc(min(300px, 24vw) / -2); margin-top: calc(var(--perla) / -2); display: grid; justify-items: center; gap: 6px; text-align: center; } .collar__perla { display: grid; place-items: center; width: var(--perla); aspect-ratio: 1; margin-bottom: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff7e2 0 10%, var(--oro-claro) 34%, var(--oro) 62%, #7d5d1e 100%); box-shadow: 0 0 0 7px var(--noche-2), 0 18px 40px -12px rgba(0, 0, 0, .8); font: 460 calc(var(--perla) * .42)/1 var(--f-display); color: #1a1208; transition: transform .5s var(--curva); } .collar__perlas li:hover .collar__perla { transform: translateY(-6px) scale(1.06); } .collar__perlas b { font: 460 clamp(21px, min(1.9vw, 3.9vh), 31px)/1.1 var(--f-display); color: var(--crema); } .collar__perlas li > span:last-child { font-size: 14px; color: var(--crema-3); max-width: 24ch; } @media (max-width: 860px) { .collar { aspect-ratio: auto; margin-bottom: 0; max-width: 460px; } .collar__hilo { display: none; } .collar__perlas { position: relative; display: grid; gap: 30px; } .collar__perlas::before { content: ""; position: absolute; left: 33px; top: 20px; bottom: 20px; width: 1px; background: linear-gradient(var(--oro), rgba(201, 162, 75, .2)); } .collar__perlas li { position: relative; left: auto; top: auto; width: auto; margin: 0; grid-template-columns: 68px 1fr; justify-items: start; text-align: left; column-gap: 20px; row-gap: 2px; } .collar__perla { grid-row: 1 / span 2; width: 68px; margin: 0; } .collar__perlas b { align-self: end; } .collar__perlas li > span:last-child { grid-column: 2; } } /* Pantalla baja: el collar recorta el aire bajo las perlas (va después de la regla base) */ @media (min-width: 1100px) and (max-height: 680px) { .collar { margin-bottom: clamp(110px, 18.6vh, 190px); } } /* ═══ 04 · El espacio: panorama ═══ */ .panorama6 { overflow: hidden; } .panorama6__cuerpo { display: grid; grid-template-columns: minmax(0, 3.5fr) minmax(0, 8.5fr); gap: clamp(28px, 3.4vw, 80px); align-items: center; } .panorama6__txt { display: grid; gap: clamp(12px, 2.4vh, 24px); justify-items: start; } .panorama6__cifra { display: flex; align-items: center; gap: 18px; margin: .6vh 0; } .panorama6__cifra b { font: italic 400 clamp(4rem, min(7vw, 14vh), 8.6rem)/.8 var(--f-display); color: var(--oro-claro); } .panorama6__cifra span { max-width: 22ch; font-size: 15px; color: var(--crema-2); } /* Las piezas altas se limitaban solo por el ALTO: en 1920×1080 el arco medía 510 px de ancho, se comía su columna y el círculo del medio quedaba en 147. Ahora las columnas son fijas (minmax(0, …)) y cada pieza también se limita por el ancho de SU columna (--u = una fracción, en px). */ .panorama6__piezas { --pz: calc((min(1600px, 100vw - 2 * var(--canal)) - clamp(28px, 3.4vw, 80px)) * 8.5 / 12); --pg: clamp(20px, 2.2vw, 44px); --u: calc((var(--pz) - 2 * var(--pg)) / 2.95); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .8fr); gap: var(--pg); align-items: center; height: min(80vh, 900px); padding-block: 1.6vh; } .panorama6__piezas .pieza { cursor: zoom-in; } .panorama6__piezas .pieza:hover::before, .panorama6__piezas .pieza:focus-visible::before { border-color: var(--oro); inset: -15px; } .panorama6__piezas .pieza:focus-visible { outline: none; } .panorama6__a { justify-self: end; align-self: start; height: min(74vh, 96%, calc(var(--u) / .64)); aspect-ratio: .64; } .panorama6__b { justify-self: center; align-self: end; width: min(100%, 40vw, 60vh); aspect-ratio: 1; margin-bottom: 1vh; } .panorama6__c { justify-self: start; align-self: center; height: min(64vh, 86%, calc(var(--u) * .8 / .5)); aspect-ratio: .5; } @media (max-width: 1099px) { /* Ronda 12 · de tableta para abajo: la composición de escritorio metida en dos columnas dejaba el arco y el círculo apretados arriba (con los rótulos casi tocándose) y la cápsula sola abajo, el doble de alta que los dos juntos: pesaba todo hacia el pie. Ahora es un ritmo vertical alternado — izquierda, derecha, izquierda— con la pieza del VIDEO como la mayor, que es el único recorrido real del local que tenemos. */ .panorama6__cuerpo { grid-template-columns: 1fr; } .panorama6__piezas { grid-template-columns: 1fr; height: auto; gap: clamp(40px, 7.5vw, 64px); padding: 8px 0 6px; align-items: stretch; } .panorama6__a { justify-self: start; align-self: auto; width: min(76%, 540px); height: auto; aspect-ratio: .8; } .panorama6__b { justify-self: end; align-self: auto; width: min(56%, 390px); margin: 0; } .panorama6__c { grid-column: auto; justify-self: start; align-self: auto; width: min(56%, 380px); height: auto; aspect-ratio: .62; margin-left: 14%; } .pieza.marco.panorama6__a, .pieza.marco.panorama6__b, .pieza.marco.panorama6__c { --marco: 8px; } } /* ═══ 05 · Dudas: el signo hueco con su perla ═══ En la portada esta sección es una LÁMINA: entra en una pantalla y sube como luna. El interrogante deja de ser una marca de agua plana y pasa a ser la pieza: un trazo hueco de oro, sin relleno ni marca de agua. */ .dudas .dudas__cuerpo { align-items: center; } /* Ronda 8 («más visual»): el signo es una VENTANA con una foto del local dentro (background-clip: text), en peso 600 para que el trazo tenga cuerpo. Sin soporte de background-clip queda el contorno hueco de antes. */ .dudas__signo { position: absolute; z-index: -1; right: 0; top: -.32em; font: italic 600 clamp(11rem, min(24vw, 50vh), 27rem)/1 var(--f-display); color: transparent; -webkit-text-stroke: 2px rgba(122, 94, 32, .26); pointer-events: none; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .dudas__signo { background: url("../../img/sala-parejas-amplia-800.webp") 50% 40% / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 1px rgba(122, 94, 32, .45); } } .dudas .faq-pregunta { padding-block: clamp(13px, 2vh, 22px); font-size: clamp(1.3rem, min(1.9vw, 3.9vh), 2.1rem); } /* ═══ 06 · Cómo llegar: la calle en grande y el mapa con su perla ═══ */ .llegar__mapa::after { content: ""; position: absolute; left: 50%; bottom: -18px; z-index: 2; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 6px var(--noche), 0 0 20px 3px rgba(227, 194, 122, .3); } /* ═══ Índice de láminas: una perla por sección (escritorio) ═══ */ .indice-lam { position: fixed; right: clamp(12px, 1.3vw, 26px); top: 50%; z-index: 45; transform: translate(14px, -50%); opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s var(--curva); } .indice-lam.visible { opacity: 1; transform: translate(0, -50%); pointer-events: auto; } .indice-lam ol { list-style: none; display: grid; gap: 12px; } .indice-lam a { position: relative; display: grid; place-items: center; width: 20px; height: 20px; } .indice-lam a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 237, 227, .45); transition: width .3s var(--curva), height .3s var(--curva), background-color .3s; } .indice-lam.sobre-claro a::before { background: rgba(26, 21, 16, .38); } .indice-lam a.activo::before { width: 13px; height: 13px; background: radial-gradient(circle at 35% 30%, #fff6de 0 12%, var(--oro-claro) 38%, #8c6a26 100%); box-shadow: 0 0 0 4px rgba(201, 162, 75, .2); } .indice-lam span { position: absolute; right: 30px; padding: 6px 11px; border-radius: 999px; background: rgba(14, 12, 10, .92); border: 1px solid var(--hilo); font-size: 12.5px; white-space: nowrap; color: var(--crema); opacity: 0; transform: translateX(6px); transition: opacity .25s, transform .25s; pointer-events: none; } .indice-lam a:hover span, .indice-lam a:focus-visible span { opacity: 1; transform: none; } @media (max-width: 1099px), (max-height: 599px) { .indice-lam { display: none; } } /* ─── Carta de servicios en lista (la usan la ficha de servicio y otras páginas) ─── */ /* 01 · La carta de la casa */ .carta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); } .carta { grid-template-rows: auto auto auto; } .carta__cat { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; gap: 12px; } /* los títulos de dos líneas no descuadran las listas */ .carta__tit { display: grid; gap: 14px; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.3rem); color: var(--tinta); } .carta__num { display: flex; align-items: center; gap: 12px; font: italic 400 17px/1 var(--f-display); color: var(--oro-texto); } .carta__num::after { content: ""; flex: 1; height: 1px; background: rgba(122, 94, 32, .35); } .carta__bajada { min-height: 3.2em; margin: 0 0 6px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-2); } .carta__lista { list-style: none; border-top: 1px solid var(--hilo-tinta); } .carta__fila a { display: flex; align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--hilo-tinta); } .carta__nombre { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--tinta); transition: color .2s; } .carta__nombre small { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--tinta); color: var(--oro-claro); font: 600 12px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; vertical-align: 2px; } .carta__nombre small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--oro-claro); } .carta__puntos { flex: 1; min-width: 12px; border-bottom: 1.5px dotted rgba(26, 21, 16, .32); transform: translateY(-4px); } .carta__dur { flex: none; font: italic 400 16.5px/1 var(--f-display); color: var(--oro-texto); white-space: nowrap; } .carta__fila a:hover .carta__nombre { color: var(--oro-texto); } .carta__pie { display: grid; justify-items: center; gap: 22px; margin-top: clamp(44px, 5vw, 72px); color: var(--oro-texto); } @media (max-width: 1100px) { .carta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .carta { grid-template-columns: 1fr; } .carta__bajada { min-height: 0; } .carta__pie .btn { flex: 1 1 100%; } } /* Boletos (promociones): el cupón con muescas y línea de corte */ .boletos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .boleto { /* Ronda 11: la línea de corte iba al 62 % del alto y TACHABA el resumen (un boleto con una raya encima del texto no se lee como boleto, se lee como error). Ahora se mide desde abajo y cae en el aire que ya existe entre el resumen y el pie: el talón queda abajo, como en un boleto real. */ --m: calc(100% - 70px); /* La foto es la cabeza del boleto: una fila más, y el relleno de arriba lo pone ella (por eso el padding-top es 0 y sale a sangre con -26px). */ position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; min-height: 300px; padding: 0 26px 22px; overflow: hidden; background: linear-gradient(160deg, var(--noche-3), var(--noche-2)); border-radius: 6px; -webkit-mask: radial-gradient(circle 15px at 0 var(--m), #0000 14px, #000 15px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 15px at 100% var(--m), #0000 14px, #000 15px) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 15px at 0 var(--m), #0000 14px, #000 15px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 15px at 100% var(--m), #0000 14px, #000 15px) 100% 0 / 51% 100% no-repeat; transition: transform .4s var(--curva); } .boleto::before { content: ""; position: absolute; left: 22px; right: 22px; top: var(--m); border-top: 1.5px dashed var(--hilo-fuerte); } .boleto:hover { transform: translateY(-6px) rotate(-.6deg); } /* La foto se funde con la tarjeta: sin corte, y la etiqueta se apoya en ese degradado. Si una promoción no tiene foto, el boleto sigue siendo el de antes (la fila simplemente no existe) y el relleno de arriba lo repone la etiqueta. */ .boleto__foto { position: relative; display: block; height: 176px; margin: 0 -26px 0; overflow: hidden; } .boleto__foto img, .boleto__foto picture > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--curva); } .boleto__foto::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(180deg, transparent, var(--noche-2)); } .boleto:hover .boleto__foto img { transform: scale(1.04); } .boleto:not(:has(.boleto__foto)) { padding-top: 28px; } .boleto__tipo { position: relative; z-index: 2; justify-self: start; margin-top: -16px; padding: 5px 10px; border-radius: 999px; background: var(--oro); color: #16110b; font: 600 12px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; } .boleto:not(:has(.boleto__foto)) .boleto__tipo { margin-top: 0; } .boleto__tit { font: 460 clamp(1.5rem, 1.2rem + .8vw, 2rem)/1.05 var(--f-display); color: var(--crema); } .boleto__txt { font-size: 14.5px; color: var(--crema-2); } .boleto__pie { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; font-size: 13px; font-weight: 600; color: var(--oro-claro); } /* margin-inline: auto — en tableta la columna de 520 px quedaba pegada a la izquierda con un hueco a la derecha */ @media (max-width: 900px) { .boletos { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } } /* Solo dos boletos (p. ej. «Otras novedades» de una promoción): a dos columnas, sin un tercio vacío */ @media (min-width: 901px) { .boletos:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 05 · Dudas */ .dudas__cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .dudas__lado { position: sticky; top: calc(var(--cab-h) + 40px); display: grid; gap: 22px; isolation: isolate; } /* .dudas__signo: su regla vive en la lámina 05 (arriba). Aquí había una versión vieja que, por ir después, le pisaba el tamaño, el peso y el color. */ @media (max-width: 900px) { .dudas__cuerpo { grid-template-columns: 1fr; } .dudas__lado { position: relative; top: 0; } } /* 06 · Cómo llegar: horario en barras */ .llegar__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: center; } .llegar__txt { display: grid; gap: 24px; } .llegar__dir { display: grid; gap: 4px; font-style: normal; } /* La calle es la pieza: grande, con el número en cursiva dorada (como los ) */ .llegar__dir b { font: 460 clamp(1.8rem, min(2.9vw, 5.4vh), 3.2rem)/1.04 var(--f-display); letter-spacing: -.012em; color: var(--crema); } .llegar__dir b em { color: var(--oro-claro); } .llegar__dir span { color: var(--crema-2); } .llegar__mapa { position: relative; min-height: 520px; height: 100%; } .llegar__mapa::before { content: ""; position: absolute; inset: -12px; border: 1px solid var(--hilo-fuerte); border-radius: 34px; pointer-events: none; } .llegar__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 24px; background: var(--noche-3); } @media (max-width: 900px) { .llegar__cuerpo { grid-template-columns: 1fr; } .llegar__mapa { min-height: 360px; } } /* Lámina 06 en pantallas bajas: la columna de texto se compacta para que la sección siga entrando en UNA pantalla (va después de las reglas base: si no, el orden del archivo las pisa aunque estén dentro de una media query). */ @media (min-width: 1100px) and (min-height: 600px) { .llegar h2 { font-size: clamp(2.1rem, min(3.6vw, 6.6vh), 4.2rem); } .llegar__txt { gap: clamp(12px, 2.3vh, 24px); } .llegar__dir b { font-size: clamp(1.6rem, min(2.9vw, 4.9vh), 3.2rem); } .llegar__mapa { min-height: min(520px, 64vh); } .llegar .hb-dia { min-height: min(36px, 4.2vh); } .llegar .hb-escala { min-height: min(22px, 2.8vh); } .llegar .horario-barras { margin-block: 0; } } .horario-barras { list-style: none; display: grid; gap: 2px; margin: 4px 0; } .hb-dia, .hb-escala { display: grid; grid-template-columns: 104px minmax(0, 1fr) 150px; align-items: center; gap: 16px; min-height: 36px; } .hb-nombre { font-size: 14.5px; color: var(--crema-2); } .hb-nombre small { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--oro); color: #16110b; font: 600 12px/1 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } .hb-pista { position: relative; height: 8px; border-radius: 99px; background: var(--noche-3); } .hb-tramo { position: absolute; top: 0; bottom: 0; left: var(--i); width: var(--w); border-radius: 99px; background: linear-gradient(90deg, var(--oro-hondo), var(--oro-claro)); } .hb-dia.hoy .hb-nombre { color: var(--crema); font-weight: 600; } .hb-dia:not(.hoy) .hb-tramo { opacity: .55; } .hb-ahora { position: absolute; left: var(--x); top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--vivo); box-shadow: 0 0 0 3px rgba(124, 207, 149, .2); } .hb-horas { font-size: 13.5px; color: var(--crema-3); text-align: right; font-variant-numeric: tabular-nums; } .hb-dia.hoy .hb-horas { color: var(--crema); } .hb-escala { min-height: 22px; } .hb-escala .hb-pista { background: none; height: 14px; } .hb-escala b { position: absolute; left: var(--x); transform: translateX(-50%); font: 600 12px/1 var(--f-texto); color: var(--crema-3); } /* Ronda 12 · celular: el día quedaba centrado sobre dos filas, la barra de 8 px colgando a su lado y la hora debajo, huérfana. Se leía como un error de maquetación. Ahora cada día es una línea de ficha —nombre a la izquierda, horario a la derecha— y la barra va DEBAJO, a todo el ancho, que es donde se entiende: cuánto del día está abierto. */ @media (max-width: 620px) { .hb-dia { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 7px 12px; min-height: 0; padding-block: 9px; border-bottom: 1px solid var(--hilo); } .hb-dia:last-of-type { border-bottom: 0; } .hb-nombre { grid-column: 1; grid-row: 1; } .hb-horas { grid-column: 2; grid-row: 1; text-align: right; font-size: 12.5px; } .hb-pista { grid-column: 1 / -1; grid-row: 2; } .horario-barras { gap: 0; } .hb-escala { grid-template-columns: 1fr; gap: 0; min-height: 20px; padding-top: 4px; } .hb-escala > span:not(.hb-pista) { display: none; } .hb-escala .hb-pista { grid-column: 1; grid-row: 1; } } /* ══════════════════════ 17. CABECERAS DE PÁGINA (modelos) ══════════════════════ luna · cápsula · arco · espejo · círculo · tipo. Cada página usa uno distinto. */ .cab { position: relative; overflow: hidden; padding-top: calc(var(--cab-h) + clamp(28px, 6vh, 76px)); padding-bottom: clamp(56px, 8vw, 112px); background: radial-gradient(ellipse 60% 70% at 78% 40%, rgba(227, 194, 122, .07), transparent 70%), var(--noche); } .cab__cuerpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 90px); align-items: center; } .cab__txt { display: grid; gap: 22px; align-content: center; animation: aparecer .9s ease both; } .cab__txt > .migas { margin-bottom: 4px; } .cab h1 { font-size: var(--t-h1); line-height: .96; animation: subir 1s var(--curva) both .05s; } /* 24-09: los textos del cliente llevan una frase en negrita bajo el titular y varios párrafos (con sus negritas) en vez de una sola entrada */ .cab__lema { margin: -4px 0 0; max-width: 34ch; font: 460 clamp(1.25rem, 1.05rem + .8vw, 1.7rem)/1.25 var(--f-display); color: var(--oro-claro); } .cab__intro { display: grid; gap: .75em; max-width: 58ch; font-size: clamp(15.5px, .9rem + .3vw, 18px); line-height: 1.62; color: var(--crema-2); } .cab__intro p { margin: 0; } .cab__intro strong { color: var(--crema); font-weight: 600; } .cab-media { position: relative; width: 100%; justify-self: center; animation: aparecer 1.2s ease both .2s; } .cab-media img { object-position: var(--pos, var(--foco, 50% 50%)); } .cab-gema { position: absolute; z-index: 2; } .cab--tipo .cab__cuerpo { grid-template-columns: 1fr; } .cab--tipo .cab__txt { max-width: 920px; } .cab--luna { padding-bottom: 0; } .cab--luna .cab__txt { padding-bottom: clamp(56px, 8vw, 112px); } .cab--luna .cab-media { align-self: end; width: min(100%, 640px); aspect-ratio: 1; --r: 50%; margin-bottom: max(-30%, -200px); justify-self: end; } /* una luna entera que asoma desde el borde */ .cab--luna .cab-gema { left: 50%; top: calc(var(--marco) * -1 - 8px); margin-left: -8px; } .cab--tipo { --aro: min(500px, 40vw); } .cab--tipo::before { content: ""; position: absolute; right: 5vw; top: calc(var(--cab-h) + 34px); width: var(--aro); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--hilo-fuerte); background: radial-gradient(circle at 40% 40%, rgba(227, 194, 122, .06), transparent 60%); pointer-events: none; } .cab--tipo::after { content: ""; position: absolute; right: calc(5vw + var(--aro) * .146 - 8px); top: calc(var(--cab-h) + 34px + var(--aro) * .146 - 8px); width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6de 0 12%, var(--oro-claro) 38%, #8c6a26 100%); box-shadow: 0 0 0 5px var(--noche); } @media (max-width: 900px) { .cab--tipo::before, .cab--tipo::after { opacity: .5; } } @media (max-width: 600px) { .cab--tipo::before, .cab--tipo::after { display: none; } } .cab--capsula .cab-media { width: min(100%, 400px); aspect-ratio: .58; } .cab--capsula .cab-gema { right: calc(var(--marco) * -1 - 8px); top: 50%; margin-top: -8px; } .cab--arco .cab-media { width: min(100%, 470px); aspect-ratio: .72; } .cab--arco .cab-gema { left: 50%; top: calc(var(--marco) * -1 - 8px); margin-left: -8px; } .cab--espejo .cab-media { width: min(100%, 460px); aspect-ratio: .8; } .cab--espejo .cab-gema { right: 12%; top: 3%; } .cab--circulo .cab-media { width: min(100%, 500px); } .cab--circulo .cab-gema { left: calc(14.6% - 8px); top: calc(14.6% - 8px); } @media (max-width: 900px) { .cab__cuerpo { grid-template-columns: 1fr; } .cab-media { width: min(78vw, 420px); } .cab--luna .cab-media { width: 100%; } .cab--luna .cab__txt { padding-bottom: 20px; } .cab--capsula .cab-media { width: min(62vw, 320px); } } /* Chips: datos cortos (duración, sala privada…) */ .chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; } .chip { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--hilo-fuerte); border-radius: 999px; font-size: 14px; color: var(--crema-2); background: rgba(14, 12, 10, .4); transition: border-color .2s, color .2s; } .chip svg { width: 16px; height: 16px; color: var(--oro); } .chip sup { font: italic 400 13px/1 var(--f-display); color: var(--oro-claro); } a.chip:hover { border-color: var(--oro); color: var(--crema); } .s-marfil .chip { background: transparent; border-color: rgba(122, 94, 32, .35); color: var(--tinta-2); } .s-marfil .chip svg { color: var(--oro-texto); } /* ═══════════════════════ 18. SERVICIOS: capítulos de la carta ═══════════════════════ */ .capitulo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .capitulo__lado { position: sticky; top: calc(var(--cab-h) + 32px); display: grid; gap: 16px; justify-items: start; } .capitulo__num { font: italic 400 clamp(4.5rem, 8vw, 8rem)/.8 var(--f-display); color: var(--oro-claro); } .s-marfil .capitulo__num { color: var(--oro-texto); } .capitulo__lado h2 { font-size: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); } .capitulo__foto { width: min(100%, 290px); margin-top: 18px; } .sfilas { list-style: none; border-top: 1px solid var(--hilo); } .sfila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 40px; align-items: center; padding: 28px 0; border-bottom: 1px solid var(--hilo); } .sfila__nombre { font: 460 clamp(1.6rem, 1.2rem + 1.1vw, 2.3rem)/1.05 var(--f-display); color: var(--crema); } .sfila__nombre a:hover { color: var(--oro-claro); } .sfila__nombre .etiqueta { margin-left: 10px; vertical-align: 6px; } .sfila__txt { margin: 0; max-width: 60ch; font-size: 15.5px; color: var(--crema-2); } .sfila__lado { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; gap: 14px; } .sfila__dur { font: italic 400 21px/1 var(--f-display); color: var(--oro-claro); white-space: nowrap; } .sfila__acc { display: flex; align-items: center; gap: 14px; } .s-marfil .sfilas, .s-marfil .sfila { border-color: var(--hilo-tinta); } .s-marfil .sfila__nombre { color: var(--tinta); } .s-marfil .sfila__nombre a:hover { color: var(--oro-texto); } .s-marfil .sfila__txt { color: var(--tinta-2); } .s-marfil .sfila__dur { color: var(--oro-texto); } .s-marfil .etiqueta { background: var(--tinta); color: var(--oro-claro); border-color: var(--tinta); } @media (max-width: 900px) { .capitulo { grid-template-columns: 1fr; gap: 28px; } .capitulo__lado { position: relative; top: 0; grid-template-columns: auto 1fr; align-items: end; column-gap: 18px; } .capitulo__lado > * { grid-column: 1 / -1; } .capitulo__lado .rotulo { grid-row: 1; } .capitulo__lado .capitulo__num { grid-row: 2; grid-column: 1; } .capitulo__lado h2 { grid-row: 2; grid-column: 2; padding-bottom: .1em; } .capitulo__foto { display: none; } } @media (max-width: 640px) { .sfila { grid-template-columns: 1fr; } .sfila__lado { grid-column: 1; grid-row: auto; justify-items: start; grid-template-columns: auto 1fr; align-items: center; } } /* Arcos vacíos: acceso a las experiencias sin repetir fotos */ .arcos-vacios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); max-width: 980px; margin-inline: auto; } .arco-vacio { position: relative; display: grid; place-items: center; align-content: center; gap: 12px; aspect-ratio: .78; padding: 24px; text-align: center; border: 1px solid var(--hilo-fuerte); border-radius: 999px 999px 3px 3px; transition: border-color .3s, background-color .3s, transform .5s var(--curva); } .arco-vacio::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--hilo); border-radius: inherit; } .arco-vacio > svg { width: 38px; height: 38px; color: var(--oro); } .arco-vacio b { font: 460 clamp(1.4rem, 1.1rem + 1vw, 2rem)/1 var(--f-display); color: var(--crema); } .arco-vacio span { font-size: 13.5px; color: var(--crema-3); max-width: 22ch; } .arco-vacio:hover { border-color: var(--oro); background: rgba(201, 162, 75, .05); transform: translateY(-6px); } @media (max-width: 640px) { .arcos-vacios { grid-template-columns: 1fr; max-width: 340px; } .arco-vacio { aspect-ratio: 1.3; border-radius: 999px 999px 3px 3px; } } /* Lado a lado, la bajada de 2 líneas (Caballeros) y la de 3 (Damas, Parejas) desalineaban iconos, nombres y enlaces entre los tres arcos: todas reservan el alto de tres líneas. */ @media (min-width: 641px) { .arco-vacio span { min-height: 3lh; } } /* ═══════════════════════ 19. FICHA DE SERVICIO ═══════════════════════ */ .ficha { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 6vw, 100px); align-items: start; } .ficha__cuerpo { display: grid; gap: clamp(60px, 7vw, 100px); } .bloque { display: grid; gap: 22px; } .bloque h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3.1rem); } .bloque .prosa { font-size: 17.5px; } .beneficios { list-style: none; border-top: 1px solid var(--hilo); } .beneficios li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hilo); font: 400 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.3 var(--f-display); color: var(--crema); } .beneficios .gema { width: 14px; height: 14px; justify-self: center; } /* El collar vertical: pasos numerados sobre un hilo */ .collar-v { list-style: none; position: relative; display: grid; gap: 22px; counter-reset: paso; } .collar-v::before { content: ""; position: absolute; left: 23px; top: 18px; bottom: 18px; width: 1px; background: linear-gradient(var(--oro), rgba(201, 162, 75, .15)); } .collar-v li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 20px; align-items: center; counter-increment: paso; color: var(--crema-2); } .collar-v li::before { content: counter(paso); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff7e2 0 10%, var(--oro-claro) 34%, var(--oro) 62%, #7d5d1e 100%); box-shadow: 0 0 0 6px var(--noche); font: 460 20px/1 var(--f-display); color: #1a1208; } .s-noche-2 .collar-v li::before { box-shadow: 0 0 0 6px var(--noche-2); } /* 24-09: pasos con título (ficha de Limpieza, Exfoliación e Hidratación Corporal) */ .collar-v--pasos li { align-items: start; font-size: 17px; } .collar-v--pasos li b { display: block; margin: 4px 0 4px; font: 460 clamp(1.25rem, 1.1rem + .5vw, 1.55rem)/1.15 var(--f-display); color: var(--crema); } .collar-v--pasos li strong { color: var(--crema); font-weight: 600; } .s-marfil .collar-v li { color: var(--tinta-2); } .s-marfil .collar-v li::before { box-shadow: 0 0 0 6px var(--marfil); } /* Boleto de reserva (columna fija). Dos mitades: las muescas y la línea de corte caen siempre en la unión, sin importar cuánto texto tenga cada mitad. */ .boleto-reserva { position: sticky; top: calc(var(--cab-h) + 28px); display: grid; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); } .boleto-reserva__a, .boleto-reserva__b { position: relative; display: grid; gap: 16px; background: var(--noche-3); } .boleto-reserva__a { padding: 30px 28px 24px; border-radius: 8px 8px 0 0; -webkit-mask: radial-gradient(circle 16px at 0 100%, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 100%, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 16px at 0 100%, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 100%, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; } .boleto-reserva__b { padding: 26px 28px 28px; border-radius: 0 0 8px 8px; background: var(--noche-2); -webkit-mask: radial-gradient(circle 16px at 0 0, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 0, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 16px at 0 0, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 0, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; } .boleto-reserva__b::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; border-top: 1.5px dashed var(--hilo-fuerte); } .boleto-reserva h2 { font-size: 1.9rem; } .boleto-reserva dl { display: grid; gap: 10px; margin: 0; } .boleto-reserva dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; } .boleto-reserva dt { display: flex; align-items: center; gap: 8px; color: var(--crema-3); } .boleto-reserva dt svg { width: 16px; height: 16px; color: var(--oro); } .boleto-reserva dd { margin: 0; color: var(--crema); font-weight: 600; text-align: right; } .boleto-reserva .btn { width: 100%; } @media (max-width: 1000px) { .ficha { grid-template-columns: 1fr; } .boleto-reserva { position: relative; top: 0; max-width: 460px; } } /* Tira de formas (galería corta de una ficha) */ .tira-formas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); align-items: center; padding: 12px; } .tira-formas .pieza { cursor: zoom-in; } .tira-formas .pieza:nth-child(3n+1) { --r: 999px 999px 3px 3px; aspect-ratio: .7; } .tira-formas .pieza:nth-child(3n+2) { --r: 50%; aspect-ratio: 1; } .tira-formas .pieza:nth-child(3n) { --r: 999px; aspect-ratio: .55; } /* Carta sobre fondo noche (relacionados) */ .carta--noche .carta__lista { border-color: var(--hilo); } .carta--noche .carta__fila a { border-color: var(--hilo); } .carta--noche .carta__nombre { color: var(--crema); } .carta--noche .carta__puntos { border-color: rgba(243, 237, 227, .25); } .carta--noche .carta__dur { color: var(--oro-claro); } .carta--noche .carta__fila a:hover .carta__nombre { color: var(--oro-claro); } .carta--noche .carta__nombre small { background: var(--oro); color: var(--noche); } .carta--noche .carta__nombre small::before { background: var(--noche); } /* ═══════════════════════ 20. EXPERIENCIAS: el tríptico ═══════════════════════ */ .triptico { display: flex; gap: 8px; height: min(78vh, 760px); min-height: 540px; } .tri { position: relative; flex: 1 1 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; border-radius: 3px; transition: flex-grow .9s var(--curva); } .tri img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform 1.4s var(--curva); } .tri::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 10, .2), rgba(14, 12, 10, .72)); transition: background-color .5s; } .triptico:hover .tri { flex-grow: .75; } .triptico .tri:hover, .triptico .tri:focus-visible { flex-grow: 1.7; } .tri:hover img { transform: scale(1); } .tri__medallon { display: grid; place-items: center; align-content: center; gap: 10px; width: min(84%, 310px); aspect-ratio: 1; padding: 26px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); background: rgba(14, 12, 10, .62); text-align: center; box-shadow: inset 0 0 0 10px rgba(14, 12, 10, .25); transition: border-color .4s, background-color .4s; } .tri:hover .tri__medallon, .tri:focus-visible .tri__medallon { border-color: var(--oro); background: rgba(14, 12, 10, .78); } .tri:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: -6px; } .tri__num { font: italic 400 18px/1 var(--f-display); color: var(--oro-claro); } .tri__nombre { font: 460 clamp(1.9rem, 1.3rem + 1.6vw, 2.9rem)/.95 var(--f-display); color: var(--crema); } .tri__bajada { font-size: 14px; line-height: 1.45; color: var(--crema-2); max-width: 22ch; } .tri .enlace-flecha { font-size: 13px; } @media (max-width: 860px) { .triptico { flex-direction: column; height: auto; min-height: 0; } .tri { min-height: 360px; flex: none; } .triptico:hover .tri, .triptico .tri:hover { flex-grow: 0; } } /* ═══════════════════════ 21. EXPERIENCIA: la escalera de paquetes ═══════════════════════ */ .escalera { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: end; } .peldano { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 34px 28px 28px; background: var(--noche-2); border: 1px solid var(--hilo); border-top: 2px solid var(--oro-hondo); border-radius: 3px; } .peldano:nth-child(1) { min-height: 470px; } .peldano:nth-child(2) { min-height: 540px; } .peldano:nth-child(3) { min-height: 610px; } .peldano.destacado { background: linear-gradient(180deg, #221b14, var(--noche-2)); border-color: var(--hilo-fuerte); border-top-color: var(--oro-claro); } .peldano__cinta { position: absolute; top: -14px; left: 28px; padding: 6px 12px; border-radius: 999px; background: var(--oro); color: #16110b; font: 600 12px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; } .peldano__perlas { display: flex; gap: 8px; } .peldano__perlas .gema { width: 13px; height: 13px; box-shadow: 0 0 0 3px var(--noche-2); } .peldano__num { font: italic 400 15px/1 var(--f-display); color: var(--crema-3); } .peldano__precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: -6px 0 0 !important; } .peldano__precio b { font: 460 2.1rem/1 var(--f-display); color: var(--oro-claro); } .peldano__precio span { font-size: 13.5px; color: var(--crema-3); } .peldano__cortesia { display: flex; align-items: center; gap: 8px; margin: -4px 0 0 !important; font-size: 13.5px !important; color: var(--oro-claro) !important; } .peldano__cortesia svg { width: 15px; height: 15px; flex: 0 0 auto; } .sfila__precio { margin-left: 10px; color: var(--oro-claro); font-weight: 600; } .carta6__dur b { color: var(--oro-claro); font-weight: 600; } /* En las secciones claras el dorado de texto es otro (5.4:1 sobre marfil) */ .s-marfil .sfila__precio, .s-marfil .carta6__dur b, .s-marfil .chip--precio { color: var(--oro-texto); } .chip--precio { color: var(--oro-claro); border-color: var(--oro-hondo); font-weight: 600; } .boleto-reserva__precio { color: var(--oro-claro) !important; font-weight: 600; } .peldano h3 { font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem); } .peldano p { margin: 0; font-size: 15px; color: var(--crema-2); } .peldano ul { list-style: none; display: grid; gap: 9px; align-content: start; padding: 16px 0 6px; border-top: 1px solid var(--hilo); } .peldano li { display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--crema); } .peldano li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); transform: translateY(-2px); } /* 24-09: dos botones al pie de cada paquete (Reservar cita | WhatsApp) y la frase del cliente debajo */ .peldano__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: auto; } .peldano__acciones .btn { min-height: 50px; padding: 0 10px; gap: 8px; border-radius: 4px; font-size: 14.5px; } .peldano__acciones .btn-linea { border-color: rgba(243, 237, 227, .5); } .peldano .peldano__frase { margin-top: -2px; text-align: center; font: italic 400 15px/1.35 var(--f-display); color: var(--crema-3); } .elige__texto { display: grid; gap: .7em; max-width: 64ch; color: var(--crema-2); font-size: clamp(16px, .95rem + .2vw, 18px); } .elige__texto p { margin: 0; } .elige__texto strong { color: var(--crema); font-weight: 600; } @media (max-width: 900px) { .escalera { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; gap: 34px; } .peldano:nth-child(n) { min-height: 0; } } .otras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .otra { display: grid; grid-template-columns: 150px 1fr; gap: 26px; align-items: center; padding: 18px; border: 1px solid var(--hilo); border-radius: 3px; transition: border-color .3s; } .otra .pieza { aspect-ratio: .72; } .otra b { display: block; font: 460 1.7rem/1.05 var(--f-display); color: var(--crema); margin-bottom: 6px; } .otra__txt { display: block; margin: 0 0 12px; font-size: 14.5px; color: var(--crema-2); } .otra:hover { border-color: var(--oro); } @media (max-width: 760px) { .otras { grid-template-columns: 1fr; } .otra { grid-template-columns: 110px 1fr; } } /* Modelo de cabecera «hoja» (convenios, promociones) */ .cab--hoja .cab-media { width: min(100%, 470px); aspect-ratio: .86; } .cab--hoja .cab-gema { right: calc(var(--marco) * -1 - 8px); top: calc(var(--marco) * -1 - 8px); } /* ═══════════════════════ 22. AMBIENTES: el recorrido ═══════════════════════ Un hilo dorado baja por el centro; cada parada es un ambiente con su forma. */ .recorrido { position: relative; display: grid; gap: clamp(90px, 11vw, 170px); padding-block: 20px; } .recorrido::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(transparent, var(--hilo-fuerte) 6%, var(--hilo-fuerte) 94%, transparent); } .parada { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(60px, 9vw, 150px); align-items: center; } .parada__media { justify-self: center; width: min(100%, 440px); cursor: zoom-in; } .parada:nth-child(even) .parada__media { order: 2; } .parada__media.arco { aspect-ratio: .72; } .parada__media.circulo { width: min(100%, 460px); } .parada__media.capsula { aspect-ratio: .52; width: min(100%, 340px); } .parada__media.hoja { aspect-ratio: .9; } .parada__media.espejo { aspect-ratio: .78; } .parada__media:hover::before { border-color: var(--oro); inset: -15px; } .parada__num { position: absolute; left: 50%; top: 50%; z-index: 2; display: grid; place-items: center; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff7e2 0 10%, var(--oro-claro) 34%, var(--oro) 62%, #7d5d1e 100%); box-shadow: 0 0 0 8px var(--noche); font: 460 22px/1 var(--f-display); color: #1a1208; } .parada__txt { display: grid; gap: 18px; justify-items: start; max-width: 460px; } .parada:nth-child(odd) .parada__txt { justify-self: start; } .parada:nth-child(even) .parada__txt { justify-self: end; } .parada__txt h2 { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.6rem); } .parada__txt p { margin: 0; color: var(--crema-2); font-size: 17px; } .parada__txt strong { color: var(--crema); font-weight: 600; } .parada__txt .parada__lema { margin-top: -6px; font: 600 clamp(16px, .95rem + .3vw, 19px)/1.35 var(--f-texto); color: var(--oro-claro); } /* 24-09: los detalles del local, antes del recorrido */ .detalles { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); } .detalles li { display: grid; gap: 16px; align-content: start; padding-top: 22px; border-top: 1px solid var(--hilo-fuerte); } .detalles .ico { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--oro); color: var(--oro-claro); } .detalles .ico svg { width: 23px; height: 23px; } .detalles p { margin: 0; color: var(--crema-2); font-size: 16.5px; } .detalles strong { color: var(--crema); font-weight: 600; } .detalles__cierre { display: grid; justify-items: center; gap: 14px; max-width: 900px; margin: clamp(44px, 6vw, 80px) auto 0; text-align: center; } .detalles__cierre p { margin: 0; } .detalles__cierre p:first-child { font: 460 clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem)/1.3 var(--f-display); color: var(--crema); } .detalles__cierre p:first-child strong { font-weight: inherit; } .detalles__remate { font: italic 400 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.35 var(--f-display); color: var(--oro-claro); } @media (max-width: 860px) { .detalles { grid-template-columns: 1fr; } } @media (max-width: 860px) { .recorrido { gap: 70px; padding-left: 66px; } .recorrido::before { left: 33px; } .parada { grid-template-columns: 1fr; gap: 28px; } .parada:nth-child(even) .parada__media { order: 0; } .parada__media { justify-self: start; width: min(100%, 360px); } .parada__num { left: -33px; top: 0; margin: 0 0 0 -25px; width: 50px; height: 50px; font-size: 19px; } .parada:nth-child(n) .parada__txt { justify-self: start; } .pieza.parada__media { --marco: 7px; } } /* ═══════════════════════ 23. NOSOTROS: el manifiesto ═══════════════════════ El texto grande con fotos del local incrustadas entre las palabras. */ .manifiesto { margin: 0; max-width: 1180px; font: 400 clamp(2.1rem, 1.1rem + 3.9vw, 5.1rem)/1.14 var(--f-display); letter-spacing: -.015em; color: var(--crema); text-wrap: pretty; } .manifiesto em { font-style: italic; color: var(--oro-claro); } .m-foto { position: relative; display: inline-block; height: .8em; vertical-align: -.06em; margin-inline: .08em; overflow: hidden; background: var(--noche-3); box-shadow: 0 0 0 1px var(--hilo-fuerte); } .m-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .m-pildora { width: 1.9em; border-radius: 999px; } .m-circulo { width: .8em; border-radius: 50%; } .m-arco { width: .64em; border-radius: 999px 999px 2px 2px; } .reglas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 6vw, 100px); } .regla { display: grid; grid-template-columns: auto 1fr; gap: 6px 28px; padding: 34px 0; border-top: 1px solid var(--hilo-tinta); } .regla__num { grid-row: 1 / span 2; font: italic 400 clamp(3.4rem, 5vw, 5rem)/.85 var(--f-display); color: var(--oro-texto); } .regla h3 { color: var(--tinta); font-size: clamp(1.6rem, 1.3rem + .8vw, 2.1rem); } .regla p { margin: 0; color: var(--tinta-2); } .promesas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .promesa { padding: clamp(28px, 3vw, 44px); border: 1px solid var(--hilo); border-radius: 3px; display: grid; gap: 18px; align-content: start; } .promesa h3 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem); } .promesa ul { list-style: none; display: grid; gap: 14px; } .promesa li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--crema-2); } .promesa li::before { content: ""; width: 11px; height: 11px; margin-top: .45em; border-radius: 50%; background: var(--oro); } .promesa--no li::before { background: none; border: 1px solid var(--crema-3); } .promesa--no { background: var(--noche-2); } @media (max-width: 800px) { .reglas, .promesas { grid-template-columns: 1fr; } } /* 24-09 · Nosotros: las cuatro secciones del cliente (texto + foto con forma, alternando lados) */ .relato { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 7vw, 120px); align-items: center; } .relato--inv .relato__foto { order: -1; } .relato__txt { display: grid; gap: 22px; } .relato__txt h2 { font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.8rem); } .relato__txt h2 em { display: block; } .relato__txt .prosa { font-size: clamp(16px, .95rem + .2vw, 18px); } .relato__remate { margin: 6px 0 0; padding-left: 20px; border-left: 2px solid var(--oro); font: 460 clamp(1.35rem, 1.1rem + .9vw, 2rem)/1.2 var(--f-display); color: var(--crema); } .relato__remate em { font-style: italic; font-weight: 400; color: var(--oro-claro); } .relato__foto { justify-self: center; width: min(100%, 420px); } .relato__foto.arco { aspect-ratio: .72; } .relato__foto.capsula { aspect-ratio: .55; width: min(100%, 340px); } @media (max-width: 900px) { .relato { grid-template-columns: 1fr; } .relato--inv .relato__foto { order: 0; } .relato__foto { width: min(76vw, 360px); } .relato__foto.capsula { width: min(56vw, 280px); } } /* ═══════════════════════ 24. GIFT CARDS: el abanico ═══════════════════════ */ .abanico { position: relative; height: clamp(360px, 36vw, 470px); display: grid; place-items: center; margin-block: 20px 10px; } .gcard { position: absolute; width: min(78vw, 420px); aspect-ratio: 1.586; padding: 24px 26px; border-radius: 18px; overflow: hidden; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; color: var(--crema); background: radial-gradient(circle at 85% 110%, rgba(227, 194, 122, .22), transparent 45%), linear-gradient(140deg, #231b14 0%, #0d0b09 55%, #1f1812 100%); border: 1px solid rgba(227, 194, 122, .4); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9); transition: transform .7s var(--curva), box-shadow .5s; } .gcard::before { content: ""; position: absolute; z-index: -1; right: -18%; bottom: -44%; width: 72%; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(227, 194, 122, .3); } .gcard::after { content: ""; position: absolute; z-index: -1; right: calc(-18% + 72% * .5 - 6px); bottom: calc(-44% + 72% * 1 - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--oro-claro); } .gcard__marca { display: flex; align-items: center; gap: 12px; font: 600 12px/1.2 var(--f-texto); letter-spacing: .22em; text-transform: uppercase; color: var(--oro-claro); } .gcard__marca img { width: 44px; height: 44px; } .gcard__valor { align-self: center; font: 460 clamp(3rem, 2.2rem + 2.6vw, 4.4rem)/1 var(--f-display); color: var(--crema); } .gcard__valor small { font-size: .42em; color: var(--oro-claro); margin-right: .15em; vertical-align: .9em; } .gcard__pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12.5px; color: var(--crema-2); } .gcard__pie b { display: inline-flex; align-items: center; gap: 7px; color: var(--oro-claro); font-weight: 600; } .gcard__pie svg { width: 16px; height: 16px; } .gcard:nth-child(1) { transform: translate(-46%, 8%) rotate(-11deg); } .gcard:nth-child(2) { transform: translateY(-5%); z-index: 2; } .gcard:nth-child(3) { transform: translate(46%, 8%) rotate(11deg); } /* La de la derecha queda medio tapada: su contenido va al borde visible */ @media (min-width: 861px) { .gcard:nth-child(3) .gcard__valor { justify-self: end; } .gcard:nth-child(3) .gcard__marca { flex-direction: row-reverse; justify-self: end; } /* La nota se esconde sin salir del layout: el «Comprar» se queda en su sitio. */ .gcard:nth-child(3) .gcard__pie > span { visibility: hidden; } /* La primera tarjeta es el espejo de la tercera: lo que se ve de ella es su mitad izquierda, así que «Comprar» va a la izquierda (antes quedaba tapado por la tarjeta del medio y la tarjeta parecía muerta). */ .gcard:nth-child(1) .gcard__pie { flex-direction: row-reverse; } .gcard:nth-child(1) .gcard__pie > span { visibility: hidden; } } .abanico:hover .gcard:nth-child(1) { transform: translate(-58%, 10%) rotate(-15deg); } .abanico:hover .gcard:nth-child(3) { transform: translate(58%, 10%) rotate(15deg); } .abanico .gcard:hover, .abanico .gcard:focus-visible { z-index: 3; box-shadow: 0 50px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px var(--oro); } .abanico .gcard:nth-child(1):hover { transform: translate(-58%, 4%) rotate(-8deg); } .abanico .gcard:nth-child(2):hover { transform: translateY(-10%); } .abanico .gcard:nth-child(3):hover { transform: translate(58%, 4%) rotate(8deg); } .gcard__cinta { position: absolute; z-index: 3; top: 26px; right: -54px; width: 196px; transform: rotate(45deg); padding: 7px 0; text-align: center; background: var(--oro); color: #16110b; font: 600 11.5px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8); } @media (max-width: 860px) { .abanico { height: auto; display: grid; gap: 0; justify-items: center; } .gcard { position: relative; width: min(88vw, 380px); } .gcard:nth-child(n) { transform: rotate(-2deg); margin-top: 18px; } /* sin encimarse: cada tarjeta es un botón completo */ .gcard:nth-child(1) { margin-top: 0; } .gcard:nth-child(2) { transform: rotate(2deg); } .abanico:hover .gcard:nth-child(n), .abanico .gcard:nth-child(n):hover { transform: rotate(0); } } .regalo-exp { list-style: none; display: grid; border-top: 1px solid var(--hilo-tinta); } .regalo-exp li { display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hilo-tinta); } .regalo-exp .ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(122, 94, 32, .4); color: var(--oro-texto); } .regalo-exp .ico svg { width: 22px; height: 22px; } .regalo-exp b { font: 460 1.5rem/1.1 var(--f-display); color: var(--tinta); } .regalo-exp a:hover b { color: var(--oro-texto); } @media (max-width: 560px) { .regalo-exp li { grid-template-columns: 44px 1fr; } .regalo-exp li .btn { grid-column: 1 / -1; } } /* ═══════════════════════ 25. CONVENIOS: la credencial ═══════════════════════ */ .beneficios-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-block: 1px solid var(--hilo); } .beneficio { display: grid; gap: 14px; align-content: start; padding: 34px 26px; border-left: 1px solid var(--hilo); } .beneficio:first-child { border-left: 0; } .beneficio .ico { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); color: var(--oro-claro); } .beneficio .ico svg { width: 24px; height: 24px; } .beneficio h3 { font-size: 1.55rem; } .beneficio p { margin: 0; color: var(--crema-2); font-size: 15.5px; } @media (max-width: 960px) { .beneficios-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beneficio:nth-child(3) { border-left: 0; } .beneficio:nth-child(n+3) { border-top: 1px solid var(--hilo); } } @media (max-width: 560px) { .beneficios-4 { grid-template-columns: 1fr; } .beneficio { border-left: 0; border-top: 1px solid var(--hilo); } .beneficio:first-child { border-top: 0; } } .solicitud { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .credencial-escena { position: relative; display: grid; justify-items: center; padding-top: 90px; } .credencial-escena::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 108px; margin-left: -1px; background: linear-gradient(var(--oro-texto), var(--oro)); } .credencial { position: relative; width: min(100%, 320px); aspect-ratio: .64; padding: 60px 26px 26px; border-radius: 16px; transform: rotate(-4deg); display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 12px; text-align: center; color: var(--crema); background: radial-gradient(circle at 50% 0%, rgba(227, 194, 122, .18), transparent 50%), linear-gradient(160deg, #211a13, #0d0b09); border: 1px solid rgba(227, 194, 122, .45); box-shadow: 0 40px 60px -30px rgba(40, 25, 5, .6); -webkit-mask: radial-gradient(ellipse 34px 9px at 50% 24px, #0000 98%, #000) ; mask: radial-gradient(ellipse 34px 9px at 50% 24px, #0000 98%, #000); } .credencial img { width: 78px; height: 78px; } .credencial small { font: 600 12px/1 var(--f-texto); letter-spacing: .24em; text-transform: uppercase; color: var(--oro-claro); } .credencial b { font: 460 2rem/1 var(--f-display); } .credencial .tu-empresa { align-self: center; font: italic 400 1.5rem/1.1 var(--f-display); color: var(--oro-claro); border-bottom: 1px dashed var(--hilo-fuerte); padding-bottom: 6px; } .credencial .chips { justify-content: center; } .credencial .chip { font-size: 12px; padding: 6px 10px; } @media (max-width: 900px) { .solicitud { grid-template-columns: 1fr; } .credencial-escena { max-width: 360px; margin-inline: auto; } } /* ═══════════════════════ 26. TESTIMONIOS: las comillas ═══════════════════════ */ .comillas { position: relative; display: grid; justify-items: center; text-align: center; gap: 22px; padding: clamp(60px, 7vw, 100px) clamp(24px, 5vw, 80px); border: 1px dashed var(--hilo-fuerte); border-radius: 999px 999px 6px 6px; max-width: 860px; margin-inline: auto; } .comillas::before { content: "“"; position: absolute; top: -.32em; left: 50%; transform: translateX(-50%); padding: 0 .12em; background: var(--noche); font: italic 400 clamp(8rem, 14vw, 13rem)/1 var(--f-display); color: var(--oro-claro); } .comillas .gemas { display: flex; gap: 10px; } .comillas .gemas .gema { width: 12px; height: 12px; opacity: .35; } .comillas h2 { font-size: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); } .testimonios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .testimonio { margin: 0; padding: 30px; border: 1px solid var(--hilo); border-radius: 3px; display: grid; gap: 18px; } .testimonio blockquote { margin: 0; font: italic 400 1.35rem/1.35 var(--f-display); color: var(--crema); } .testimonio figcaption { font-size: 14px; color: var(--crema-3); } .testimonio figcaption strong { display: block; color: var(--crema); } @media (max-width: 900px) { .testimonios { grid-template-columns: 1fr; } } /* ═══════════════════════ 27. PROMOCIONES ═══════════════════════ */ .boletos--listado { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* El destacado + 2 (o + 4) boletos: en tres columnas quedaba un hueco a la derecha. A dos, llenan la fila. */ @media (min-width: 641px) { .boletos--listado:has(> :nth-child(3):last-child), .boletos--listado:has(> :nth-child(5):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; } } /* El destacado del listado: la foto no es una cabeza sino toda la columna derecha, y el velo va de lado (la foto entra en la tarjeta, no al revés). */ .boleto--grande { grid-column: 1 / -1; min-height: 400px; --m: 100%; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: clamp(26px, 3vw, 52px); padding: 38px 0 30px 40px; } .boleto--grande .boleto__tipo, .boleto--grande .boleto__tit, .boleto--grande .boleto__txt, .boleto--grande .boleto__pie { grid-column: 1; margin-right: 8px; } .boleto--grande .boleto__tipo { margin-top: 0; } .boleto--grande .boleto__foto { grid-column: 2; grid-row: 1 / -1; height: 100%; margin: 0; } /* La foto llena su columna sin dictar el alto: con una foto vertical el boleto medía ~800 px y el texto quedaba arriba con medio boleto vacío debajo. Ahora manda el texto (y el mínimo). */ .boleto--grande .boleto__foto img { position: absolute; inset: 0; } .boleto--grande .boleto__foto::after { inset: 0 auto 0 0; width: 42%; height: auto; background: linear-gradient(90deg, var(--noche-2), transparent); } .boleto--grande .boleto__tit { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); } .boleto--grande .boleto__txt { font-size: 17px; } .boleto--grande .boleto__pie { padding-top: 26px; } .boleto--grande::before { display: none; } .boleto-vacio { display: grid; justify-items: center; text-align: center; gap: 18px; max-width: 640px; margin-inline: auto; padding: 56px 36px; border: 1.5px dashed var(--hilo-fuerte); border-radius: 10px; position: relative; } .boleto-vacio::before, .boleto-vacio::after { content: ""; position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--noche); border: 1.5px dashed var(--hilo-fuerte); } .boleto-vacio::before { left: -16px; clip-path: inset(0 0 0 50%); } .boleto-vacio::after { right: -16px; clip-path: inset(0 50% 0 0); } .boleto-vacio h2 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); } @media (max-width: 900px) { .boletos--listado { grid-template-columns: 1fr; } /* Sin dos columnas, el destacado vuelve a ser un boleto normal con su cabeza. */ .boleto--grande { grid-template-columns: 1fr; padding: 0 26px 22px; --m: calc(100% - 70px); } .boleto--grande .boleto__tipo, .boleto--grande .boleto__tit, .boleto--grande .boleto__txt, .boleto--grande .boleto__pie { margin-right: 0; } .boleto--grande .boleto__tipo { margin-top: -16px; } .boleto--grande .boleto__foto { grid-column: 1; grid-row: auto; height: 196px; margin: 0 -26px; } .boleto--grande .boleto__foto::after { inset: auto 0 0; width: auto; height: 46%; background: linear-gradient(180deg, transparent, var(--noche-2)); } .boleto--grande .boleto__pie { padding-top: 24px; } } /* Ajustes por página (etapa 3) */ .s-noche-2 .comillas::before { background: var(--noche-2); } .comillas .gemas { margin-top: 36px; } .cab--regalo { padding-top: calc(var(--cab-h) + 18px); } .cab--regalo h1 { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.4rem); } .cab--regalo .abanico { height: clamp(330px, 30vw, 400px); margin-top: 0; } @media (max-width: 860px) { .cab--regalo .abanico { height: auto; } } /* ═══════════════════════ 28. PREGUNTAS FRECUENTES: el signo ═══════════════════════ */ .cab--signo .cab__cuerpo { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .signo-arte { position: relative; justify-self: center; width: min(100%, 420px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hilo-fuerte); background: radial-gradient(circle at 42% 38%, rgba(227, 194, 122, .08), transparent 62%); animation: aparecer 1.2s ease both .2s; } .signo-arte::before { content: ""; position: absolute; inset: 22px; border-radius: 50%; border: 1px solid var(--hilo); } .signo-arte span { font: italic 400 clamp(11rem, 20vw, 17rem)/1 var(--f-display); color: var(--oro-claro); transform: translateY(4%); } .signo-arte .gema { position: absolute; left: calc(14.6% - 8px); top: calc(14.6% - 8px); } .faq-indice { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .faq-nav { position: sticky; top: calc(var(--cab-h) + 30px); display: grid; gap: 4px; list-style: none; } .faq-nav a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hilo); color: var(--crema-2); transition: color .2s; } .faq-nav a:hover { color: var(--crema); } .faq-nav i { font: italic 400 16px/1 var(--f-display); font-style: italic; color: var(--oro-claro); } .faq-nav small { font-size: 12px; color: var(--crema-3); } .faq-grupo { scroll-margin-top: calc(var(--cab-h) + 24px); display: grid; gap: 20px; } .faq-grupo + .faq-grupo { margin-top: clamp(56px, 6vw, 84px); } .faq-grupo h2 { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.8rem); } @media (max-width: 900px) { .cab--signo .cab__cuerpo, .faq-indice { grid-template-columns: 1fr; } .faq-nav { position: relative; top: 0; } .signo-arte { width: min(62vw, 300px); } } /* ═══════════════════════ 29. CONTACTO: la conversación ═══════════════════════ */ .chat { position: relative; justify-self: center; width: min(100%, 420px); padding: 18px 16px 20px; border-radius: 34px; background: #0b0a08; border: 1px solid var(--hilo-fuerte); box-shadow: var(--sombra); animation: aparecer 1.1s ease both .2s; } .chat__cab { display: flex; align-items: center; gap: 12px; padding: 6px 8px 16px; border-bottom: 1px solid var(--hilo); } .chat__cab img { width: 42px; height: 42px; } .chat__cab b { display: block; font-size: 15px; color: var(--crema); } .chat__cab small { font-size: 12px; color: var(--vivo); } .chat__cuerpo { display: grid; gap: 10px; padding: 18px 6px 8px; } .burbuja { max-width: 84%; padding: 10px 14px 18px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; position: relative; opacity: 0; animation: burbuja .5s var(--curva) forwards; } .burbuja time { position: absolute; right: 10px; bottom: 3px; font-size: 12px; color: #c9ddcc; } .burbuja { padding-bottom: 20px; } .burbuja--spa time { color: var(--crema-3); } .burbuja--yo { justify-self: end; background: #1f5c3b; color: #eef6ef; border-bottom-right-radius: 4px; } .burbuja--spa { justify-self: start; background: var(--noche-3); color: var(--crema); border-bottom-left-radius: 4px; } .burbuja:nth-child(1) { animation-delay: .5s; } .burbuja:nth-child(2) { animation-delay: 1.3s; } .burbuja:nth-child(3) { animation-delay: 2.1s; } .burbuja:nth-child(4) { animation-delay: 2.9s; } @keyframes burbuja { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } } .chat__nota { margin: 12px 8px 0; font-size: 12px; color: var(--crema-3); text-align: center; } .contacto-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 100px); align-items: start; } .datos-lista { list-style: none; display: grid; border-top: 1px solid var(--hilo); } .datos-lista li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hilo); } .datos-lista .ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); color: var(--oro-claro); } .datos-lista .ico svg { width: 20px; height: 20px; } .datos-lista small { display: block; font: 600 12px/1.3 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--crema-3); } .datos-lista b { display: block; font: 460 1.35rem/1.2 var(--f-display); color: var(--crema); overflow-wrap: anywhere; } .datos-lista a:hover b { color: var(--oro-claro); } @media (max-width: 900px) { .contacto-rejilla { grid-template-columns: 1fr; } .chat { width: min(100%, 380px); } } /* ═══════════════════════ 30. RESERVAR (ronda 9) ═══════════════════════ La reserva empieza en la primera pantalla: columna de pasos + el BOLETO fijo con la foto del servicio elegido. En el celular el boleto se vuelve una barra inferior con el resumen y el botón del paso en curso (.rv-barra). */ .pag-reservar main { background: radial-gradient(ellipse 60% 50% at 85% 0%, rgba(227, 194, 122, .07), transparent 70%), var(--noche); } .rv { position: relative; padding: calc(var(--cab-h) + clamp(18px, 2.2vw, 30px)) 0 clamp(60px, 7vw, 100px); } .rv__marco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); gap: clamp(32px, 4vw, 64px); align-items: start; } .rv__principal { min-width: 0; } .rv__cab { display: grid; gap: 10px; margin-bottom: clamp(20px, 2.2vw, 28px); } .rv__cab h1 { font-size: clamp(2.4rem, 1.5rem + 2.1vw, 3.5rem); line-height: .98; transition: font-size .35s var(--curva); } /* Ronda 11: el titular y las garantías convencen para EMPEZAR. A partir del paso 2 solo ocupan sitio: en el celular empujaban el calendario 200 px hacia abajo en cada paso. Se encogen y dejan el trabajo a los pasos. */ .rv.avanzada .rv__garantias { display: none; } .rv.avanzada .rv__cab { gap: 8px; margin-bottom: clamp(16px, 1.6vw, 22px); } .rv.avanzada .rv__cab h1 { font-size: clamp(1.9rem, 1.3rem + 1.3vw, 2.5rem); } .rv__garantias { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin-top: 4px; font-size: 14px; color: var(--crema-2); } .rv__garantias li { display: inline-flex; align-items: center; gap: 8px; } .rv__garantias svg { width: 16px; height: 16px; color: var(--oro); } /* Pasos: tres perlas sobre un hilo; el detalle elegido queda escrito debajo */ .rv-pasos { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0 0 clamp(22px, 2.4vw, 30px); padding: 0; } .rv-pasos::before { content: ""; position: absolute; left: 22px; right: 22px; top: 21px; height: 1px; background: var(--hilo-fuerte); } .rv-paso { position: relative; min-width: 0; } .rv-paso button { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 0 12px 0 0; border: 0; background: none; text-align: left; color: var(--crema-3); cursor: default; } .rv-paso.hecho button:not(:disabled) { cursor: pointer; } .rv-paso.hecho button:not(:disabled):hover .rv-paso__txt { color: var(--oro-claro); } .rv-paso__perla { position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 43px; height: 43px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); background: var(--noche); font: 460 17px/1 var(--f-display); color: var(--crema-2); transition: background-color .3s, border-color .3s, color .3s, box-shadow .3s; } .rv-paso.activo .rv-paso__perla { border: 0; color: #1a1208; background: radial-gradient(circle at 34% 30%, #fff7e2 0 10%, var(--oro-claro) 34%, var(--oro) 62%, #7d5d1e 100%); box-shadow: 0 0 0 6px var(--noche), 0 0 22px 2px rgba(227, 194, 122, .35); } .rv-paso.hecho .rv-paso__perla { border-color: var(--oro); color: var(--oro-claro); box-shadow: 0 0 0 6px var(--noche); } .rv-paso__txt { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; margin-left: -12px; padding: 3px 12px 0 14px; background: var(--noche); font-weight: 600; font-size: 14.5px; color: var(--crema-2); transition: color .2s; } /* el fondo tapa el hilo */ .rv-paso.activo .rv-paso__txt { color: var(--crema); } .rv-paso__txt small { font-weight: 400; font-size: 13px; color: var(--crema-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-paso.hecho .rv-paso__txt small { color: var(--oro-claro); } .rv-pasos.terminado .rv-paso__perla { border-color: var(--oro); background: var(--oro); color: #1a1208; box-shadow: 0 0 0 6px var(--noche); } /* Paneles */ .rv-panel { animation: rv-entra .45s var(--curva) both; } @keyframes rv-entra { from { opacity: 0; transform: translateY(10px); } } .rv-panel__cab { display: grid; gap: 4px; margin-bottom: 16px; } .rv-panel__cab h2 { font-size: clamp(1.8rem, 1.35rem + 1.1vw, 2.35rem); outline: none; } .rv-panel__cab p { color: var(--crema-2); max-width: 62ch; } .rv-panel__cab p strong { color: var(--crema); } .rv-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } @media (min-width: 1000px) and (max-height: 820px) { .rv__cab .migas { display: none; } .rv__garantias { margin-top: 0; } } .rv-filtros .chip { cursor: pointer; font: inherit; font-size: 13.5px; } .rv-filtros .chip:hover { border-color: var(--oro); color: var(--crema); } .rv-filtros .chip[aria-pressed="true"] { border-color: var(--oro); background: rgba(201, 162, 75, .14); color: var(--crema); } /* Paso 1: servicios como tarjetas con su foto en círculo */ .rv-servicios { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; } .rv-serv { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 16px 10px 10px; text-align: left; cursor: pointer; color: var(--crema); background: var(--noche-2); border: 1px solid var(--hilo); border-radius: 999px 20px 20px 999px; transition: border-color .25s, background-color .25s, transform .35s var(--curva); } .rv-serv:hover { border-color: var(--hilo-fuerte); transform: translateY(-2px); } .rv-serv[aria-pressed="true"] { border-color: var(--oro); background: linear-gradient(90deg, rgba(201, 162, 75, .16), var(--noche-2) 70%); } .rv-serv__foto { position: relative; width: 72px; height: 72px; } .rv-serv__foto img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hilo-fuerte); } .rv-serv[aria-pressed="true"] .rv-serv__foto img { box-shadow: 0 0 0 2px var(--oro), 0 0 0 5px var(--noche-2), 0 0 0 6px var(--hilo-fuerte); } /* Ronda 11: la marca de «elegido» existía SOLO al elegir, así que nada decía que las tarjetas se pudieran sumar: parecían botones de opción única. Ahora cada una lleva siempre su señal — un «+» apagado que se vuelve un ✓ dorado. */ .rv-serv__foto::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 3px var(--noche-2); border: 1px solid var(--hilo-fuerte); background: var(--noche-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") no-repeat center / 12px; transition: background-color .25s, border-color .25s, transform .3s var(--curva); } .rv-serv:hover .rv-serv__foto::after { border-color: var(--oro); } .rv-serv[aria-pressed="true"] .rv-serv__foto::after { border-color: var(--oro); transform: scale(1.06); background: var(--oro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316110b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / 13px; } .rv-serv__txt { display: grid; gap: 4px; min-width: 0; } .rv-serv__txt b { font: 460 1.2rem/1.12 var(--f-display); } .rv-serv__txt small { font-size: 13px; line-height: 1.4; color: var(--crema-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv-serv__estrella { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; padding: 2px 8px 2px 6px; border-radius: 999px; background: rgba(201, 162, 75, .16); font: 600 12px/1.3 var(--f-texto); color: var(--oro-claro); vertical-align: 3px; } .rv-serv__estrella svg { width: 12px; height: 12px; } .rv-serv__dur { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--crema-2); white-space: nowrap; } .rv-serv__dur svg { width: 15px; height: 15px; color: var(--oro); } .rv-ayuda { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 18px; font-size: 14px; color: var(--crema-2); } .rv-ayuda svg { width: 18px; height: 18px; color: var(--oro); } .rv-ayuda a, .rv-nota a, .rv-boleto__nota a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; } /* Paso 2: días rápidos, calendario y horas por franja */ .rv-rapidos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } .rv-rapidos:empty { display: none; } .rv-rapidos__t { width: 100%; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--crema-3); } .rv-rapido { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 8px 10px; border: 1px solid var(--hilo-fuerte); border-radius: 14px; background: var(--noche-2); color: var(--crema); cursor: pointer; transition: border-color .2s, background-color .2s; } .rv-rapido small { font-size: 12px; color: var(--crema-3); } .rv-rapido b { font: 460 1.5rem/1 var(--f-display); } .rv-rapido:hover { border-color: var(--oro); } .rv-rapido[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: #16110b; } .rv-rapido[aria-pressed="true"] small { color: #3d2f16; } .rv-dos { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 2.6vw, 36px); align-items: start; } .rv-cal { padding: 18px; background: var(--noche-2); border: 1px solid var(--hilo); border-radius: 20px; } .rv-cal__cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .rv-cal__mes { font: 460 1.4rem/1 var(--f-display); } .rv-cal__btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hilo-fuerte); background: none; color: var(--crema); cursor: pointer; } .rv-cal__btn:hover:not(:disabled) { border-color: var(--oro); color: var(--oro-claro); } .rv-cal__btn:disabled { opacity: .3; cursor: default; } .rv-cal__btn svg { width: 18px; height: 18px; } .rv-cal__dias, .rv-cal__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .rv-cal__dias span { text-align: center; font: 600 12px/2.2 var(--f-texto); letter-spacing: .1em; color: var(--crema-3); } .rv-dia { position: relative; aspect-ratio: 1; display: grid; place-items: center; min-height: 0; padding: 0; border: 1px solid transparent; border-radius: 50%; background: none; font: 500 15px/1 var(--f-texto); color: var(--crema-3); } .rv-dia.vacio { visibility: hidden; } .rv-dia:disabled { opacity: .42; cursor: default; } .rv-dia.libre { color: var(--crema); cursor: pointer; background: rgba(201, 162, 75, .07); } .rv-dia.libre::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--oro); } .rv-dia.libre:hover { border-color: var(--oro); } .rv-dia.hoy { box-shadow: inset 0 0 0 1px var(--crema-3); } .rv-dia[aria-pressed="true"] { background: var(--oro) !important; color: #16110b; font-weight: 700; border-color: var(--oro); } .rv-dia[aria-pressed="true"]::after { background: #16110b; } .rv-dia.esqueleto { min-height: 0; border-radius: 50%; } .rv-cal__nota { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 12.5px; color: var(--crema-3); } .rv-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--oro); } .rv-horas h3 { font: 460 1.45rem/1.2 var(--f-display); margin-bottom: 6px; } .rv-horas h3::first-letter { text-transform: uppercase; } .rv-franja { margin-top: 14px; } .rv-franja__t { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--crema-3); } .rv-franja__t svg { width: 16px; height: 16px; color: var(--oro); } .rv-franja__t span { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: var(--noche-3); letter-spacing: 0; color: var(--crema-2); } .rv-horas__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; } .rv-hora { min-height: 46px; border-radius: 999px; border: 1px solid var(--hilo-fuerte); background: var(--noche-2); color: var(--crema); font: 600 14px/1 var(--f-texto); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .2s, background-color .2s; } /* 01-10: con varios servicios, cada hora dice a qué hora terminas */ .rv-hora--fin { display: grid; align-content: center; gap: 4px; min-height: 58px; border-radius: 16px; } .rv-hora--fin small { font-size: 12px; font-weight: 500; color: var(--crema-3); } .rv-hora--fin[aria-pressed="true"] small { color: #3d2f16; } .rv-hora:hover { border-color: var(--oro); } .rv-hora[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: #16110b; } .rv-hora.esqueleto { min-height: 46px; border-radius: 999px; border: 0; } .rv-nota { margin-top: 14px; font-size: 13.5px; color: var(--crema-3); } .rv-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--hilo); } /* Paso 3: datos */ .rv-form { max-width: 620px; } .rv-form textarea.control { min-height: 96px; } .rv-prefijo { display: flex; } .rv-prefijo span { display: grid; place-items: center; padding: 0 14px; border: 1px solid rgba(243, 237, 227, .2); border-right: 0; background: var(--noche-3); color: var(--crema-2); font-weight: 600; } .rv-etiqueta { font-size: var(--t-sm); font-weight: 600; color: var(--crema); } .rv-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .rv-personas label { cursor: pointer; } .rv-personas input { position: absolute; opacity: 0; pointer-events: none; } .rv-personas span { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 1px solid rgba(243, 237, 227, .2); border-radius: 2px; background: var(--noche-2); font-weight: 600; transition: border-color .2s, background-color .2s; } .rv-personas span svg { width: 20px; height: 20px; color: var(--oro); } .rv-personas input:checked + span { border-color: var(--oro); background: rgba(201, 162, 75, .14); } .rv-personas input:focus-visible + span { outline: 2px solid var(--oro-claro); outline-offset: 3px; } #r-resultado:not(:empty) { margin-top: 16px; } .rv-ley { margin-top: 16px; font-size: 12.5px; color: var(--crema-3); } /* Paso 4: confirmación */ .rv-listo { display: grid; justify-items: center; gap: 14px; text-align: center; padding: clamp(10px, 2vw, 24px) 0; } .rv-listo .perla-marca { color: var(--oro); } .rv-listo > p { max-width: 52ch; color: var(--crema-2); } .rv-codigo { position: relative; margin: 6px 0; padding: 16px 34px; border: 1.5px dashed var(--oro); border-radius: 999px; background: rgba(201, 162, 75, .06); font: 460 clamp(2rem, 1.4rem + 1.8vw, 2.8rem)/1 var(--f-display); letter-spacing: .14em; color: var(--oro-claro); cursor: copy; } .rv-codigo::after { content: "Toca para copiar"; position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%); white-space: nowrap; font: 500 12px/1 var(--f-texto); letter-spacing: .04em; color: var(--crema-3); } .rv-codigo.copiado::after { content: "Copiado"; color: var(--vivo); } .rv-listo__boleto { width: min(100%, 520px); margin-top: 18px; padding: 18px 22px; border-radius: 18px; background: var(--noche-3); text-align: left; } .rv-listo__boleto dl, .rv-boleto dl { display: grid; gap: 10px; margin: 0; } .rv-listo__boleto dl div, .rv-boleto dl div { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; } .rv-listo__boleto dt, .rv-boleto dt { display: inline-flex; align-items: center; gap: 8px; color: var(--crema-3); } .rv-listo__boleto dd, .rv-boleto dd { margin: 0; text-align: right; font-weight: 600; color: var(--crema); } /* Ronda 11: el botón que separa la hora pesa solo; el calendario y el mapa bajan a segunda fila. Cuatro botones iguales repartían la atención justo en el momento en que solo importa una cosa: mandar la captura. */ .rv-listo__acc { display: grid; justify-items: center; gap: 8px; width: min(100%, 460px); margin-top: 14px; } .rv-listo__acc .btn { width: 100%; } .rv-listo__pista { font-size: 12.5px; color: var(--crema-3); } .rv-listo__extras { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; } .rv-antes { display: grid; gap: 12px; width: min(100%, 560px); margin: 14px 0 0; padding: 0; list-style: none; text-align: left; } .rv-antes li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--crema-2); } .rv-antes b { color: var(--crema); font-weight: 600; } .rv-antes svg { width: 20px; height: 20px; margin-top: 2px; color: var(--oro); } /* El boleto: foto en arco + dos mitades con línea de corte */ .rv-boleto { position: sticky; top: calc(var(--cab-h) + 20px); display: grid; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .45)); } .rv-boleto__foto { position: relative; margin: 0; aspect-ratio: 4 / 3.1; padding: 8px 8px 0; border-radius: 999px 999px 0 0; background: var(--noche-3); } .rv-boleto__foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 0 0; transition: opacity .35s, transform .6s var(--curva); } .rv-boleto__foto img.cambiando { opacity: .15; transform: scale(1.02); } .rv-boleto__foto .gema { position: absolute; left: 50%; top: -8px; margin-left: -8px; box-shadow: 0 0 0 5px var(--noche), 0 0 20px 3px rgba(227, 194, 122, .3); } .rv-boleto__a, .rv-boleto__b { position: relative; display: grid; gap: 14px; background: var(--noche-3); } .rv-boleto__a { padding: 20px 24px 22px; } .rv-boleto__b { padding: 20px 24px 22px; border-radius: 0 0 18px 18px; -webkit-mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top right / 51% 100% no-repeat; mask: radial-gradient(circle 11px at 0 0, transparent 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, transparent 98%, #000) top right / 51% 100% no-repeat; } .rv-boleto__b::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; border-top: 1.5px dashed var(--hilo-fuerte); } .rv-boleto__serv { margin: 0; font: 460 1.7rem/1.1 var(--f-display); color: var(--crema); } .rv-boleto dt svg { width: 16px; height: 16px; color: var(--oro); } .rv-boleto__lugar { display: flex; gap: 10px; margin: 0; font-size: 14px; color: var(--crema); } .rv-boleto__lugar svg { width: 18px; height: 18px; margin-top: 2px; color: var(--oro); } .rv-boleto__lugar small { color: var(--crema-3); font-size: 12.5px; } .rv-boleto__nota { margin: 0; font-size: 13px; color: var(--crema-3); } /* La hora se separa con un adelanto (ronda 9) */ .rv-aviso-adelanto { margin-top: 20px; } .rv-aviso-adelanto b { color: var(--crema); } #rv-adelanto-monto { color: var(--oro-claro); white-space: nowrap; } /* Los datos de pago, copiables de un toque: transcribir un número de Yape a mano es donde se pierde la mitad de los adelantos. */ .rv-pago { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; } .rv-pago__copiar { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; cursor: pointer; border: 1px solid var(--hilo-fuerte); border-radius: 999px; background: none; font: 600 12.5px/1 var(--f-texto); color: var(--oro-claro); transition: border-color .2s, color .2s; } .rv-pago__copiar:hover { border-color: var(--oro); } .rv-pago__copiar svg { width: 14px; height: 14px; } .rv-pago__copiar.copiado { border-color: var(--vivo); color: var(--vivo); } /* Retomar una reserva a medias: aparece arriba del paso 1, nunca tapa nada. */ .rv-retomar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 18px; padding: 14px 18px; border: 1px solid var(--hilo-fuerte); border-radius: 18px; background: rgba(201, 162, 75, .07); } .rv-retomar p { flex: 1 1 240px; margin: 0; font-size: 14.5px; color: var(--crema-2); } .rv-retomar p b { color: var(--crema); } .rv-retomar .btn { min-height: 40px; } .rv-separar { display: grid; gap: 10px; width: min(100%, 560px); margin: 30px 0 2px; padding: 0; list-style: none; text-align: left; } .rv-separar li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--hilo); border-radius: 16px; background: var(--noche-2); font-size: 14.5px; color: var(--crema-2); } .rv-separar b { color: var(--crema); font-weight: 600; } .rv-separar__n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; color: #1a1208; font: 460 15px/1 var(--f-display); background: radial-gradient(circle at 34% 30%, #fff7e2 0 10%, var(--oro-claro) 34%, var(--oro) 62%, #7d5d1e 100%); } .rv-aviso-hora { width: min(100%, 560px); text-align: left; } .rv-aviso-hora b { color: var(--crema); } /* Barra del celular */ .rv-barra { display: none; } @media (max-width: 999px) { .rv__marco { grid-template-columns: 1fr; } .rv-boleto { display: none; } .rv { padding-bottom: 110px; } .rv-barra:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 14px; padding: 12px var(--canal) calc(12px + env(safe-area-inset-bottom)); background: rgba(21, 18, 15, .96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--hilo-fuerte); box-shadow: 0 -18px 40px rgba(0, 0, 0, .5); } .rv-barra p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.35; color: var(--crema-2); } .rv-barra p b { display: block; font-weight: 600; color: var(--crema); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Lo que falta para poder seguir, junto al botón apagado que lo espera. */ .rv-barra__falta { display: block; font-style: normal; font-weight: 600; color: var(--oro-claro); } .rv-barra .btn { min-height: 48px; padding: 0 20px; } .pag-reservar .wa-flotante { display: none; } /* lo que se lleva a la vista (foco, scrollIntoView) no queda bajo la cabecera ni bajo la barra */ :root:has(body.pag-reservar) { scroll-padding: calc(var(--cab-h) + 12px) 0 100px; } } @media (max-width: 760px) { .rv-dos { display: flex; flex-direction: column; gap: 22px; } .rv-horas { order: -1; } /* en el celular, primero las horas del día elegido */ .rv-cal { padding: 14px; } .rv__cab h1 { font-size: 2.35rem; } /* Ronda 11: antes se ocultaba la tercera garantía («solo horarios libres de verdad»), que es justo la que responde al miedo de reservar en línea. Ahora las tres caben: dos por fila, con el texto más corto. */ .rv__garantias { gap: 6px 14px; font-size: 12.5px; } .rv-panel__cab p { font-size: 15px; } .rv-filtros { gap: 6px; } .rv-filtros .chip { padding: 7px 12px; font-size: 13px; } .rv-filtros .chip svg { display: none; } .rv-rapidos { flex-wrap: nowrap; } .rv-rapidos__t { display: none; } .rv-rapido { flex: 1 1 0; min-width: 0; padding: 7px 4px; } .rv-pasos::before { left: 18px; right: 18px; top: 17px; } .rv-paso button { flex-direction: column; gap: 8px; padding-right: 6px; } .rv-paso__perla { width: 35px; height: 35px; font-size: 15px; } .rv-paso__txt { font-size: 13px; margin-left: 0; padding: 0; background: none; } .rv-paso__txt small { font-size: 12px; } .rv-serv { grid-template-columns: 60px minmax(0, 1fr); padding-right: 14px; } .rv-serv__foto { width: 60px; height: 60px; } .rv-serv__dur { grid-column: 2; margin-top: -4px; } .rv-acciones .btn-lg { flex: 1 1 auto; } .rv-acciones .btn-linea { order: 2; } .rv-listo__extras .btn { flex: 1 1 100%; } /* En el celular el par etiqueta/valor no cabe en una línea: la fecha se partía en dos y la etiqueta quedaba flotando a media altura. Se apilan. */ .rv-listo__boleto dl div { display: grid; gap: 2px; } .rv-listo__boleto dd { text-align: left; } } @media (prefers-reduced-motion: reduce) { .rv-panel { animation: none; } .rv-boleto__foto img { transition: none; } } /* ── 24-09: los paquetes en el reservador y «Somos 2» ── */ .rv-grupo { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 2px; padding-top: 16px; border-top: 1px solid var(--hilo); font: 600 12.5px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } .rv-grupo svg { width: 18px; height: 18px; } .rv-grupo small { margin-left: auto; font-size: 12px; letter-spacing: .04em; text-transform: none; font-weight: 500; color: var(--crema-3); } .rv-serv__precio small { margin-left: 5px; font: 500 12px/1 var(--f-texto); color: var(--crema-3); white-space: nowrap; } .rv-personas label.apagado { cursor: not-allowed; opacity: .45; } .campo .pista#r-personas-nota { margin-top: 2px; } /* ── Ronda 10: varios servicios en una visita, precios y complementos ── */ /* Paso 1 · precio junto a la duración */ .rv-serv__meta { display: grid; justify-items: end; gap: 3px; } .rv-serv__precio { font: 460 1.15rem/1 var(--f-display); color: var(--oro-claro); white-space: nowrap; } /* Paso 1 · complementos (no se agendan: se piden en recepción) */ .rv-complementos { margin-top: 22px; padding: 16px 18px; border: 1px dashed var(--hilo-fuerte); border-radius: 18px; background: rgba(201, 162, 75, .04); } .rv-complementos__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 12.5px/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--oro-claro); } .rv-complementos__t svg { width: 15px; height: 15px; } .rv-complementos ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 22px; margin: 0; padding: 0; list-style: none; } .rv-complementos li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--hilo); font-size: 14px; color: var(--crema-2); } .rv-complementos li b { color: var(--crema); white-space: nowrap; } .rv-complementos small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--crema-3); } /* Paso 2 · la visita, servicio por servicio */ .rv-secuencia { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--hilo-fuerte); border-radius: 18px; background: var(--noche-2); } .rv-secuencia__t { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 12.5px/1.3 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--crema-3); } .rv-secuencia__t svg { width: 15px; height: 15px; color: var(--oro); } .rv-secuencia ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: none; } .rv-secuencia li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--hilo); } .rv-secuencia li:last-child { border-bottom: 0; } .rv-secuencia li > b { font: 460 1.1rem/1 var(--f-display); color: var(--oro-claro); white-space: nowrap; } .rv-secuencia li > span { display: grid; gap: 2px; min-width: 0; font-size: 14.5px; color: var(--crema); } .rv-secuencia li small { font-size: 12.5px; color: var(--crema-3); } .rv-secuencia__ed { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--hilo-fuerte); border-radius: 50%; background: transparent; color: var(--crema-2); cursor: pointer; transition: border-color .2s, color .2s; } .rv-secuencia__ed:hover { border-color: var(--oro); color: var(--oro-claro); } .rv-secuencia__ed svg { width: 16px; height: 16px; } .rv-secuencia__nota { margin: 10px 0 0; font-size: 12.5px; color: var(--crema-3); } /* Paso 2 · aviso de que se está cambiando la hora de un solo servicio */ .rv-editando { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 9px 14px; border: 1px solid var(--oro); border-radius: 999px; background: rgba(201, 162, 75, .1); font-size: 14px; color: var(--crema); } .rv-editando__x { border: 0; background: transparent; color: var(--oro-claro); font: 600 13px/1 var(--f-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* Boleto · varios servicios y la cuenta */ .rv-boleto__serv-lista { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; } .rv-boleto__serv-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--crema-2); } .rv-boleto__serv-lista b { color: var(--oro-claro); font-weight: 600; } .rv-boleto__serv-lista i { font-style: normal; color: var(--crema-3); white-space: nowrap; } .rv-boleto__cuenta { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hilo-fuerte); } .rv-boleto__total, .rv-boleto__adelanto { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0; } .rv-boleto__total span { font-size: 13.5px; color: var(--crema-2); } .rv-boleto__total b { font: 460 1.5rem/1 var(--f-display); color: var(--crema); } .rv-boleto__adelanto { margin-top: 6px; } .rv-boleto__adelanto span { font-size: 12.5px; color: var(--crema-3); } .rv-boleto__adelanto b { font-size: 15px; color: var(--oro-claro); } @media (max-width: 999px) { .rv-serv__meta { grid-column: 2; justify-items: start; grid-auto-flow: column; gap: 10px; align-items: baseline; margin-top: -2px; } .rv-serv__precio { font-size: 1rem; } .rv-serv__dur { grid-column: auto; margin-top: 0; } .rv-secuencia li { grid-template-columns: auto minmax(0, 1fr) auto; } } /* ═══════════════════════ 31. 404: las fases de la luna ═══════════════════════ */ .fases { display: flex; justify-content: center; gap: clamp(10px, 2.4vw, 26px); margin: 10px 0 34px; } .fase { width: clamp(38px, 6vw, 64px); aspect-ratio: 1; border-radius: 50%; background: var(--noche-3); box-shadow: inset 0 0 0 1px var(--hilo-fuerte); position: relative; overflow: hidden; } .fase::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6de 0 8%, var(--oro-claro) 40%, #8c6a26 100%); transform: translateX(var(--x)); } .fase:nth-child(1) { --x: -100%; } .fase:nth-child(2) { --x: -62%; } .fase:nth-child(3) { --x: 0%; } .fase:nth-child(4) { --x: 62%; } .fase:nth-child(5) { --x: 100%; } .error-404 { min-height: 70svh; display: grid; place-items: center; text-align: center; padding-top: calc(var(--cab-h) + 40px); } .error-404 .cab__txt { justify-items: center; } /* @@PAGINAS@@ */ /* ══════════════════ 32. RONDA DEL 29-09: TODO VISUAL, FOTOS ENTERAS Y PROMOCIONES DE VERDAD ══════════════════ Pedido del cliente (docs/CAMBIOS-24-09.md §21): portadas «predominantes» con la foto entera (sin las formas ni las perlas flotantes), menos texto y más imágenes, las promociones como promociones (no como posts), sin secciones claras (sin cambios bruscos de color), dinámico y fácil de entender para gente adulta, y primero el celular. */ :root { --r-foto: 24px; } @media (max-width: 760px) { :root { --r-foto: 18px; } } @keyframes titila { 50% { opacity: .35; transform: scale(.75); } } /* La portada del home sigue siendo .hero7 (§16): el 30-09 el cliente confirmó con su referencia que la quiere así, la foto a pantalla completa y el texto encima. La versión dividida del 29-09 se retiró. */ /* ─── Portadas de página con FOTO (servicios, fichas, paquetes, ambientes, promociones, convenios) ─── */ .cab--foto { padding-top: calc(var(--cab-h) + clamp(14px, 2.4vh, 30px)); padding-bottom: clamp(44px, 5vw, 84px); background: radial-gradient(ellipse 46% 60% at 14% 36%, rgba(227, 194, 122, .08), transparent 70%), var(--noche); } .cab--foto .cab__cuerpo { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(32px, 4.4vw, 84px); align-items: center; } .cab--foto h1 { font-size: clamp(2.8rem, 1.6rem + 3.4vw, 5.4rem); } .cab-fotos { position: relative; display: grid; gap: 12px; height: clamp(440px, calc(100svh - var(--cab-h) - 70px), 800px); animation: asomar 1.2s var(--curva) both .05s; } .cab--mosaico .cab-fotos { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); } .cab-fotos__f { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); } .cab--mosaico .cab-fotos__f--1 { grid-row: 1 / -1; } .cab-fotos__f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, var(--foco, 50% 50%)); transition: transform 1.4s var(--curva); } .cab-fotos__f--1 img { animation: acercar 14s ease-out both; } .cab-fotos__f:hover img { transform: scale(1.04); } .cab-fotos__nota { position: absolute; left: 18px; bottom: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border-radius: 999px; background: rgba(14, 12, 10, .6); border: 1px solid rgba(243, 237, 227, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12.5px/1 var(--f-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--crema); } .cab-fotos__nota svg { width: 16px; height: 16px; color: var(--oro-claro); } @media (prefers-reduced-motion: reduce) { .cab-fotos__f--1 img { animation: none; } } @media (max-width: 900px) { .cab--foto { padding-top: var(--cab-h); } .cab--foto .cab__cuerpo { grid-template-columns: 1fr; gap: 26px; } .cab-fotos { order: -1; height: clamp(260px, 50svh, 500px); margin-inline: calc(var(--canal) * -1); gap: 4px; overflow: hidden; border-radius: 0 0 var(--r-foto) var(--r-foto); } .cab-fotos__f { border-radius: 0; box-shadow: none; } .cab--foto h1 { font-size: clamp(2.4rem, 9.6vw, 3.6rem); } .cab-fotos__nota { left: 12px; bottom: 12px; padding: 7px 11px; font-size: 11px; } } @media (max-width: 560px) { .cab--foto .botones .btn { flex: 1 1 100%; } } /* ─── Portada INMERSIVA (30-09): la foto a sangre detrás del texto (ficha de servicio, Paquetes) ─── */ .cab--inmersiva { isolation: isolate; display: flex; align-items: flex-end; min-height: min(92svh, 880px); padding-top: calc(var(--cab-h) + 40px); padding-bottom: clamp(44px, 6vw, 90px); background: var(--noche); } .cab-inm__foto { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .cab-inm__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, var(--foco, 50% 50%)); animation: acercar 14s ease-out both; } .cab-inm__foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(14, 12, 10, .9) 0%, rgba(14, 12, 10, .62) 36%, rgba(14, 12, 10, .08) 72%), linear-gradient(180deg, rgba(14, 12, 10, .6) 0%, rgba(14, 12, 10, 0) 22%, rgba(14, 12, 10, 0) 60%, var(--noche) 100%); } .cab--inmersiva .cab__cuerpo { display: block; width: 100%; } .cab--inmersiva .cab__txt { max-width: 720px; } .cab--inmersiva h1 { font-size: clamp(2.8rem, 1.6rem + 3.6vw, 5.8rem); text-shadow: 0 2px 30px rgba(0, 0, 0, .5); } .cab--inmersiva .cab__intro, .cab--inmersiva .entrada { color: var(--crema); text-shadow: 0 1px 14px rgba(0, 0, 0, .6); } .cab--inmersiva .chip { background: rgba(14, 12, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .cab--inmersiva .btn-linea { background: rgba(14, 12, 10, .45); } .cab--centro .cab__txt { max-width: 860px; margin-inline: auto; justify-items: center; text-align: center; } .cab--centro .entrada { margin-inline: auto; } .cab--centro .botones { justify-content: center; } .cab--centro .cab-inm__foto::after { background: radial-gradient(ellipse 70% 60% at 50% 72%, rgba(14, 12, 10, .78), rgba(14, 12, 10, .2) 70%), linear-gradient(180deg, rgba(14, 12, 10, .55) 0%, rgba(14, 12, 10, 0) 24%, rgba(14, 12, 10, 0) 55%, var(--noche) 100%); } @media (prefers-reduced-motion: reduce) { .cab-inm__foto img { animation: none; } } /* 02-10 · Ficha en la computadora: a sangre, de una foto vertical se veía un tercio del alto, ampliada y con la cabeza cortada; entera y angosta a la derecha quedó chica y lejos del texto («ahí sí te pasaste»). Ahora ocupa el 60 % del ancho a la derecha, recortada por el encuadre del tratamiento (initEncuadre) y fundida largo hacia el texto sobre su luz casi negra. Paquetes (texto centrado) sigue a sangre, con el encuadre de su foto. */ @media (min-width: 901px) { .cab--inmersiva:not(.cab--centro) .cab-inm__foto { top: var(--cab-h); } /* debajo del menú: el moño no queda tras la barra */ .cab--inmersiva:not(.cab--centro) .cab-inm__foto::before { content: ""; position: absolute; inset: -80px; background: var(--fondo) 50% 50% / cover no-repeat; filter: blur(70px) brightness(.24) saturate(1.05); } .cab--inmersiva:not(.cab--centro) .cab-inm__foto img { left: auto; width: 60%; max-width: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 14%, #000 34%); mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .55) 14%, #000 34%); } .cab--inmersiva:not(.cab--centro) .cab-inm__foto::after { background: linear-gradient(90deg, rgba(14, 12, 10, .72) 0%, rgba(14, 12, 10, .38) 40%, rgba(14, 12, 10, 0) 62%), linear-gradient(180deg, rgba(14, 12, 10, .55) 0%, rgba(14, 12, 10, 0) 22%, rgba(14, 12, 10, 0) 70%, var(--noche) 100%); } } /* Celular: la foto arriba y el texto entra sobre su borde oscuro */ @media (max-width: 900px) { .cab--inmersiva { display: block; min-height: 0; padding-top: calc(var(--cab-h) + 38svh); padding-bottom: 44px; } .cab-inm__foto { bottom: auto; height: calc(var(--cab-h) + 56svh); } .cab-inm__foto img { object-position: var(--pos, var(--foco, 50% 50%)); } .cab-inm__foto::after, .cab--centro .cab-inm__foto::after { background: linear-gradient(180deg, rgba(14, 12, 10, .45) 0%, rgba(14, 12, 10, 0) 22%, rgba(14, 12, 10, .15) 50%, var(--noche) 100%); } .cab--inmersiva h1 { font-size: clamp(2.4rem, 10vw, 3.6rem); } } @media (max-width: 560px) { .cab--inmersiva .botones .btn, .cab--cartel .botones .btn, .cab--contacto .botones .btn, .cab--faq .botones .btn { flex: 1 1 100%; } } /* ─── 01 · El servicio estrella: mosaico de fotos + precio ─── */ .estrella8 { overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 42% 60% at 26% 55%, rgba(192, 85, 42, .24), transparent 72%), linear-gradient(180deg, #130d0a, var(--noche)); } .estrella8__cuerpo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "galeria cab" "galeria txt"; column-gap: clamp(40px, 5vw, 96px); row-gap: clamp(18px, 3vh, 32px); align-items: center; } .estrella8__cab { grid-area: cab; align-self: end; display: grid; gap: clamp(12px, 2vh, 20px); justify-items: start; } .estrella8 h2 { font-size: clamp(2.4rem, min(4.4vw, 8.6vh), 5.2rem); } .estrella8__cab .entrada { margin: 0; } .estrella8__insignia { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px; background: linear-gradient(90deg, rgba(214, 110, 60, .28), rgba(214, 110, 60, .08)); border: 1px solid rgba(214, 110, 60, .6); font: 600 12.5px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: #f6cdaa; } .estrella8__insignia svg { width: 16px; height: 16px; color: var(--oro-claro); } .estrella8__galeria { grid-area: galeria; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; height: min(80svh, 760px); min-height: 480px; } .estrella8__galeria--dos { grid-template-rows: minmax(0, 1fr); } .estrella8__galeria figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .9); } .estrella8__galeria img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); } .estrella8__galeria figure:hover img { transform: scale(1.05); } .estrella8__g1 { grid-row: 1 / -1; } .estrella8__g1 img { object-position: var(--foco, 50% 55%); } .estrella8__galeria figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 13px; border-radius: 999px; background: rgba(14, 12, 10, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 12px/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--crema); } .estrella8__precio { display: grid; align-content: center; justify-items: start; gap: 6px; padding: clamp(18px, 2.4vw, 32px); border-radius: var(--r-foto); color: #1a1208; background: radial-gradient(circle at 85% 12%, rgba(255, 246, 222, .6), transparent 42%), linear-gradient(150deg, var(--oro-claro), var(--oro) 55%, var(--oro-hondo)); box-shadow: 0 30px 60px -30px rgba(201, 162, 75, .5); transition: transform .5s var(--curva); } .estrella8__precio:hover { transform: translateY(-4px); } .estrella8__precio small { font: 700 12.5px/1.25 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; } .estrella8__precio b { font: 460 clamp(3rem, min(5.4vw, 10vh), 5.8rem)/.9 var(--f-display); letter-spacing: -.02em; } .estrella8__precio span { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 16px; border-radius: 999px; background: #1a1208; color: var(--oro-claro); font: 600 14px/1 var(--f-texto); } .estrella8__precio span svg { width: 16px; height: 16px; transition: transform .3s var(--curva); } .estrella8__precio:hover span svg { transform: translateX(4px); } .estrella8__txt { grid-area: txt; align-self: start; display: grid; gap: clamp(18px, 2.6vh, 28px); } .estrella8__beneficios { list-style: none; display: grid; gap: 12px; } .estrella8__beneficios li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: clamp(15.5px, .9rem + .25vw, 18px); line-height: 1.45; color: var(--crema); } .estrella8__beneficios svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(201, 162, 75, .18); color: var(--oro-claro); } @media (max-width: 1099px) { .estrella8__cuerpo { grid-template-columns: 1fr; grid-template-areas: "cab" "galeria" "txt"; } .estrella8__cab, .estrella8__txt { align-self: auto; } .estrella8__galeria { height: min(110vw, 640px); min-height: 0; } } @media (max-width: 560px) { .estrella8__galeria { gap: 8px; height: 118vw; } .estrella8__precio { padding: 16px 14px; } .estrella8__precio small { font-size: 11px; letter-spacing: .08em; } .estrella8__precio b { font-size: 2.5rem; } .estrella8__precio span { padding: 8px 12px; font-size: 13px; } .estrella8__galeria figcaption { left: 10px; bottom: 10px; padding: 6px 10px; font-size: 10.5px; } .estrella8 .botones .btn { flex: 1 1 100%; } } /* ─── Promociones: CUPONES (y las novedades como notas) ─── 30-09: «muy grandes», en escritorio y en el celular. Ahora son compactos: en escritorio la foto a la izquierda y el texto a la derecha (~260 px de alto); en el celular la foto es una franja baja. */ .promos8 { background: radial-gradient(ellipse 50% 50% at 88% 8%, rgba(227, 194, 122, .08), transparent 70%), var(--noche-2); } .promos8 h2 { font-size: clamp(2.2rem, min(3.6vw, 7vh), 3.6rem); } .promos8 .encabezado { margin-bottom: clamp(24px, 3vw, 40px); } @media (min-width: 1100px) and (min-height: 600px) { .lam.promos8 { min-height: 0; padding-block: clamp(70px, 9vh, 110px); } } .cupones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: clamp(16px, 2vw, 26px); } .cupon { position: relative; display: flex; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .45)); transition: transform .5s var(--curva); } .cupon:hover, .cupon:focus-within { transform: translateY(-4px); } .cupon__foto { position: relative; flex: 0 0 40%; display: block; min-height: 250px; overflow: hidden; border-radius: 18px 0 0 18px; background: var(--noche-3); } .cupon__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .cupon:hover .cupon__foto img { transform: scale(1.05); } .cupon__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, .15), rgba(14, 12, 10, 0) 45%); } /* El banderín dorado que cuelga del borde: cuánto ganas */ .cupon__sello { position: absolute; top: 0; left: 16px; z-index: 2; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 70px; padding: 11px 10px 20px; color: #1a1208; text-align: center; background: radial-gradient(circle at 70% 0%, rgba(255, 246, 222, .6), transparent 45%), linear-gradient(180deg, var(--oro-claro), var(--oro) 70%, var(--oro-hondo)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%); } .cupon__sello b { font: 500 1.9rem/.85 var(--f-display); letter-spacing: -.02em; } .cupon__sello small { font: 700 10.5px/1.15 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; } .cupon__sello--largo b { font-size: 1.2rem; letter-spacing: .04em; text-transform: uppercase; } /* El cuerpo: muescas y línea de corte vertical donde se une con la foto */ .cupon__cuerpo { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 22px 24px 22px 28px; border-radius: 0 18px 18px 0; background: linear-gradient(170deg, #2a2119, #18130f 62%); -webkit-mask: radial-gradient(circle 12px at 0 0, #0000 11px, #000 12px) 0 0 / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 11px, #000 12px) 0 100% / 100% 51% no-repeat; mask: radial-gradient(circle 12px at 0 0, #0000 11px, #000 12px) 0 0 / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 11px, #000 12px) 0 100% / 100% 51% no-repeat; } .cupon__cuerpo::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; border-left: 2px dashed rgba(227, 194, 122, .42); } .cupon__tipo { margin: 0; font: 600 11px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); } .cupon__tit { font: 460 clamp(1.3rem, 1.05rem + .6vw, 1.65rem)/1.1 var(--f-display); color: var(--crema); } .cupon__tit a:hover { color: var(--oro-claro); } .cupon__txt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--crema-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cupon__vence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; color: var(--crema-2); } .cupon__vence svg { width: 15px; height: 15px; color: var(--oro); } .cupon__quedan { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(192, 85, 42, .2); border: 1px solid rgba(214, 110, 60, .55); color: #f6cdaa; font: 600 12px/1 var(--f-texto); } .cupon__quedan::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e7875a; animation: titila 1.8s ease-in-out infinite; } .cupon__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px; } .cupon__acciones .btn { min-height: 44px; padding: 0 18px; font-size: 14px; } .cupon__acciones .enlace-flecha { font-size: 13.5px; } /* Celular (y columnas angostas): la foto arriba, baja, y el corte horizontal */ @media (max-width: 640px) { .cupones { grid-template-columns: minmax(0, 1fr); } .cupon { flex-direction: column; min-width: 0; } .cupon__foto { flex: none; min-height: 0; aspect-ratio: 2.3 / 1; border-radius: 16px 16px 0 0; } .cupon__cuerpo { padding: 18px 18px 18px; border-radius: 0 0 16px 16px; -webkit-mask: radial-gradient(circle 12px at 0 0, #0000 11px, #000 12px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 0, #0000 11px, #000 12px) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 12px at 0 0, #0000 11px, #000 12px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 12px at 100% 0, #0000 11px, #000 12px) 100% 0 / 51% 100% no-repeat; } .cupon__cuerpo::before { left: 20px; right: 20px; top: 0; bottom: auto; border-left: 0; border-top: 2px dashed rgba(227, 194, 122, .42); } .cupon__foto { aspect-ratio: 2.9 / 1; } .cupon__cuerpo { gap: 7px; padding: 16px 16px 16px; } .cupon__tit { font-size: 1.25rem; } .cupon__txt { display: none; } /* el título ya lo dice; el detalle está en «Ver condiciones» */ .cupon__vence { font-size: 12.5px; } .cupon__acciones { flex-wrap: wrap; gap: 10px 12px; margin-top: 4px; } .cupon__acciones .btn { flex: 1 1 auto; min-height: 42px; padding: 0 12px; font-size: 13.5px; } .cupon__acciones .enlace-flecha { flex: none; font-size: 13px; } .cupon__sello { left: 12px; min-width: 62px; padding: 9px 8px 17px; } .cupon__sello b { font-size: 1.55rem; } } .notas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 20px; } .nota { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; align-items: center; padding: 14px; border: 1px solid var(--hilo); border-radius: 20px; background: var(--noche-2); transition: border-color .3s, transform .5s var(--curva); } .s-noche-2 .nota { background: var(--noche-3); } .nota:hover, .nota:focus-visible { border-color: rgba(227, 194, 122, .5); transform: translateY(-4px); } .nota__foto { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 14px; background: var(--noche-3); } .nota__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nota__cuerpo { display: grid; gap: 8px; padding-right: 10px; } .nota__tipo { font: 600 12px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--crema-3); } .nota b { font: 460 1.45rem/1.12 var(--f-display); color: var(--crema); } .nota__txt { font-size: 14.5px; line-height: 1.5; color: var(--crema-2); } @media (max-width: 520px) { .nota { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; } .nota__txt { display: none; } .nota b { font-size: 1.2rem; } } /* ─── 03 · Cómo llegar (30-09): el mapa grande con la foto de la entrada y tres tarjetas ─── */ .llegar8 h2 { font-size: clamp(2.2rem, min(3.8vw, 7.4vh), 4rem); } .llegar8 .encabezado { margin-bottom: clamp(24px, 3vw, 40px); } @media (min-width: 1100px) and (min-height: 600px) { .lam.llegar8 { min-height: 0; padding-block: calc(var(--cab-h) + 2vh) clamp(60px, 8vh, 100px); } } .llegar8__cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 32px); align-items: stretch; } .llegar8__mapa { position: relative; min-height: 460px; border-radius: var(--r-foto); overflow: hidden; background: var(--noche-3); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); } .llegar8__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .llegar8__foto { position: absolute; left: 16px; bottom: 16px; z-index: 2; width: clamp(130px, 13vw, 190px); margin: 0; overflow: hidden; border-radius: 16px; border: 4px solid var(--noche); box-shadow: 0 24px 40px -16px rgba(0, 0, 0, .85); } .llegar8__foto img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; } .llegar8__foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 8px 9px; background: linear-gradient(180deg, transparent, rgba(14, 12, 10, .92)); font: 600 11.5px/1.3 var(--f-texto); color: var(--crema); text-align: center; } .llegar8__datos { list-style: none; display: grid; gap: 14px; align-content: stretch; } .llegar8__dato { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px 22px; border-radius: 18px; background: var(--noche-2); border: 1px solid var(--hilo); } .llegar8__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(150deg, var(--oro-claro), var(--oro-hondo)); color: #16110b; } .llegar8__ico svg { width: 23px; height: 23px; } .llegar8__dato > div { display: grid; gap: 4px; justify-items: start; } .llegar8__dato small { font: 600 11.5px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); } .llegar8__dato b { font: 460 clamp(1.25rem, 1.05rem + .5vw, 1.55rem)/1.15 var(--f-display); color: var(--crema); } .llegar8__dato span { font-size: 14.5px; color: var(--crema-2); } .llegar8__dato .enlace-flecha { margin-top: 4px; font-size: 13.5px; } .llegar8__horas { display: grid; gap: 4px; width: 100%; margin: 2px 0 4px; } .llegar8__horas div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 6px 0; border-bottom: 1px solid var(--hilo); } .llegar8__horas div:last-child { border-bottom: 0; } .llegar8__horas dt { font-size: 15px; color: var(--crema-2); } .llegar8__horas dt em { margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--oro); color: #16110b; font: 600 11px/1 var(--f-texto); font-style: normal; letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; } .llegar8__horas dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--crema); font-variant-numeric: tabular-nums; } .llegar8__horas .hoy dt { color: var(--crema); font-weight: 600; } .llegar8__estado { font-size: 13.5px; color: var(--crema-2); } .llegar8__botones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } @media (max-width: 900px) { .llegar8__cuerpo { grid-template-columns: 1fr; } .llegar8__datos { order: -1; } .llegar8__mapa { min-height: 320px; } } @media (max-width: 560px) { .llegar8 .encabezado .btn { width: 100%; } .llegar8__dato { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 16px; } .llegar8__ico { width: 42px; height: 42px; border-radius: 12px; } .llegar8__foto { width: 118px; left: 10px; bottom: 10px; border-width: 3px; } .llegar8__botones .btn { flex: 1 1 auto; } } /* ─── /servicios: cada categoría con su icono y cada servicio como tarjeta con foto ─── */ .scat .encabezado { margin-bottom: clamp(26px, 3.2vw, 46px); } .scat__cab h2 { display: flex; align-items: center; gap: 16px; } .scat__ico { display: grid; place-items: center; flex: none; width: clamp(48px, 4vw, 62px); aspect-ratio: 1; border-radius: 16px; background: linear-gradient(150deg, var(--oro-claro), var(--oro-hondo)); color: #16110b; } .scat__ico svg { width: 55%; height: 55%; } .scards { list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .scard { grid-column: span 2; position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-2); border: 1px solid var(--hilo); transition: transform .5s var(--curva), border-color .3s, box-shadow .5s; } .s-noche-2 .scard { background: var(--noche-3); } .scard:hover, .scard:focus-within { transform: translateY(-6px); border-color: rgba(227, 194, 122, .45); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); } .scard__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--noche-3); } .scard__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 62%); transition: transform 1.2s var(--curva); } /* 02-10: cada foto trae su encuadre (antes 50% 62% para todas: cortaba cabezas) */ .scard:hover .scard__foto img { transform: scale(1.06); } .scard__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 12, 10, 0) 58%, rgba(14, 12, 10, .55)); } .scard__estrella { position: absolute; top: 14px; left: 14px; z-index: 1; background: var(--oro); border-color: var(--oro); color: #16110b; } .scard__estrella svg { color: #16110b; } .scard__dur { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(14, 12, 10, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 13px/1 var(--f-texto); color: var(--crema); } .scard__dur svg { width: 15px; height: 15px; color: var(--oro-claro); } .scard__cuerpo { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; } .scard__cat { font: 600 11.5px/1 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--crema-3); } .scat .scard__cat { display: none; } /* en /servicios la categoría ya es el título de la sección */ .scard__nombre { font: 460 clamp(1.5rem, 1.2rem + .8vw, 2rem)/1.05 var(--f-display); color: var(--crema); transition: color .25s; } .scard__nombre a::after { content: ""; position: absolute; inset: 0; z-index: 0; } /* toda la tarjeta lleva a la ficha */ .scard__nombre a:focus-visible { outline: none; } .scard:has(.scard__nombre a:focus-visible) { outline: 2px solid var(--oro-claro); outline-offset: 3px; } .scard:hover .scard__nombre { color: var(--oro-claro); } .scard__txt { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--crema); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* 30-09: «que se vea qué servicio es cada uno» */ .scard__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--hilo); } .scard__precio { display: grid; gap: 3px; } .scard__precio b { font: 460 1.8rem/1 var(--f-display); color: var(--oro-claro); } .scard__precio small { font-size: 12.5px; color: var(--crema-3); } .scard__pie .btn { position: relative; z-index: 1; } /* Cuántas por fila según cuántas hay: 2 y 4 → de a dos; 5 → dos grandes y tres; 3 y 6 → de a tres */ @media (min-width: 1101px) { .scards:not(.scards--fila):has(> .scard:nth-child(2):last-child) > .scard, .scards:not(.scards--fila):has(> .scard:nth-child(4):last-child) > .scard, .scards:not(.scards--fila):has(> .scard:nth-child(5):last-child) > .scard:nth-child(-n+2) { grid-column: span 3; } .scards:not(.scards--fila):has(> .scard:nth-child(2):last-child) .scard__foto, .scards:not(.scards--fila):has(> .scard:nth-child(4):last-child) .scard__foto, .scards:not(.scards--fila):has(> .scard:nth-child(5):last-child) > .scard:nth-child(-n+2) .scard__foto { aspect-ratio: 16 / 9; } .scards > .scard:only-child { grid-column: 1 / -1; } } .scards--fila { grid-template-columns: repeat(4, minmax(0, 1fr)); } .scards--fila > .scard { grid-column: auto; } @media (max-width: 1100px) { .scards, .scards--fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } .scards > .scard { grid-column: auto; } } /* Celular: tarjetas de pie, con la foto arriba y la descripción a la vista (30-09: el cliente quiere que se entienda qué es cada servicio antes de entrar). */ @media (max-width: 640px) { .scards, .scards--fila { grid-template-columns: 1fr; gap: 16px; } .scard { border-radius: 18px; } .scard__foto { aspect-ratio: 16 / 9; } .scard__cuerpo { padding: 18px 18px 18px; gap: 8px; } .scard__nombre { font-size: 1.6rem; } .scard__txt { font-size: 15.5px; -webkit-line-clamp: 4; } .scard__precio b { font-size: 1.6rem; } .scard__pie .btn { min-height: 46px; padding: 0 18px; } } /* ─── Paquetes con FOTO (Caballeros · Damas · Parejas): /servicios y Gift Cards ─── */ .pfotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .pfoto { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(400px, 38vw, 560px); overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); transition: transform .5s var(--curva), box-shadow .5s; } .pfoto > picture > img, .pfoto > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); } .pfoto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 10, .05) 28%, rgba(14, 12, 10, .92) 86%); } .pfoto:hover, .pfoto:focus-within { transform: translateY(-6px); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); } .pfoto:hover img { transform: scale(1.06); } .pfoto__cuerpo { width: 100%; display: grid; gap: 8px; padding: clamp(22px, 2.4vw, 32px); } .pfoto__ico { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 6px; border-radius: 15px; background: rgba(14, 12, 10, .55); border: 1px solid rgba(227, 194, 122, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--oro-claro); } .pfoto__ico svg { width: 25px; height: 25px; } .pfoto__nombre { font: 460 clamp(2rem, 1.5rem + 1.4vw, 3rem)/1 var(--f-display); color: var(--crema); } .pfoto__nombre a::after { content: ""; position: absolute; inset: 0; z-index: 0; } .pfoto__nombre a:focus-visible { outline: none; } .pfoto:has(.pfoto__nombre a:focus-visible) { outline: 2px solid var(--oro-claro); outline-offset: 3px; } .pfoto__dato { margin: 0; font-size: 15.5px; color: var(--crema-2); } .pfoto__dato b { color: var(--oro-claro); font-weight: 600; } .pfoto__acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(243, 237, 227, .2); } .pfoto__acciones .btn { position: relative; z-index: 1; } @media (max-width: 800px) { .pfotos { grid-template-columns: 1fr; } .pfoto { min-height: 320px; } } /* ─── /experiencias: las tres puertas dicen qué son ─── */ .puertas .encabezado { margin-bottom: clamp(24px, 3vw, 40px); } .tri { align-items: end; justify-items: stretch; } .tri::before { background: linear-gradient(180deg, rgba(14, 12, 10, .12) 22%, rgba(14, 12, 10, .94) 84%); } .tri__tag { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(14, 12, 10, .6); border: 1px solid rgba(227, 194, 122, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 600 12px/1 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro); } .tri__tag svg { width: 17px; height: 17px; } .tri__info { display: grid; gap: 10px; width: 100%; padding: clamp(22px, 2.6vw, 36px); } .tri__info .tri__nombre { font: 460 clamp(2.3rem, 1.6rem + 2vw, 3.7rem)/.95 var(--f-display); } .tri__info .tri__bajada { max-width: 30ch; font-size: 15px; } .tri__datos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14.5px; color: var(--crema-2); } .tri__datos b { color: var(--oro-claro); font-weight: 600; } .tri__lista { display: flex; flex-wrap: wrap; gap: 6px; } .tri__lista i { padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(243, 237, 227, .24); background: rgba(14, 12, 10, .35); font-style: normal; font-size: 12.5px; color: var(--crema-2); } .tri__btn { justify-self: start; margin-top: 6px; } .tri:hover .tri__btn, .tri:focus-visible .tri__btn { background: var(--oro-claro); } @media (max-width: 860px) { .tri { min-height: 440px; } } /* ─── Pasos que se encienden al bajar (Paquetes · «Cómo funcionan») ─── */ .pasos8 { list-style: none; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 36px); margin-top: clamp(8px, 1.6vw, 20px); } .pasos8::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 35px; height: 2px; background: linear-gradient(90deg, var(--oro-hondo), var(--oro-claro), var(--oro-hondo)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--curva) .3s; } .pasos8.visible::before, html:not(.js) .pasos8::before { transform: none; } .paso8 { position: relative; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 0 6px; text-align: center; } .paso8__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 20px; color: #16110b; background: linear-gradient(150deg, var(--oro-claro), var(--oro) 60%, var(--oro-hondo)); box-shadow: 0 0 0 10px var(--noche-2), 0 20px 40px -16px rgba(201, 162, 75, .5); transition: transform .5s var(--curva); } .paso8:hover .paso8__ico { transform: translateY(-4px) rotate(-4deg); } .paso8__ico svg { width: 32px; height: 32px; } .paso8__num { font: italic 400 16px/1 var(--f-display); color: var(--oro-claro); } .paso8 b { font: 460 clamp(1.45rem, 1.2rem + .7vw, 1.95rem)/1.1 var(--f-display); color: var(--crema); } .paso8__txt { max-width: 24ch; font-size: 16.5px; line-height: 1.5; color: var(--crema-2); } .pasos8__acciones { justify-content: center; margin-top: clamp(40px, 5vw, 64px); } @media (max-width: 860px) { .pasos8 { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin-inline: auto; } .pasos8::before { left: 31px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; background: linear-gradient(180deg, var(--oro-claro), var(--oro-hondo)); transform: scaleY(0); transform-origin: top; } .pasos8.visible::before, html:not(.js) .pasos8::before { transform: none; } .paso8 { grid-template-columns: 64px minmax(0, 1fr); justify-items: start; column-gap: 18px; row-gap: 4px; padding: 0; text-align: left; } .paso8__ico { grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; border-radius: 18px; } .paso8__num, .paso8 b, .paso8__txt { grid-column: 2; } .paso8__txt { max-width: none; } .pasos8__acciones .btn { flex: 1 1 100%; } } /* ─── Ambientes: cada uno con su foto GRANDE y entera, y una de apoyo encima ─── */ .ambs { display: grid; gap: clamp(90px, 11vw, 170px); } .amb { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(40px, 6vw, 110px); align-items: center; } .amb:nth-child(even) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } /* la foto siempre en la columna ancha */ .amb:nth-child(even) .amb__fotos { order: 2; } .amb__fotos { position: relative; } .amb--doble .amb__fotos { padding-bottom: 7%; } .amb__principal { position: relative; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 28px; background: var(--noche-3); cursor: zoom-in; box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); } .amb__principal--h { aspect-ratio: 4 / 3; } .amb__principal img, .amb__extra img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--curva); } .amb__principal:hover img { transform: scale(1.04); } .amb__zoom { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(14, 12, 10, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--crema); opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s var(--curva); } .amb__zoom svg { width: 20px; height: 20px; } .amb__principal:hover .amb__zoom, .amb__principal:focus-visible .amb__zoom { opacity: 1; transform: none; } @media (hover: none) { .amb__zoom { opacity: 1; transform: none; } } .amb__extra { position: absolute; right: -4%; bottom: 0; z-index: 2; width: 34%; aspect-ratio: 3 / 4; margin: 0; overflow: hidden; border-radius: 20px; border: 6px solid var(--noche); background: var(--noche-3); cursor: zoom-in; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); } .amb:nth-child(even) .amb__extra { right: auto; left: -4%; } .amb__extra:hover img { transform: scale(1.06); } .amb__txt { display: grid; gap: 16px; justify-items: start; } .amb__num { margin-bottom: -8px; font: italic 400 clamp(4rem, 7vw, 7rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--oro); } .amb__txt h2 { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.8rem); } .amb__txt .amb__lema { margin: -4px 0 0; font: 460 clamp(1.2rem, 1rem + .7vw, 1.6rem)/1.3 var(--f-display); color: var(--oro-claro); } .amb__txt p { margin: 0; font-size: 16.5px; color: var(--crema-2); } .amb__txt strong { color: var(--crema); font-weight: 600; } @media (max-width: 900px) { .amb, .amb:nth-child(even) { grid-template-columns: 1fr; gap: 28px; } .amb:nth-child(even) .amb__fotos { order: 0; } .amb__principal { aspect-ratio: 1 / 1.08; border-radius: 22px; } .amb__principal--h { aspect-ratio: 4 / 3; } .amb--doble .amb__fotos { padding-bottom: 14%; } .amb__extra, .amb:nth-child(even) .amb__extra { left: auto; right: 12px; width: 36%; border-width: 4px; border-radius: 16px; } .amb__num { font-size: 3.4rem; } } /* Promociones · portada (30-09): una foto grande con la promoción destacada encima */ .cab--cartel { padding-top: calc(var(--cab-h) + clamp(14px, 2.4vh, 30px)); } .cab--cartel .cab__cuerpo { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 90px); } .cab--cartel h1 { font-size: clamp(2.8rem, 1.6rem + 3.4vw, 5.4rem); } .cartel { position: relative; padding: 0 0 34px 34px; } .cartel__foto { position: relative; margin: 0; aspect-ratio: 1 / .95; max-height: min(640px, 72svh); width: 100%; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); animation: asomar 1.2s var(--curva) both .05s; } .cartel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 45%); animation: acercar 14s ease-out both; } .cartel__promo { position: absolute; left: 0; bottom: 0; z-index: 2; display: flex; align-items: stretch; width: min(420px, 90%); overflow: hidden; border-radius: 18px; background: rgba(24, 19, 15, .9); border: 1px solid rgba(227, 194, 122, .4); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); animation: subir 1s var(--curva) both .4s; transition: transform .4s var(--curva), border-color .3s; } .cartel__promo:hover { transform: translateY(-4px); border-color: var(--oro); } .cartel__sello { display: grid; place-content: center; justify-items: center; gap: 3px; flex: 0 0 96px; padding: 12px 8px; color: #1a1208; text-align: center; background: radial-gradient(circle at 70% 0%, rgba(255, 246, 222, .6), transparent 45%), linear-gradient(180deg, var(--oro-claro), var(--oro) 70%, var(--oro-hondo)); } .cartel__sello b { font: 500 2rem/.85 var(--f-display); } .cartel__sello small { font: 700 10.5px/1.15 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; } .cartel__txt { display: grid; gap: 5px; align-content: center; padding: 16px 18px; } .cartel__txt small { font: 600 11px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro-claro); } .cartel__txt b { font: 460 1.3rem/1.12 var(--f-display); color: var(--crema); } .cartel__txt span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--crema-2); } .cartel__txt span svg { width: 14px; height: 14px; color: var(--oro); } @media (prefers-reduced-motion: reduce) { .cartel__foto img { animation: none; } } @media (max-width: 900px) { .cab--cartel { padding-top: var(--cab-h); } .cab--cartel .cab__cuerpo { grid-template-columns: 1fr; gap: 26px; } .cartel { order: -1; margin-inline: calc(var(--canal) * -1); padding: 0 0 26px; } .cartel__foto { aspect-ratio: auto; height: clamp(260px, 48svh, 460px); max-height: none; border-radius: 0 0 var(--r-foto) var(--r-foto); box-shadow: none; } .cartel__promo { left: var(--canal); right: var(--canal); width: auto; } .cab--cartel h1 { font-size: clamp(2.4rem, 9.6vw, 3.6rem); } } /* Ambientes · portada (30-09): el texto arriba y la tira con los seis ambientes */ .cab--galeria { padding-top: calc(var(--cab-h) + clamp(18px, 3vh, 40px)); padding-bottom: clamp(50px, 6vw, 90px); } .cab-gal__cab { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px clamp(32px, 5vw, 90px); align-items: end; margin-bottom: clamp(26px, 3.4vw, 44px); } .cab--galeria h1 { font-size: clamp(2.8rem, 1.6rem + 3.4vw, 5.4rem); } .cab-gal__intro { display: grid; gap: 22px; } .cab-gal__tira { list-style: none; display: flex; gap: 10px; height: clamp(280px, 40vh, 420px); } .cab-gal__tira li { flex: 1 1 0; min-width: 0; transition: flex-grow .8s var(--curva); } .cab-gal__tira:hover li { flex-grow: .8; } .cab-gal__tira li:hover, .cab-gal__tira li:focus-within { flex-grow: 1.8; } .cab-gal__item { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: 100%; overflow: hidden; border-radius: 18px; background: var(--noche-3); } .cab-gal__item > picture > img, .cab-gal__item > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .cab-gal__item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 10, 0) 45%, rgba(14, 12, 10, .9)); } .cab-gal__item:hover img { transform: scale(1.06); } .cab-gal__nom { display: grid; gap: 4px; padding: 14px 14px 16px; font: 460 clamp(1rem, .85rem + .4vw, 1.25rem)/1.15 var(--f-display); color: var(--crema); } .cab-gal__nom i { font: italic 400 14px/1 var(--f-display); color: var(--oro-claro); } .cab-gal__item:focus-visible { outline: 2px solid var(--oro-claro); outline-offset: 3px; } .amb { scroll-margin-top: calc(var(--cab-h) + 20px); } .amb__mas summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-weight: 600; font-size: 14.5px; color: var(--oro-claro); } .amb__mas summary::-webkit-details-marker { display: none; } .amb__mas summary svg { width: 15px; height: 15px; transition: transform .3s var(--curva); } .amb__mas[open] summary { margin-bottom: 12px; } .amb__mas[open] summary svg { transform: rotate(180deg); } .amb__mas p + p { margin-top: 12px; } @media (max-width: 900px) { .cab-gal__cab { grid-template-columns: 1fr; } .cab--galeria h1 { font-size: clamp(2.4rem, 9.6vw, 3.6rem); } .cab-gal__intro .botones .btn { flex: 1 1 100%; } /* 05-10 · Johnny: «las cajitas de los vínculos no se ven bien en celular». La tira se deslizaba: la segunda tarjeta quedaba cortada en el borde con el nombre partido, y el nombre con su degradado tapaba la mitad de abajo de cada foto, justo donde están las camillas, los pies en el agua o el sillón (cinco de las seis fotos son verticales). Ahora es una grilla con las seis tarjetas enteras: la foto casi completa (4:5) y el nombre debajo, sin nada encima. */ .cab-gal__tira { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; height: auto; } .cab-gal__tira li, .cab-gal__tira:hover li, .cab-gal__tira li:hover, .cab-gal__tira li:focus-within { flex: none; } .cab-gal__item { display: grid; align-content: start; gap: 10px; height: auto; overflow: visible; border-radius: 0; background: none; } .cab-gal__item::before { content: none; } .cab-gal__item > picture { position: relative; z-index: 0; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; background: var(--noche-3); } .cab-gal__item > picture > img { z-index: auto; } .cab-gal__item:hover img { transform: none; } .cab-gal__nom { gap: 3px; padding: 0 2px; font-size: 16px; line-height: 1.2; } .cab-gal__nom i { font-size: 13.5px; } /* El recorrido en el celular: foto a todo el ancho, sin el número gigante y con menos aire */ .ambs { gap: 64px; } .amb__fotos { margin-inline: calc(var(--canal) * -1); } .amb__principal { border-radius: 0; aspect-ratio: 1 / 1.05; box-shadow: none; } .amb__principal--h { aspect-ratio: 4 / 3; } .amb--doble .amb__fotos { padding-bottom: 12%; } .amb__extra, .amb:nth-child(even) .amb__extra { right: var(--canal); width: 34%; } .amb__num { display: none; } .amb__txt { gap: 12px; } .amb__txt h2 { font-size: clamp(2rem, 8.4vw, 2.6rem); } .amb__txt .amb__lema { font-size: 1.15rem; } .amb__txt p { font-size: 16px; } } /* En el celular, dos por fila (tres en la tableta) */ @media (max-width: 599px) { .cab-gal__tira { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; } } /* ─── Gift Cards: la portada ya no queda vacía a los costados ─── */ .cab--regalo { isolation: isolate; } .cab--regalo > .contenedor { position: relative; z-index: 1; } .regalo-lado { position: absolute; z-index: 0; top: calc(var(--cab-h) + 24px); bottom: 36px; width: clamp(220px, 21vw, 380px); margin: 0; overflow: hidden; border-radius: 28px; } .regalo-lado img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .regalo-lado::after { content: ""; position: absolute; inset: 0; } .regalo-lado--izq { left: max(20px, calc((100vw - 1600px) / 2)); } .regalo-lado--der { right: max(20px, calc((100vw - 1600px) / 2)); } .regalo-lado--izq::after { background: linear-gradient(90deg, rgba(14, 12, 10, .05), rgba(14, 12, 10, .4) 64%, var(--noche)); } .regalo-lado--der::after { background: linear-gradient(270deg, rgba(14, 12, 10, .05), rgba(14, 12, 10, .4) 64%, var(--noche)); } /* Pantallas angostas: no hay costados; la foto de la izquierda pasa a ser una franja arriba */ @media (max-width: 1279px) { .cab--regalo { padding-top: 0; } .regalo-lado--der { display: none; } .regalo-lado--izq { position: relative; top: auto; bottom: auto; left: auto; display: block; width: auto; height: clamp(200px, 34svh, 360px); margin: var(--cab-h) 0 clamp(18px, 3vw, 30px); border-radius: 0 0 var(--r-foto) var(--r-foto); } .regalo-lado--izq img { object-position: var(--foco, 50% 40%); } .regalo-lado--izq::after { background: linear-gradient(180deg, rgba(14, 12, 10, 0) 45%, rgba(14, 12, 10, .85)); } } /* Texto al lado de una foto grande («Cómo funciona» de Gift Cards) */ .foto-lado { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 110px); align-items: center; } .foto-lado__foto { position: relative; margin: 0; aspect-ratio: 1 / 1.05; max-height: 680px; overflow: hidden; border-radius: 28px; background: var(--noche-3); box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); } .foto-lado__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%); } .foto-lado__txt { display: grid; gap: 24px; justify-items: start; } .foto-lado__txt .collar-v { font-size: 17px; } @media (max-width: 900px) { .foto-lado { grid-template-columns: 1fr; gap: 30px; } .foto-lado__foto { aspect-ratio: 4 / 3; } .foto-lado__txt .botones .btn { flex: 1 1 100%; } } /* ─── Convenios: beneficios con foto y la solicitud en oscuro ─── */ .bfotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); } .bfoto { position: relative; display: grid; align-content: start; gap: 12px; padding-bottom: 26px; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-2); border: 1px solid var(--hilo); transition: transform .5s var(--curva), border-color .3s; } .bfoto:hover { transform: translateY(-5px); border-color: rgba(227, 194, 122, .45); } .bfoto__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 18px; background: var(--noche-3); } .bfoto__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .bfoto:hover .bfoto__foto img { transform: scale(1.06); } .bfoto__ico { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin: -46px 0 0 22px; border-radius: 16px; background: linear-gradient(150deg, var(--oro-claro), var(--oro-hondo)); color: #16110b; box-shadow: 0 0 0 6px var(--noche-2); } .bfoto__ico svg { width: 25px; height: 25px; } .bfoto h3 { padding-inline: 22px; font-size: 1.55rem; } .bfoto p { margin: 0; padding-inline: 22px; font-size: 15px; color: var(--crema-2); } @media (max-width: 1100px) { .bfotos { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .bfotos { grid-template-columns: 1fr; } .bfoto__foto { aspect-ratio: 16 / 9; } } .solicitud { align-items: center; } .solicitud .credencial-escena { position: relative; display: block; justify-items: stretch; margin-top: 34px; padding: 0 0 16%; } .solicitud .credencial-escena::before { display: none; } .solicitud__foto { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); } .solicitud__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 62% 50%); } .solicitud .credencial { position: absolute; right: 5%; bottom: 0; width: min(34%, 170px); padding: 30px 10px 14px; gap: 6px; transform: rotate(-5deg); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .9); } .solicitud .credencial img { width: 40px; height: 40px; } .solicitud .credencial small { font-size: 9.5px; letter-spacing: .16em; } .solicitud .credencial .tu-empresa { font-size: 1.05rem; } .solicitud .credencial .chips { gap: 4px; } .solicitud .credencial .chip { padding: 4px 7px; font-size: 10px; } .solicitud form { padding: clamp(24px, 3vw, 40px); border-radius: var(--r-foto); background: var(--noche); border: 1px solid var(--hilo); } .solicitud .control { background: var(--noche-2); } @media (max-width: 900px) { .solicitud .credencial-escena { max-width: none; } } /* ══════════════════ 33. RONDA DEL 30-09: NOSOTROS, PREGUNTAS FRECUENTES Y CONTACTO ══════════════════ Pedido del cliente: Nosotros «que se note que es nosotros» (portada propia), las preguntas «muy esparcidas», Contacto «más visual, con imágenes». Cada página con su propia portada. */ /* ─── Nosotros: la entrada con su logo, el manifiesto y los datos del local ─── */ .cab--nos { padding-top: calc(var(--cab-h) + clamp(14px, 2.4vh, 30px)); padding-bottom: clamp(40px, 5vw, 70px); } .cab--nos .cab__cuerpo { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 90px); } .cab--nos h1 { font-size: clamp(2.8rem, 1.5rem + 3.6vw, 5.6rem); } .cab--nos h1 em { display: block; } .cab-nos__manifiesto { margin: 0; max-width: 30ch; font: 400 clamp(1.4rem, 1.1rem + .9vw, 2rem)/1.3 var(--f-display); color: var(--crema); } .cab-nos__manifiesto em { font-style: italic; color: var(--oro-claro); } .nos-datos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 6px; border-block: 1px solid var(--hilo); } .nos-datos li { display: grid; gap: 4px; justify-items: start; padding: 16px 12px; border-left: 1px solid var(--hilo); } .nos-datos li:first-child { border-left: 0; padding-left: 0; } .nos-datos b { font: 460 clamp(1.8rem, 1.4rem + 1vw, 2.6rem)/1 var(--f-display); color: var(--oro-claro); } .nos-datos b svg { width: 30px; height: 30px; } .nos-datos span { font-size: 13px; color: var(--crema-3); } .cab-nos__fotos { position: relative; padding: 0 0 60px 60px; animation: aparecer 1.1s ease both .1s; } .cab-nos__f1 { position: relative; margin: 0; aspect-ratio: .82; max-height: min(700px, 76svh); width: 100%; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); } .cab-nos__f1 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 30%); animation: acercar 14s ease-out both; } .cab-nos__f2 { position: absolute; left: 0; bottom: 0; z-index: 2; width: 46%; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: 18px; border: 6px solid var(--noche); background: var(--noche-3); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .85); } .cab-nos__f2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 60% 50%); } .cab-nos__logo { position: absolute; right: 22px; top: 22px; z-index: 2; display: grid; place-items: center; width: clamp(72px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--noche); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .9); } .cab-nos__logo img { width: 88%; height: 88%; } .nos-indice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(28px, 4vw, 48px); } .nos-indice a { display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--hilo-fuerte); font-size: 14.5px; color: var(--crema-2); transition: border-color .25s, color .25s, background-color .25s; } .nos-indice a:hover { border-color: var(--oro); color: var(--crema); background: rgba(201, 162, 75, .06); } .nos-indice i { font: italic 400 15px/1 var(--f-display); color: var(--oro-claro); } .relato--rect { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } .relato--rect .relato__foto { position: relative; justify-self: stretch; width: 100%; aspect-ratio: 4 / 5; max-height: 680px; margin: 0; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); } .relato--rect .relato__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nos-espacios { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 5vw, 64px); } .nos-espacios a { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 18px; background: var(--noche-3); } .nos-espacios a > picture > img, .nos-espacios a > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .nos-espacios a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 10, 0) 45%, rgba(14, 12, 10, .9)); } .nos-espacios a:hover img { transform: scale(1.06); } .nos-espacios span { padding: 14px; font: 460 1.1rem/1.15 var(--f-display); color: var(--crema); } .reglas8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); } .regla8 { position: relative; display: grid; align-content: start; gap: 12px; padding: 28px 24px; border-radius: 20px; background: var(--noche-3); border: 1px solid var(--hilo); overflow: hidden; } .regla8__ico { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(150deg, var(--oro-claro), var(--oro-hondo)); color: #16110b; } .regla8__ico svg { width: 25px; height: 25px; } .regla8__num { position: absolute; right: 20px; top: 14px; font: italic 400 3rem/1 var(--f-display); color: rgba(227, 194, 122, .2); } .regla8__num::before { content: attr(data-n); } /* decorativo: va en el pseudo-elemento, no es texto */ .regla8 h3 { font-size: 1.6rem; } .regla8 p { margin: 0; font-size: 15.5px; color: var(--crema-2); } @media (max-width: 1100px) { .reglas8 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nos-espacios { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .cab--nos { padding-top: calc(var(--cab-h) + 16px); } .cab--nos .cab__cuerpo { grid-template-columns: 1fr; } .cab-nos__fotos { order: -1; padding: 0 0 44px 36px; } .cab-nos__f1 { aspect-ratio: 4 / 3.6; max-height: none; } .relato--rect { grid-template-columns: 1fr; } .relato--rect .relato__foto { order: -1; aspect-ratio: 4 / 3.4; } } @media (max-width: 560px) { .nos-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nos-datos li:nth-child(3) { border-left: 0; padding-left: 0; } .nos-datos li:nth-child(n+3) { border-top: 1px solid var(--hilo); } .nos-indice { flex-wrap: nowrap; margin-inline: calc(var(--canal) * -1); padding-inline: var(--canal); overflow-x: auto; scrollbar-width: none; } .nos-indice a { flex: none; } .nos-espacios { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nos-espacios li:last-child { grid-column: 1 / -1; } .nos-espacios li:last-child a { aspect-ratio: 16 / 9; } .reglas8 { grid-template-columns: 1fr; } } /* ─── Preguntas frecuentes: portada compacta, temas arriba y tarjetas por tema ─── */ .cab--faq { padding-top: calc(var(--cab-h) + clamp(14px, 2.4vh, 30px)); padding-bottom: clamp(30px, 4vw, 56px); } .cab--faq .cab__cuerpo { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); } .cab--faq h1 { font-size: clamp(2.6rem, 1.5rem + 3vw, 4.8rem); } .cab-faq__foto { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); animation: asomar 1.2s var(--curva) both .05s; } .cab-faq__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 60% 50%); } .faq-temas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3.4vw, 44px); } .faq-temas a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--hilo-fuerte); font-size: 14.5px; color: var(--crema-2); transition: border-color .25s, color .25s, background-color .25s; } .faq-temas a:hover { border-color: var(--oro); color: var(--crema); background: rgba(201, 162, 75, .06); } .faq-temas svg { width: 17px; height: 17px; color: var(--oro); } .faq-temas small { padding: 2px 7px; border-radius: 99px; background: rgba(243, 237, 227, .1); font-size: 12px; } .faq8-seccion { padding-block: clamp(50px, 6vw, 90px); } .faq8 { columns: 2; column-gap: clamp(16px, 2.4vw, 32px); } .faq8__grupo { break-inside: avoid; display: grid; gap: 6px; margin-bottom: clamp(16px, 2.4vw, 32px); padding: 22px 24px 10px; border-radius: 20px; background: var(--noche-3); border: 1px solid var(--hilo); scroll-margin-top: calc(var(--cab-h) + 20px); } .faq8__grupo h2 { display: flex; align-items: center; gap: 12px; font-size: clamp(1.45rem, 1.2rem + .7vw, 1.9rem); padding-bottom: 8px; } .faq8__ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(150deg, var(--oro-claro), var(--oro-hondo)); color: #16110b; } .faq8__ico svg { width: 20px; height: 20px; } .faq8 .faq { border-top: 1px solid var(--hilo); } .faq8 .faq-item:last-child { border-bottom: 0; } .faq8 .faq-pregunta { padding: 15px 0; gap: 16px; font: 600 16px/1.35 var(--f-texto); } .faq8 .faq-pregunta .signo { width: 28px; height: 28px; } .faq8 .faq-pregunta .signo::before, .faq8 .faq-pregunta .signo::after { width: 10px; margin-left: -5px; } .faq8 .faq-respuesta p { padding: 0 40px 16px 0; font-size: 15px; line-height: 1.6; } @media (max-width: 900px) { .cab--faq .cab__cuerpo { grid-template-columns: 1fr; } .cab-faq__foto { order: -1; aspect-ratio: 16 / 9; } .faq8 { columns: 1; } } @media (max-width: 560px) { .faq-temas { flex-wrap: nowrap; margin-inline: calc(var(--canal) * -1); padding-inline: var(--canal); overflow-x: auto; scrollbar-width: none; } .faq-temas a { flex: none; } .faq8__grupo { padding: 18px 16px 6px; } .faq8 .faq-respuesta p { padding-right: 0; } } /* ─── Contacto: la conversación sobre la foto, accesos con foto y el horario en tarjeta ─── */ .cab--contacto { padding-top: calc(var(--cab-h) + clamp(14px, 2.4vh, 30px)); } .cab--contacto .cab__cuerpo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 90px); } .cab--contacto h1 { font-size: clamp(2.8rem, 1.5rem + 3.4vw, 5.2rem); } .contacto-visual { position: relative; padding: 0 0 40px 70px; } .contacto-visual__foto { position: relative; margin: 0; aspect-ratio: .86; max-height: min(680px, 76svh); width: 100%; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .95); animation: asomar 1.2s var(--curva) both .05s; } .contacto-visual__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 35%); animation: acercar 14s ease-out both; } .contacto-visual .chat { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(340px, 78%); padding: 14px 12px 14px; border-radius: 26px; box-shadow: 0 40px 70px -24px rgba(0, 0, 0, .95); animation: subir 1s var(--curva) both .4s; } .contacto-visual .chat .burbuja { font-size: 13.5px; } .accesos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); } .acceso { position: relative; isolation: isolate; display: grid; align-content: end; justify-items: start; gap: 4px; min-height: clamp(220px, 22vw, 300px); padding: 22px; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); transition: transform .5s var(--curva); } .acceso > picture > img, .acceso > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .acceso::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 10, .1) 20%, rgba(14, 12, 10, .92)); } .acceso:hover { transform: translateY(-5px); } .acceso:hover img { transform: scale(1.06); } .acceso__ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 13px; background: linear-gradient(150deg, var(--oro-claro), var(--oro-hondo)); color: #16110b; } .acceso__ico svg { width: 22px; height: 22px; } .acceso b { font: 460 1.7rem/1.05 var(--f-display); color: var(--crema); } .acceso > span:last-child { font-size: 14px; color: var(--crema-2); } .contacto-horario { padding: 16px 20px 10px; border-radius: 18px; background: var(--noche-3); border: 1px solid var(--hilo); } .contacto-horario > p { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 600 12px/1.2 var(--f-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-claro); } .contacto-horario > p svg { width: 17px; height: 17px; } .contacto-form { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-foto); background: var(--noche); border: 1px solid var(--hilo); } .contacto-mapa { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 24px); } .contacto-dentro { list-style: none; display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 12px; } .contacto-dentro a { position: relative; isolation: isolate; display: flex; align-items: flex-end; height: 100%; min-height: 140px; overflow: hidden; border-radius: 16px; background: var(--noche-3); } .contacto-dentro a > picture > img, .contacto-dentro a > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .contacto-dentro a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(14, 12, 10, .85), rgba(14, 12, 10, 0) 70%); } .contacto-dentro a:hover img { transform: scale(1.06); } .contacto-dentro span { padding: 14px 16px; font: 460 1.25rem/1.1 var(--f-display); color: var(--crema); } @media (max-width: 900px) { .cab--contacto .cab__cuerpo { grid-template-columns: 1fr; } .contacto-visual { padding: 0 0 30px 0; } .contacto-visual__foto { aspect-ratio: 4 / 3.4; max-height: none; } .contacto-visual .chat { position: relative; left: auto; bottom: auto; width: min(340px, 92%); margin: -110px auto 0; } .accesos { grid-template-columns: 1fr; } .acceso { min-height: 170px; } .contacto-mapa { grid-template-columns: 1fr; } .contacto-dentro { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); } .contacto-dentro a { min-height: 120px; } .contacto-dentro a::before { background: linear-gradient(180deg, rgba(14, 12, 10, 0) 40%, rgba(14, 12, 10, .9)); } .contacto-dentro span { padding: 10px; font-size: 1rem; } } /* ══════════════════ 34. RESERVAR PARA TODOS (30-09-2026): LANZAMIENTO ══════════════════ Pedido: «ponte en el lugar de una persona de edad queriendo reservar, no tiene que ser difícil». Primero la categoría en grande (con foto), cada servicio dice «Elegir» con palabras, «Paso N de 3», la hora elegida se confirma en una frase, «Revisa tu reserva» antes de enviar, letra más grande y un teléfono en cada paso. */ .rv-panel__paso { font: 600 12.5px/1.2 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); } /* Paso 1 · las categorías en grande */ .rv-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .rv-tema { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; padding: 0; text-align: left; color: var(--crema); cursor: pointer; background: var(--noche-2); border: 1px solid var(--hilo); border-radius: 20px; transition: border-color .25s, transform .35s var(--curva), box-shadow .35s; } .rv-tema:focus-visible { border-color: var(--oro); } @media (hover: hover) { .rv-tema:hover { border-color: var(--oro); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); } } .rv-tema picture { display: block; aspect-ratio: 2 / 1; overflow: hidden; } .rv-tema .rv-tema__foto { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--curva); } .rv-tema:hover .rv-tema__foto { transform: scale(1.05); } .rv-tema__txt { display: grid; align-content: start; gap: 6px; padding: 16px 64px 18px 18px; } .rv-tema__txt > b { font: 460 1.6rem/1.08 var(--f-display); } .rv-tema__txt small { font-size: 15px; line-height: 1.4; color: var(--crema-2); } .rv-tema__meta { font-size: 14.5px; color: var(--crema-3); } .rv-tema__meta b { font: 600 15px/1 var(--f-texto); color: var(--oro-claro); } .rv-tema__ir { position: absolute; right: 16px; bottom: 18px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--oro); color: #16110b; transition: transform .3s var(--curva); } .rv-tema:hover .rv-tema__ir { transform: translateX(3px); } .rv-tema__ir svg { width: 20px; height: 20px; } .rv-tema--ancho { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto; } .rv-tema--ancho picture { aspect-ratio: auto; height: 230px; } .rv-tema--ancho .rv-tema__txt { align-content: center; } .rv-temas__todos { grid-column: 1 / -1; justify-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 18px; border: 0; background: none; color: var(--oro-claro); font: 600 15.5px/1.2 var(--f-texto); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .rv-temas__todos svg { width: 18px; height: 18px; } /* Paso 1 · dentro de una categoría: cómo volver */ .rv-catalogo__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; } .rv-volver { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 10px; border: 1px solid var(--hilo-fuerte); border-radius: 999px; background: var(--noche-2); color: var(--crema); font: 600 15px/1 var(--f-texto); cursor: pointer; transition: border-color .2s; } .rv-volver:hover { border-color: var(--oro); } .rv-volver svg { width: 18px; height: 18px; color: var(--oro); } .rv-catalogo__cab p { margin: 0; font: 460 1.45rem/1.1 var(--f-display); color: var(--crema); } /* Paso 1 · cada servicio dice «Elegir» con palabras (antes: un «+» chico en la foto) */ .rv-serv { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 8px; } .rv-serv__foto { grid-row: 1 / 3; } .rv-serv__txt { grid-row: 1 / 3; } .rv-serv__meta { grid-column: 3; grid-row: 1; } .rv-serv__foto::after { display: none; } .rv-serv__elegir { grid-column: 3; grid-row: 2; justify-self: end; } .rv-serv__elegir > span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; font: 600 14px/1 var(--f-texto); white-space: nowrap; } .rv-serv__elegir svg { width: 16px; height: 16px; } .rv-serv__no { border: 1px solid var(--oro); color: var(--oro-claro); transition: background-color .2s, color .2s; } @media (hover: hover) { .rv-serv:hover .rv-serv__no { background: var(--oro); color: #16110b; } } .rv-serv__si { display: none !important; background: var(--oro); color: #16110b; } .rv-serv[aria-pressed="true"] .rv-serv__no { display: none; } .rv-serv[aria-pressed="true"] .rv-serv__si { display: inline-flex !important; } /* Ayuda de persona a persona, al pie de cada paso */ .rv-ayuda { margin-top: 26px; padding: 14px 16px; border: 1px dashed var(--hilo-fuerte); border-radius: 16px; font-size: 15px; line-height: 1.5; } .rv-ayuda svg { flex: none; } .rv-ayuda a[href^="tel:"] { font-weight: 700; white-space: nowrap; } /* Paso 2 · «1 Elige el día», «2 Elige la hora» y la apertura */ .rv-sub { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font: 600 15.5px/1.2 var(--f-texto); color: var(--crema); } .rv-sub span { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--oro); color: #16110b; font: 460 15px/1 var(--f-display); } .rv-rapidos__t { display: none; } .rv-apertura { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; padding: 13px 16px; border: 1px solid var(--oro); border-radius: 14px; background: rgba(201, 162, 75, .08); font-size: 15px; color: var(--crema-2); } .rv-apertura svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--oro); } .rv-apertura b { color: var(--crema); } .rv-cal__t { display: none; margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--crema); } .rv-elegida { display: flex; gap: 12px; align-items: flex-start; margin-top: 16px; padding: 14px 16px; border-radius: 16px; background: rgba(124, 207, 149, .08); border: 1px solid rgba(124, 207, 149, .4); font-size: 15.5px; color: var(--crema); animation: rv-entra .35s var(--curva) both; } .rv-elegida svg { flex: none; width: 22px; height: 22px; color: var(--vivo); } .rv-elegida b { color: var(--crema); } .rv-elegida small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--crema-3); } /* Paso 3 · «Revisa tu reserva» (en el celular, donde no se ve el boleto) y letra más grande */ .rv-revisa { display: none; margin: 0 0 22px; padding: 16px 18px; border: 1px solid var(--hilo-fuerte); border-radius: 18px; background: var(--noche-2); } .rv-revisa__t { margin: 0 0 12px; font: 600 12.5px/1.2 var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--oro); } .rv-revisa dl { display: grid; gap: 9px; margin: 0; } .rv-revisa dl div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.35; } .rv-revisa dt { color: var(--crema-3); } .rv-revisa dd { margin: 0; color: var(--crema); font-weight: 600; } .rv-revisa dd small { font-weight: 400; color: var(--crema-3); } .rv-revisa__oro { color: var(--oro-claro); } .rv-revisa__acc { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hilo); } .rv-revisa__cambiar { min-height: 40px; padding: 0; border: 0; background: none; color: var(--oro-claro); font: 600 14.5px/1.2 var(--f-texto); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .pag-reservar .rv-form .control { min-height: 54px; font-size: 17px; } .pag-reservar .rv-form textarea.control { min-height: 96px; } .pag-reservar .rv-form .campo label, .pag-reservar .rv-etiqueta { font-size: 16px; } .pag-reservar .rv-form .pista, .pag-reservar .rv-form .msg-error { font-size: 14px; } .pag-reservar .rv-personas span { min-height: 56px; font-size: 16px; } /* ─── 30-09, 2.ª vuelta: sumar servicios se PREGUNTA y lo elegido se ve siempre ─── */ /* «Tu visita»: arriba del paso 1, con cada servicio, su «Quitar» y los dos caminos */ .rv-visita { margin: 0 0 20px; padding: 16px 18px 18px; border: 1.5px solid var(--oro); border-radius: 20px; background: linear-gradient(180deg, rgba(201, 162, 75, .12), rgba(201, 162, 75, .04)); animation: rv-entra .35s var(--curva) both; } .rv-visita__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .rv-visita__t { display: flex; align-items: center; gap: 8px; margin: 0; font: 460 1.35rem/1.1 var(--f-display); color: var(--crema); } .rv-visita__t svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--oro); color: #16110b; } .rv-visita__n { font-size: 14px; font-weight: 600; color: var(--oro-claro); white-space: nowrap; } .rv-visita__lista { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .rv-visita__lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hilo); } .rv-visita__num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--oro); font: 460 14px/1 var(--f-display); color: var(--oro-claro); } .rv-visita__nom { display: grid; gap: 2px; min-width: 0; } .rv-visita__nom b { font-size: 16px; font-weight: 600; color: var(--crema); } .rv-visita__nom small { font-size: 14px; color: var(--crema-3); } .rv-visita__quitar { min-height: 40px; padding: 0 12px; border: 1px solid var(--hilo-fuerte); border-radius: 999px; background: none; color: var(--crema-2); font: 600 14px/1 var(--f-texto); cursor: pointer; transition: border-color .2s, color .2s; } .rv-visita__quitar:hover { border-color: #e0795a; color: #f2a58c; } .rv-visita__total { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--hilo); font-size: 15px; color: var(--crema-2); } .rv-visita__total b { color: var(--crema); } .rv-visita__aviso { margin: 10px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(224, 121, 90, .12); border: 1px solid rgba(224, 121, 90, .45); font-size: 14.5px; color: var(--crema); } .rv-visita__acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .rv-visita__acc .btn svg { width: 18px; height: 18px; } /* Las categorías marcan lo que ya tienen elegido */ .rv-tema__elegido { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--oro); color: #16110b; font: 600 13px/1.2 var(--f-texto); } .rv-tema__elegido svg { width: 16px; height: 16px; } /* La pregunta al elegir: abajo en el celular, al centro en la computadora */ .rv-pregunta { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; } .rv-pregunta[hidden] { display: none; } .rv-pregunta__velo { position: absolute; inset: 0; background: rgba(8, 6, 5, .72); backdrop-filter: blur(3px); animation: rv-velo .2s ease both; } @keyframes rv-velo { from { opacity: 0; } } .rv-pregunta__caja { position: relative; width: min(100%, 520px); padding: 24px 24px 22px; border: 1px solid var(--hilo-fuerte); border-radius: 24px; background: var(--noche-2); box-shadow: 0 30px 70px rgba(0, 0, 0, .6); animation: rv-sube .3s var(--curva) both; } @keyframes rv-sube { from { opacity: 0; transform: translateY(24px); } } .rv-pregunta__ok { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgba(124, 207, 149, .1); border: 1px solid rgba(124, 207, 149, .4); font-size: 15.5px; color: var(--crema); } .rv-pregunta__ok svg { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--vivo); color: #0e2a17; } .rv-pregunta__ok b { font-weight: 600; } .rv-pregunta h2 { margin: 0 0 8px; font: 460 clamp(1.6rem, 1.3rem + 1vw, 1.95rem)/1.12 var(--f-display); color: var(--crema); } .rv-pregunta__caja > p:not(.rv-pregunta__ok) { margin: 0; font-size: 16px; color: var(--crema-2); } .rv-pregunta__acc { display: grid; gap: 10px; margin-top: 20px; } .rv-pregunta__acc .btn { width: 100%; min-height: 56px; font-size: 16px; } .rv-pregunta__acc .btn svg { width: 18px; height: 18px; } :root.rv-sin-scroll, :root.rv-sin-scroll body { overflow: hidden; } @media (max-width: 760px) { .rv-pregunta { place-items: end stretch; padding: 0; } .rv-pregunta__caja { width: 100%; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; border-bottom: 0; } .rv-visita { padding: 14px 14px 16px; } .rv-visita__acc .btn { flex: 1 1 100%; min-height: 52px; font-size: 16px; } } @media (prefers-reduced-motion: reduce) { .rv-pregunta__velo, .rv-pregunta__caja, .rv-visita { animation: none; } } @media (max-width: 999px) { .rv-revisa { display: block; } .rv-serv__elegir { grid-column: 2; grid-row: 3; justify-self: start; } .rv-barra p { font-size: 14px; } .rv-barra .btn { min-height: 52px; padding: 0 24px; font-size: 16px; } } @media (max-width: 760px) { /* Categorías: foto a la izquierda y texto grande a la derecha (entran cinco sin cansar) */ .rv-temas { grid-template-columns: minmax(0, 1fr); gap: 12px; } .rv-tema, .rv-tema--ancho { grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto; border-radius: 18px; } .rv-tema picture, .rv-tema--ancho picture { aspect-ratio: auto; min-height: 138px; height: 100%; } .rv-tema--ancho picture { height: 100%; } .rv-tema__txt { align-content: center; gap: 4px; padding: 14px 14px 52px 14px; } .rv-tema__txt > b { font-size: 1.4rem; } .rv-tema__txt small { font-size: 14px; } .rv-tema__meta { font-size: 13.5px; } .rv-tema__ir { right: 12px; bottom: 12px; width: 36px; height: 36px; } .rv-catalogo__cab p { font-size: 1.3rem; } /* con «Ver otras categorías» arriba, los filtros sobran: en el celular se van */ .rv-catalogo--temas .rv-filtros { display: none; } .rv-panel__cab p { font-size: 16px; } /* Servicios: nombre y precio grandes y un botón «Elegir» a todo el ancho */ .rv-serv { grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 10px; padding: 12px 14px 14px 12px; border-radius: 20px; } .rv-serv__foto { grid-row: 1 / 3; width: 64px; height: 64px; } .rv-serv__txt { grid-column: 2; grid-row: 1; } .rv-serv__txt b { font-size: 1.3rem; } .rv-serv__txt small { font-size: 14.5px; -webkit-line-clamp: 3; } .rv-serv__meta { grid-column: 2; grid-row: 2; } .rv-serv__precio { font-size: 1.2rem; } .rv-serv__dur { font-size: 14px; } .rv-serv__elegir { grid-column: 1 / -1; grid-row: 3; justify-self: stretch; } .rv-serv__elegir > span { width: 100%; min-height: 48px; font-size: 16px; } /* Paso 2: días y horas más grandes */ .rv-rapido small { font-size: 13px; } .rv-rapido b { font-size: 1.6rem; } .rv-horas__lista { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .rv-hora { min-height: 54px; font-size: 16px; } .rv-franja__t { font-size: 13.5px; } .rv-cal__t { display: block; } .rv-dia { font-size: 16px; } .rv-revisa dl div { grid-template-columns: 96px minmax(0, 1fr); } .rv-ayuda { font-size: 15.5px; } } /* ══════════════════ 35. PAQUETES DE UNA EXPERIENCIA (02-10): PORTADA DE FICHA Y BOLETOS ══════════════════ /experiencias/{caballeros|damas|parejas}. El 01-10 era una «vitrina» (la foto en arco y los paquetes en filas con flecha, que parecían desplegables). 02-10, Johnny: «está rara, no se entiende: la misma portada que todos los servicios, con los precios abajo y bien diseñada, con arte». La portada es la de las fichas (cabeza_inmersiva, §32). Aquí, los paquetes como BOLETOS con el lenguaje del «Tu reserva» de cada ficha (§19): las muescas y la línea de corte, el ritual paso a paso con perlas doradas y, abajo, en el talón, el precio y la reserva. */ /* 1. Los paquetes: boletos */ .boletos-sec { background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(201, 162, 75, .08), transparent 72%), var(--noche); } .boletos-sec__cab { display: grid; justify-items: center; gap: 12px; max-width: 780px; margin: 0 auto clamp(40px, 4.5vw, 64px); text-align: center; } .boletos-sec__cab h2 { font-size: var(--t-h2); } .boletos-sec__cab p { margin: 0; font-size: 17px; color: var(--crema-2); } .boletos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 34px); align-items: stretch; } .boleto-paq { position: relative; display: flex; flex-direction: column; scroll-margin-top: calc(var(--cab-h) + 24px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .5)); } /* La mitad de arriba (la foto, el nombre y el ritual) y el talón (el precio y la reserva): las muescas y la línea de corte caen siempre en la unión, como en el boleto de reserva de las fichas */ .boleto-paq__a { flex: 1; position: relative; display: flex; flex-direction: column; gap: 14px; overflow: hidden; padding: 0 26px 26px; border-radius: 12px 12px 0 0; background: var(--noche-3); -webkit-mask: radial-gradient(circle 16px at 0 100%, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 100%, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 16px at 0 100%, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 100%, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; } .boleto-paq__b { position: relative; display: grid; gap: 12px; padding: 24px 26px 26px; border-radius: 0 0 12px 12px; background: var(--noche-2); -webkit-mask: radial-gradient(circle 16px at 0 0, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 0, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; mask: radial-gradient(circle 16px at 0 0, #0000 15px, #000 16px) 0 0 / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 0, #0000 15px, #000 16px) 100% 0 / 51% 100% no-repeat; } .boleto-paq__b::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; border-top: 1.5px dashed var(--hilo-fuerte); } /* El recomendado: un hilo de oro que sigue la forma del boleto (con sus muescas) y un poco más arriba */ .boleto-paq--dest { filter: drop-shadow(0 0 .6px var(--oro-claro)) drop-shadow(0 0 .6px var(--oro-claro)) drop-shadow(0 30px 50px rgba(201, 162, 75, .2)); } .boleto-paq--dest .boleto-paq__a { background: linear-gradient(180deg, var(--noche-3), #211b14); } .boleto-paq__foto { position: relative; flex: none; margin: 0 -26px; aspect-ratio: 16 / 10; overflow: hidden; background: var(--noche); } .boleto-paq__foto picture, .boleto-paq__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .boleto-paq__foto img { transition: transform 1s var(--curva); } .boleto-paq__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14, 12, 10, .55)); pointer-events: none; } @media (hover: hover) { .boleto-paq:hover .boleto-paq__foto img { transform: scale(1.04); } } .boleto-paq__cinta { position: absolute; left: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--oro); color: #16110b; font: 600 12px/1 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; } .boleto-paq__cinta svg { width: 14px; height: 14px; } /* El número es una perla dorada que se apoya en el borde de la foto, como un sello */ .boleto-paq__cab { position: relative; display: grid; gap: 4px; padding: 2px 64px 0 0; } .boleto-paq__n { position: absolute; right: 0; top: -39px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6de 0 10%, var(--oro-claro) 40%, #8c6a26 100%); box-shadow: 0 0 0 5px var(--noche-3), 0 8px 18px rgba(0, 0, 0, .45); font: 460 22px/1 var(--f-display); color: #1a1208; } .boleto-paq--dest .boleto-paq__n { box-shadow: 0 0 0 5px #1d1812, 0 8px 18px rgba(0, 0, 0, .45); } .boleto-paq__orden { margin: 0; font: 600 12px/1.2 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--crema-3); } .boleto-paq__cab h3 { font-size: clamp(1.8rem, 1.4rem + .9vw, 2.3rem); line-height: 1.05; } .boleto-paq__resumen { margin: 0; font-size: 15.5px; color: var(--crema-2); } .boleto-paq__t { margin: 6px 0 0; font: 600 12px/1.2 var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--oro); } /* El ritual: perlas numeradas unidas por un hilo de oro, en el orden en que se hace */ .boleto-paq__pasos { position: relative; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: paso; } .boleto-paq__pasos::before { content: ""; position: absolute; left: 15.5px; top: 16px; bottom: 16px; width: 1px; background: linear-gradient(var(--oro), rgba(201, 162, 75, .2)); } .boleto-paq__pasos li { position: relative; display: grid; grid-template-columns: 32px 20px minmax(0, 1fr); align-items: center; gap: 12px; counter-increment: paso; font-size: 15.5px; line-height: 1.3; color: var(--crema); } .boleto-paq__pasos li::before { content: counter(paso); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6de 0 10%, var(--oro-claro) 40%, #8c6a26 100%); box-shadow: 0 0 0 4px var(--noche-3); font: 460 15px/1 var(--f-display); color: #1a1208; } .boleto-paq--dest .boleto-paq__pasos li::before { box-shadow: 0 0 0 4px #1e1913; } .boleto-paq__pasos svg { width: 20px; height: 20px; color: var(--oro-claro); } .boleto-paq__cortesia { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; padding: 11px 14px; border: 1px dashed rgba(227, 194, 122, .45); border-radius: 12px; font-size: 14.5px; color: var(--oro-claro); } .boleto-paq__cortesia svg { flex: none; width: 18px; height: 18px; } /* El talón: el precio grande, lo que se paga para separar y los botones */ .boleto-paq__precio { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 14px; margin: 0; } .boleto-paq__precio b { font: 460 clamp(2.4rem, 1.9rem + 1.1vw, 3rem)/.9 var(--f-display); color: var(--oro-claro); white-space: nowrap; } .boleto-paq__precio span { display: block; font-size: 14px; line-height: 1.45; color: var(--crema-2); text-align: right; } .boleto-paq__precio span svg { width: 15px; height: 15px; margin-right: 5px; vertical-align: -2px; color: var(--oro); } .boleto-paq__separa { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 13.5px; color: var(--crema-3); } .boleto-paq__separa svg { flex: none; width: 15px; height: 15px; color: var(--oro); } .boleto-paq__separa b { color: var(--crema); font-weight: 600; } .boleto-paq__b .btn { width: 100%; } .boleto-paq__frase { margin: 4px 0 0; text-align: center; font: italic 400 15.5px/1.3 var(--f-display); color: var(--crema-3); } .boletos-sec__suelto { margin: 44px 0 0; text-align: center; font-size: 15px; color: var(--crema-3); } @media (min-width: 1000px) { .boleto-paq--dest { top: -16px; } } /* 2. Tu momento */ .momento__marco { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 84px); align-items: center; } .momento__foto { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); box-shadow: var(--sombra); } .momento__foto picture, .momento__foto img { display: block; width: 100%; height: 100%; object-fit: cover; } .momento__txt { display: grid; gap: 16px; } .momento__txt h2 { font-size: clamp(2rem, 1.5rem + 1.8vw, 3.2rem); line-height: 1.05; } .momento__txt p { margin: 0; max-width: 56ch; font-size: 17px; color: var(--crema-2); } .momento__txt strong { color: var(--crema); font-weight: 600; } .momento__txt .botones { margin-top: 6px; } /* 3. También para: las otras dos, con foto */ .otras2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); } .otra2 { position: relative; isolation: isolate; display: grid; align-content: end; min-height: clamp(300px, 32vw, 440px); padding: clamp(20px, 2.4vw, 32px); overflow: hidden; border-radius: var(--r-foto); background: var(--noche-3); color: var(--crema); text-decoration: none; } .otra2 > picture > img, .otra2 > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); } .otra2::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(14, 12, 10, .05) 28%, rgba(14, 12, 10, .92)); } @media (hover: hover) { .otra2:hover > picture > img { transform: scale(1.05); } } .otra2__txt { display: grid; justify-items: start; gap: 6px; } .otra2__ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: linear-gradient(150deg, var(--oro-claro), var(--oro-hondo)); color: #16110b; } .otra2__ico svg { width: 22px; height: 22px; } .otra2__txt > b { font: 460 clamp(1.9rem, 1.4rem + 1.2vw, 2.6rem)/1.05 var(--f-display); } .otra2__txt > span:nth-of-type(2) { font-size: 15.5px; color: var(--crema-2); } .otra2__desde { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--oro-claro); } .otra2__desde b { font-weight: 700; } .otra2__desde svg { width: 18px; height: 18px; } @media (max-width: 999px) { /* En el celular y la tableta: un boleto debajo del otro, del esencial al más completo */ .boletos { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 28px; } .momento__marco { grid-template-columns: minmax(0, 1fr); } .momento__foto { aspect-ratio: 4 / 3; } } @media (max-width: 760px) { .boleto-paq__a { gap: 12px; padding: 0 18px 22px; } .boleto-paq__foto { margin: 0 -18px; aspect-ratio: 16 / 9; } .boleto-paq__b { padding: 20px 18px 22px; } .boleto-paq__b::before { left: 20px; right: 20px; } .boleto-paq__pasos li { font-size: 15px; } .otras2 { grid-template-columns: minmax(0, 1fr); } .otra2 { min-height: 250px; } .momento__txt p { font-size: 16px; } } /* ─── 01-10 · «Así queda tu visita»: itinerario con inicio, término y pausas en palabras ─── */ .rv-secuencia { padding: 16px 18px 18px; border-color: var(--oro); background: linear-gradient(180deg, rgba(201, 162, 75, .08), var(--noche-2)); } .rv-secuencia__t { color: var(--oro-claro); } .rv-secuencia__rango { margin: -2px 0 12px; font-size: 15.5px; color: var(--crema-2); } .rv-secuencia__rango b { color: var(--crema); } .rv-secuencia li.rv-tramo { grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-bottom: 0; } .rv-secuencia li.rv-tramo .rv-tramo__n { grid-row: 1 / 3; align-self: start; margin-top: 2px; } .rv-secuencia .rv-tramo__hora { grid-column: 2; grid-row: 1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 8px; } .rv-secuencia .rv-tramo__nom { grid-column: 2; grid-row: 2; } .rv-tramo__cambiar { grid-column: 3; grid-row: 1 / 3; } .rv-secuencia__rango b { white-space: nowrap; } .rv-tramo__n { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--oro); color: #16110b; font: 460 14px/1 var(--f-display); } .rv-secuencia .rv-tramo__hora { display: grid; gap: 3px; } .rv-tramo__hora b { font: 460 1.15rem/1 var(--f-display); color: var(--oro-claro); white-space: nowrap; } .rv-secuencia .rv-tramo__hora small { font-size: 12.5px; color: var(--crema-3); white-space: nowrap; } .rv-secuencia .rv-tramo__nom { display: grid; gap: 2px; min-width: 0; } .rv-tramo__nom b { font-size: 15.5px; font-weight: 600; color: var(--crema); } .rv-tramo__cambiar { min-height: 38px; padding: 0 12px; border: 1px solid var(--hilo-fuerte); border-radius: 999px; background: none; color: var(--crema-2); font: 600 13px/1 var(--f-texto); white-space: nowrap; cursor: pointer; transition: border-color .2s, color .2s; } .rv-tramo__cambiar:hover { border-color: var(--oro); color: var(--oro-claro); } .rv-secuencia li.rv-pausa { display: flex; align-items: center; gap: 10px; margin-left: 13px; padding: 8px 0 8px 27px; border-left: 2px dashed var(--hilo-fuerte); border-bottom: 0; font-size: 14px; color: var(--crema-3); } .rv-pausa svg { flex: none; width: 18px; height: 18px; color: var(--oro); } .rv-secuencia__nota { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hilo); font-size: 13.5px; } @media (max-width: 760px) { .rv-secuencia li.rv-pausa { font-size: 13.5px; } } /* ══════════════════ 36. RONDA DEL 02-10: FOTOS DE LA SESIÓN Y «¿CUÁNTAS PERSONAS?» ANTES DE LA HORA ══════════════════ Cada persona ocupa un lugar (camilla y terapeuta): la pregunta pasa al paso 2 y las horas donde ya hay alguien separado dicen «Último lugar». */ /* 09-10: «¿Detox de pies o reflexología?» (.rv-pies) va igual que «¿Cuántas personas?», antes del día */ .rv-quienes, .rv-pies { display: grid; gap: 10px; margin: 0 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--hilo); } .rv-quienes .rv-sub, .rv-pies .rv-sub { margin-bottom: 2px; } .rv-quienes .pista, .rv-pies .pista { font-size: 14px; color: var(--crema-3); } .rv-quienes .rv-personas, .rv-pies .rv-personas { max-width: 460px; } .rv-hora { position: relative; } .rv-hora--ultimo { border-color: rgba(227, 194, 122, .55); } .rv-hora__ultimo { position: absolute; top: -9px; right: 8px; padding: 2px 7px; border-radius: 999px; background: var(--oro); color: #16110b; font: 700 10px/1.3 var(--f-texto); font-style: normal; letter-spacing: .02em; white-space: nowrap; pointer-events: none; } .rv-hora[aria-pressed="true"] .rv-hora__ultimo { background: var(--noche); color: var(--oro-claro); } /* ══════════════════ 37. HORAS PEDIDAS Y TODAVÍA SIN SEPARAR (05-10) ══════════════════ Johnny: «si una persona separó una hora pero no la paga aún, en el sistema para los clientes tiene que parpadear o decir que aún no la separan». La hora sigue a la venta (la separa quien pague primero): lleva «Sin separar» con un punto que titila y, debajo de las horas, qué quiere decir. Color propio (cobre), distinto del dorado de «Último lugar» y del dorado de la hora elegida. */ .rv-hora--pedida { border-color: rgba(232, 150, 104, .72); } .rv-hora__pedida { position: absolute; top: -9px; right: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px 2px 6px; border: 1px solid rgba(232, 150, 104, .85); border-radius: 999px; background: #33201a; color: #f6cdb0; font: 700 10px/1.3 var(--f-texto); font-style: normal; letter-spacing: .02em; white-space: nowrap; pointer-events: none; } .rv-hora[aria-pressed="true"] .rv-hora__pedida { background: var(--noche); } .rv-hora__titila { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f09a66; animation: titila 1.1s ease-in-out infinite; } .rv-nota-pedida { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; padding: 10px 13px; border-radius: 12px; border: 1px solid rgba(232, 150, 104, .42); background: rgba(232, 150, 104, .08); color: var(--crema-2); font-size: 14px; line-height: 1.45; } .rv-nota-pedida b { color: var(--crema); } .rv-nota-pedida .rv-hora__titila { margin-top: 6px; } /* Y quien acaba de pedirla: «Tu hora todavía no está separada», con el mismo punto */ .rv-sin-separar { display: flex; align-items: center; gap: 10px; } .rv-sin-separar .rv-hora__titila { width: 9px; height: 9px; } @media (prefers-reduced-motion: reduce) { .rv-hora__titila { animation: none; } }