@font-face { font-family: 'Manrope'; src: url('/fuente/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fuente/fraunces.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
:root { --negro: #14110f; --carbon: #221d19; --oro: #d9a441; --hueso: #f5efe6; --gris: #b9ada0; --suave: #5f564d; --curva: cubic-bezier(.2,.8,.2,1); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body { margin: 0; font-family: 'Manrope', system-ui, sans-serif; background: var(--hueso); color: var(--negro); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 3px; border-radius: 6px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.b-env { width: min(1080px, 100% - 40px); margin: 0 auto; }
.b-cab { position: sticky; top: 0; z-index: 20; background: rgba(20,17,15,.94); backdrop-filter: blur(10px); }
.b-cab .b-env { display: flex; align-items: center; min-height: 62px; gap: 14px; }
.b-logo { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--hueso); text-decoration: none; font-weight: 600; }
.b-logo span { color: var(--oro); font-style: italic; }
.b-cab nav { margin-left: auto; display: flex; gap: 4px; }
.b-cab nav a { color: var(--gris); text-decoration: none; font-weight: 700; font-size: .92rem; padding: 10px 8px; }
.b-cab nav a:hover { color: #fff; }
@media (max-width: 560px) { .b-cab nav a:nth-child(2) { display: none; } }
.b-hero { position: relative; overflow: hidden; background: radial-gradient(800px 400px at 85% 0%, rgba(217,164,65,.22), transparent 60%), var(--negro); color: var(--hueso); padding: 70px 0 80px; }
.b-hero h1 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1; margin: 14px 0 18px; letter-spacing: -0.02em; max-width: 12ch; }
.b-bajada { color: var(--gris); font-size: 1.12rem; max-width: 44ch; margin: 0 0 28px; }
.b-estado { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 700; font-size: .9rem; }
.b-estado span { width: 9px; height: 9px; border-radius: 50%; background: var(--gris); }
.b-estado.abierto span { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.2); animation: titila 1.6s ease-in-out infinite; }
@keyframes titila { 50% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } }
.b-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.b-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; border: 2px solid transparent; transition: transform .2s var(--curva), box-shadow .2s; }
.b-btn.oro { background: var(--oro); color: var(--negro); }
.b-btn.oro:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(217,164,65,.8); }
.b-btn.linea { border-color: var(--hueso); color: var(--hueso); background: transparent; }
.b-btn.linea.oscuro-t { border-color: var(--negro); color: var(--negro); }
.b-datos { list-style: none; padding: 0; margin: 34px 0 0; display: flex; gap: 26px; color: var(--gris); }
.b-datos b { display: block; font-family: 'Fraunces', serif; font-size: 1.8rem; color: var(--oro); font-weight: 600; }
.b-poste { position: absolute; right: 7%; top: 60px; width: 34px; height: 210px; border-radius: 18px; overflow: hidden; border: 4px solid #3a332d; opacity: .9; }
.b-poste i { position: absolute; inset: -100% 0 0; background: repeating-linear-gradient(-45deg, #c8302f 0 14px, #f5efe6 14px 28px, #2a4c9b 28px 42px, #f5efe6 42px 56px); animation: poste 3s linear infinite; }
@keyframes poste { to { transform: translateY(79px); } }
@media (max-width: 700px) { .b-poste { right: 18px; top: 24px; width: 22px; height: 120px; opacity: .55; } }
.b-sec { padding: 70px 0; }
.b-sec h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 26px; letter-spacing: -0.01em; }
.b-sec.oscura { background: var(--carbon); color: var(--hueso); }
.b-sec.claro { background: #fff; }
.b-servicios { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.b-servicios li { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; border-bottom: 1px solid #e2d8ca; }
.b-servicios b { display: block; font-size: 1.1rem; } .b-servicios span { color: var(--suave); font-size: .95rem; }
.b-servicios em { margin-left: auto; font-style: normal; font-family: 'Fraunces', serif; font-size: 1.35rem; color: #8a5a12; white-space: nowrap; }
.b-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.b-galeria button { aspect-ratio: 4/5; border: 0; border-radius: 18px; cursor: pointer; position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 12px; color: #fff; font: inherit; font-weight: 800; transition: transform .35s var(--curva); }
.b-galeria button:hover { transform: scale(1.03); }
.b-galeria button span { position: relative; z-index: 1; }
.b-galeria button::before { content: ''; position: absolute; inset: 0; }
.g1::before { background: radial-gradient(circle at 50% 38%, #3a2c22 0 22%, transparent 23%), linear-gradient(#5b4636, #2b211b); }
.g2::before { background: radial-gradient(ellipse 30% 22% at 50% 62%, #2b211b 0 99%, transparent), radial-gradient(circle at 50% 40%, #c79a6b 0 20%, transparent 21%), linear-gradient(#7a6650, #3a2f26); }
.g3::before { background: radial-gradient(ellipse 28% 16% at 50% 22%, #1d1612 0 99%, transparent), radial-gradient(circle at 50% 42%, #b98760 0 20%, transparent 21%), linear-gradient(#a8865f, #4e3d2f); }
.g4::before { background: linear-gradient(100deg, transparent 47%, #f5efe6 47% 49%, transparent 49%), radial-gradient(circle at 50% 40%, #2b211b 0 24%, transparent 25%), linear-gradient(#6d5643, #2e241d); }
.g5::before { background: radial-gradient(circle at 50% 40%, #8c7a69 0 23%, transparent 24%), linear-gradient(#4b3f35, #1c1714); }
.g6::before { background: radial-gradient(ellipse 34% 26% at 50% 64%, #1d1612 0 99%, transparent), radial-gradient(circle at 50% 40%, #a77b55 0 21%, transparent 22%), linear-gradient(#5e4a3a, #241c16); }
.b-galeria button::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.b-nota { color: var(--gris); font-size: .9rem; margin: 16px 0 0; }
.b-opiniones { position: relative; min-height: 150px; max-width: 760px; }
.b-opiniones blockquote { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translateX(30px); transition: opacity .6s var(--curva), transform .6s var(--curva); }
.b-opiniones blockquote.activa { opacity: 1; transform: none; }
.b-opiniones p { font-family: 'Fraunces', serif; font-size: clamp(1.3rem, 3.6vw, 1.9rem); line-height: 1.3; margin: 0 0 12px; }
.b-opiniones cite { color: var(--suave); font-style: normal; font-weight: 700; }
.b-visita { display: grid; gap: 36px; align-items: center; }
@media (min-width: 820px) { .b-visita { grid-template-columns: 1fr 1fr; } }
.b-dir { color: var(--suave); font-weight: 700; margin: -14px 0 18px; }
.b-horario { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.b-horario th, .b-horario td { text-align: left; padding: 10px 6px; border-bottom: 1px solid #eee4d6; }
.b-horario td { text-align: right; color: var(--suave); }
.b-horario tr.hoy th, .b-horario tr.hoy td { color: var(--negro); font-weight: 800; background: #fbf3e2; }
.b-mapa { position: relative; height: 320px; border-radius: 26px; overflow: hidden; background: #ece4d6; }
.calle { position: absolute; background: #fff; }
.calle.h1 { left: 0; right: 0; top: 38%; height: 16px; } .calle.h2 { left: 0; right: 0; top: 74%; height: 10px; }
.calle.v1 { top: 0; bottom: 0; left: 30%; width: 14px; } .calle.v2 { top: 0; bottom: 0; left: 68%; width: 22px; transform: skewX(-12deg); }
.pin { position: absolute; left: 50%; top: 46%; width: 34px; height: 34px; margin: -34px 0 0 -17px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #c8302f; box-shadow: 0 8px 16px rgba(0,0,0,.25); z-index: 2; }
.pulso { position: absolute; left: 50%; top: 46%; width: 60px; height: 22px; margin: -6px 0 0 -30px; border-radius: 50%; background: rgba(200,48,47,.25); animation: pulso 2s ease-out infinite; }
@keyframes pulso { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.b-pie { background: var(--negro); color: var(--gris); padding: 30px 0 90px; font-size: .92rem; }
.b-pie p { margin: 4px 0; } .b-pie a { color: var(--oro); }
.b-flotante { position: fixed; right: 18px; bottom: 18px; z-index: 30; width: 60px; height: 60px; border-radius: 50%; border: 0; background: #1f8f4e; color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 14px 28px -10px rgba(31,143,78,.8); animation: llama 3s ease-in-out 2s infinite; }
.b-flotante svg { width: 30px; height: 30px; }
@keyframes llama { 0%, 80%, 100% { transform: none; } 85% { transform: rotate(-12deg) scale(1.08); } 90% { transform: rotate(10deg) scale(1.08); } 95% { transform: rotate(-6deg); } }
.revela { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--curva), transform .7s var(--curva); }
.revela.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .revela { opacity: 1; transform: none; } }
.b-opiniones { overflow: hidden; }