/* Muestras de Estudio González: negocios inventados para mostrar el estilo (30/10/2026).
   Esto es lo que comparten las seis: el aviso de que es un ejemplo, el botón "Quiero una así", la hoja que muestra
   qué mensaje le llegaría al local por WhatsApp, los lugares para fotos y la entrada de los bloques al bajar.
   Cada muestra trae sus colores y letras en su propio index.html. */
@font-face { font-family: "Manrope"; src: url("/fonts/manrope-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; color-scheme: light; }
body { margin: 0; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

/* Aviso de muestra, arriba de todo */
.aviso-muestra { position: relative; z-index: 60; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .9rem; padding: .55rem max(16px, env(safe-area-inset-left, 0px)); background: #0F1B2D; color: #F5F3EE; font: 500 12.5px/1.4 "Manrope", system-ui, sans-serif; text-align: center; }
.aviso-muestra a { color: #E6CF9C; font-weight: 700; text-underline-offset: .2em; }

/* "Quiero una así": botón flotante que lleva al WhatsApp del Estudio */
.quiero-muestra { position: fixed; z-index: 55; left: max(14px, env(safe-area-inset-left, 0px)); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .55rem; min-height: 46px; padding: .55rem 1.05rem .55rem .6rem; border-radius: 999px; background: #0F1B2D; color: #F5F3EE; font: 700 13.5px "Manrope", system-ui, sans-serif; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); transition: transform .4s cubic-bezier(.2, .9, .25, 1.15); }
.quiero-muestra:hover { transform: translateY(-3px); }
.quiero-muestra img { width: 30px; height: 30px; padding: 5px; border-radius: 50%; background: #B89B5E; }

/* Hoja de demostración: "en la web real, esto abre el WhatsApp del local con este mensaje" */
.hoja-muestra { position: fixed; inset: 0; z-index: 90; display: grid; place-items: end center; padding: 16px; background: rgba(10, 12, 18, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.hoja-muestra.abierta { opacity: 1; pointer-events: auto; }
.hoja-muestra__caja { width: min(460px, 100%); padding: 1.4rem 1.3rem 1.2rem; border-radius: 22px; background: #FFFFFF; color: #121417; font: 400 15px/1.5 "Manrope", system-ui, sans-serif; transform: translateY(30px); transition: transform .45s cubic-bezier(.16, 1, .3, 1); margin-bottom: env(safe-area-inset-bottom, 0px); }
.hoja-muestra.abierta .hoja-muestra__caja { transform: none; }
.hoja-muestra__titulo { font-weight: 800; font-size: 17px; }
.hoja-muestra__chat { margin: .9rem 0 1rem; padding: .9rem 1rem; border-radius: 14px 14px 4px 14px; background: #DCF8C6; color: #111B21; white-space: pre-line; font-size: 14px; }
.hoja-muestra__botones { display: flex; flex-wrap: wrap; gap: .5rem; }
.hoja-muestra__botones a, .hoja-muestra__botones button { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .6rem 1rem; border: 0; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; }
.hoja-muestra__botones a { background: #0F1B2D; color: #F5F3EE; }
.hoja-muestra__botones button { background: #EEEDEA; color: #121417; }
.hoja-muestra__nota { margin-top: .8rem; font-size: 12.5px; color: #6B6F76; }
@media (min-width: 700px) { .hoja-muestra { place-items: center; } }

/* Lugar para una foto: se ve diseñado aunque la foto todavía no exista (un brillo suave que pasa y una etiqueta con lo que va);
   cuando aparece fotos/<nombre>.webp, la foto lo tapa */
.foto { position: relative; overflow: hidden; background: var(--foto-fondo, #D9D6CF); color: var(--foto-texto, rgba(0, 0, 0, .6)); isolation: isolate; }
.foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%) 0 0 / 250% 100%; animation: foto-brillo 3.4s ease-in-out infinite; }
@keyframes foto-brillo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto figcaption { position: absolute; left: .7rem; bottom: .7rem; max-width: calc(100% - 1.4rem); display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .7rem .32rem .38rem; border-radius: 999px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #1A1A1A; font: 500 11.5px/1.3 "Manrope", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foto figcaption b { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #1A1A1A; color: transparent; font-size: 0; position: relative; }
.foto figcaption b::before { content: ""; width: 11px; height: 8px; border: 1.6px solid #FFFFFF; border-radius: 2px; }
.foto figcaption b::after { content: ""; position: absolute; width: 4px; height: 4px; border: 1.4px solid #FFFFFF; border-radius: 50%; }
.foto.con-foto::before, .foto.con-foto figcaption { display: none; }

/* Entrada con la marca del negocio: menos de un segundo, una sola vez por visita, sin esperar al JavaScript */
.intro-muestra { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: .9rem; background: var(--intro-fondo, #111); color: var(--intro-texto, #FFF); pointer-events: none; animation: intro-sube .75s cubic-bezier(.76, 0, .24, 1) .78s forwards; }
.intro-muestra span { font-family: var(--intro-letra, Georgia, serif); font-style: var(--intro-estilo, normal); font-weight: var(--intro-peso, 700); font-size: clamp(2.4rem, 9vw, 5.5rem); line-height: 1; letter-spacing: var(--intro-espacio, -.02em); text-transform: var(--intro-mayus, none); clip-path: inset(0 100% 0 0); animation: intro-nombre .6s cubic-bezier(.65, 0, .35, 1) .05s forwards; }
.intro-muestra i { width: 0; height: 2px; background: var(--intro-acento, currentColor); animation: intro-linea .5s cubic-bezier(.16, 1, .3, 1) .35s forwards; }
@keyframes intro-nombre { to { clip-path: inset(0 0 0 0); } }
@keyframes intro-linea { to { width: min(180px, 40vw); } }
@keyframes intro-sube { to { transform: translateY(-100%); visibility: hidden; } }
.sin-intro .intro-muestra { display: none; }

/* Entrada al bajar: visible sin JavaScript; con JS, sube suave la primera vez que se ve */
.js [data-sube] { transition: opacity .9s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1); }
.js [data-sube]:not(.visto) { opacity: 0; transform: translateY(28px); }
.js [data-sube="2"] { transition-delay: .08s; } .js [data-sube="3"] { transition-delay: .16s; } .js [data-sube="4"] { transition-delay: .24s; }

/* Mientras una foto no existe, no se muestra el cartel con su nombre (queda el fondo del diseño). */
.foto:not(.con-foto) figcaption { display: none; }