/* Ponte Bello · barbería oscura y dorada con humo/vapor (fondos-shader.js, tipo "humo") detrás de todo */
* { box-sizing: border-box; }
html { background: var(--fondo); color: var(--texto); font: 400 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--fondo); overflow-x: hidden; }
a { color: inherit; }
em { font-style: italic; color: var(--oro); font-weight: 300; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 6px; }

#fondo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.grano { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
main, .pie, .cabecera { position: relative; z-index: 2; }

/* Cabecera */
.cabecera { position: fixed; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: 16px clamp(20px, 5vw, 48px); z-index: 10; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: linear-gradient(rgba(10,8,6,.75), rgba(10,8,6,0)); }
.marca { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font: 400 1.35rem/1 var(--serif); letter-spacing: .01em; text-decoration: none; }
.marca__mono { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--oro); border-radius: 50%; font: 500 .7rem/1 var(--sans); letter-spacing: .08em; color: var(--oro); }
.nav { display: flex; gap: var(--e4); font-size: var(--t2); color: var(--texto-2); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; transition: color .2s; }
.nav a:hover { color: var(--texto); }
@media (max-width: 860px) { .nav { display: none; } }

/* Botones */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, var(--oro-claro), var(--oro)); color: var(--sobre-oro); font: 600 .92rem/1 var(--sans); letter-spacing: .02em; text-decoration: none;
  border: 1px solid var(--oro); transition: transform .25s var(--curva), box-shadow .25s, opacity .25s; }
.boton:hover { transform: translateY(-2px); box-shadow: 0 12px 44px rgba(226,180,92,.28); }
.boton:disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
.boton--linea { background: transparent; color: var(--texto); border-color: var(--borde); }
.boton--linea:hover { border-color: var(--oro); box-shadow: none; }
.boton--peq { min-height: 44px; padding: 0 20px; font-size: .82rem; }

/* Tipografía */
.etiqueta { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--e3); font: 500 var(--t1)/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--oro); }
.titular { margin: 0; font: 300 var(--t8)/.9 var(--serif); letter-spacing: -.03em; }
.titular .linea { display: block; }
.titulo { margin: 0; font: 300 var(--t7)/1 var(--serif); letter-spacing: -.025em; }
.entradilla { max-width: 34rem; margin: var(--e4) 0 0; font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--texto); text-shadow: var(--sombra-texto); }
.mini { font-size: .8rem; color: var(--texto-2); }

/* Portada */
.portada { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; width: var(--ancho); margin: 0 auto; padding: 120px 0 96px; }
.estado-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--texto-2); flex: none; }
.estado-vivo.abierto { background: var(--exito); box-shadow: 0 0 0 0 rgba(143,209,158,.6); animation: late 2.4s ease-out infinite; }
@keyframes late { to { box-shadow: 0 0 0 10px rgba(143,209,158,0); } }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--e5); }
.nota { margin: var(--e4) 0 0; font-size: var(--t2); color: var(--texto); text-shadow: var(--sombra-texto); }
.nota strong { color: var(--texto); font-weight: 600; }
.estrellas { color: var(--oro); letter-spacing: .12em; }
.desliza { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--texto-2); }
.desliza::after { content: ''; display: block; width: 1px; height: 38px; margin: 10px auto 0; background: linear-gradient(var(--oro), transparent); animation: baja 2.2s ease-in-out infinite; }
@keyframes baja { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* Ritual fijado */
.ritual { position: relative; }
.ritual__fijo { width: var(--ancho); margin: 0 auto; padding: var(--e8) 0; }
.frases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e5); }
.frase { display: grid; gap: 12px; text-shadow: 0 2px 28px rgba(10,8,6,.95), 0 0 2px rgba(10,8,6,.8); }
.frase .num { font: 500 var(--t1)/1 var(--sans); letter-spacing: .2em; color: var(--oro); }
.frase .texto { font: 300 clamp(3rem, 10vw, 8.5rem)/.95 var(--serif); letter-spacing: -.035em; }
.frase .sub { max-width: 30rem; color: var(--texto); text-shadow: var(--sombra-texto); }
.barra { display: none; }
.anima .ritual { height: 420vh; }
.anima .ritual__fijo { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 0; }
.anima .frases { position: relative; display: block; height: clamp(15rem, 42vh, 23rem); }
.anima .frase { position: absolute; inset: auto 0 0 0; opacity: 0; visibility: hidden; }
.anima .barra { display: block; position: absolute; left: 0; right: 0; bottom: 56px; height: 1px; background: var(--borde); }
.barra span { display: block; height: 100%; background: var(--oro); transform-origin: left; transform: scaleX(0); }

/* Bloques */
.bloque { width: var(--ancho); margin: 0 auto; padding: clamp(96px, 16vh, 180px) 0; }
.bloque__cab { margin-bottom: var(--e6); }
.bloque--centro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.aviso { margin: var(--e3) 0 0; font-size: .82rem; color: var(--texto-2); }

/* Tarjetas de servicio (botones: preseleccionan la reserva) */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.tarjeta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 38px 32px 34px; text-align: left; border: 0; cursor: pointer;
  background: var(--superficie-opaca); transition: background .4s; }
.tarjeta:hover, .tarjeta:focus-visible { background: var(--superficie-2); }
.tarjeta:focus-visible { outline-offset: -4px; }
.tarjeta .num { font: 500 .72rem/1 var(--sans); letter-spacing: .2em; color: var(--oro); }
.tarjeta__t { margin-top: 12px; font: 400 1.9rem/1.1 var(--serif); letter-spacing: -.01em; }
.tarjeta__p { color: var(--texto-2); }
.tarjeta__cta { margin-top: auto; padding-top: 12px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--oro); opacity: .7; transition: opacity .3s, transform .3s var(--curva); }
.tarjeta:hover .tarjeta__cta { opacity: 1; transform: translateX(4px); }

/* Reserva rápida */
.reserva { position: relative; display: grid; gap: var(--e5); padding: clamp(28px, 5vw, 56px); border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie-opaca); overflow: hidden; }
.reserva__progreso { position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--borde); }
.reserva__progreso span { display: block; height: 100%; background: var(--oro); transform-origin: left; transform: scaleX(0); transition: transform .6s var(--curva); }
.paso { margin: 0; padding: 0; border: 0; min-width: 0; transition: opacity .4s; }
.paso[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.paso legend { display: flex; align-items: center; gap: 12px; margin-bottom: var(--e2); padding: 0; font: 400 1.6rem/1.2 var(--serif); }
.paso legend .num { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--oro); border-radius: 50%; font: 600 .75rem/1 var(--sans); color: var(--oro); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips--dias { flex-wrap: nowrap; overflow-x: auto; padding-top: 6px; padding-inline: 4px; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.chip { min-height: 44px; padding: 0 18px; border: 1px solid var(--borde); border-radius: 999px; background: transparent; cursor: pointer; font-size: .88rem; white-space: nowrap;
  transition: border-color .2s, background .2s, color .2s; scroll-snap-align: start; }
.chip:hover { border-color: var(--oro); }
.chip[aria-pressed="true"] { background: var(--oro); border-color: var(--oro); color: var(--sobre-oro); font-weight: 600; }
.chip small { display: block; font-size: .68rem; opacity: .75; font-weight: 500; }
.chips--dias .chip { display: flex; flex-direction: column; justify-content: center; min-width: 76px; padding: 8px 14px; line-height: 1.2; }
.reserva__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e3); padding-top: var(--e4); border-top: 1px solid var(--borde); }
.reserva__resumen { margin: 0; color: var(--texto-2); max-width: 36rem; }
.reserva__resumen strong { color: var(--texto); font-weight: 600; }

/* Cifra */
.cifra { margin: 0; font: 300 var(--t9)/.9 var(--serif); letter-spacing: -.05em; }
.cifra small { font-size: .25em; color: var(--texto-2); letter-spacing: 0; }
.cifra__txt { margin: var(--e2) 0 var(--e5); color: var(--texto-2); font-size: 1.1rem; max-width: 30rem; }
.cifra__txt strong { color: var(--texto); font-weight: 600; }

/* Preguntas */
.faq { border-top: 1px solid var(--borde); }
.faq details { border-bottom: 1px solid var(--borde); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--e2); min-height: 72px; padding: var(--e2) 0; cursor: pointer; list-style: none; font: 400 clamp(1.3rem, 2.4vw, 1.7rem)/1.2 var(--serif); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font: 300 1.6rem/1 var(--sans); color: var(--oro); transition: transform .3s var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--e3); max-width: 44rem; color: var(--texto-2); }

/* Visítanos */
.datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--e5); border-top: 1px solid var(--borde); padding-top: var(--e5); }
.datos h3 { margin: 0 0 12px; font: 500 var(--t1)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--oro); }
.datos p { margin: 0 0 12px; font-size: 1.02rem; }
.enlace { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); text-decoration: underline 1px var(--borde); text-underline-offset: 6px; transition: text-decoration-color .2s; }
.enlace:hover { text-decoration-color: var(--oro); }
.estado { font-size: .9rem; color: var(--exito); }
.estado.cerrado { color: var(--texto-2); }

/* Cierre y pie */
.cierre { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; width: var(--ancho); margin: 0 auto; }
.cierre .boton { margin-top: var(--e5); }
.titular--cierre { font-size: clamp(3rem, 9vw, 8.4rem); }
.pie { width: var(--ancho); margin: 0 auto; padding: var(--e5) 0 var(--e6); border-top: 1px solid var(--borde); font-size: .85rem; color: var(--texto-2); }
.pie p { margin: 0 0 6px; }

/* Barra fija en móvil */
.barra-movil { display: none; }
@media (max-width: 760px) {
  .cabecera .boton--peq { display: none; }
  .barra-movil { position: fixed; z-index: 20; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 6px; padding: 6px;
    border: 1px solid var(--borde); border-radius: 20px; background: var(--superficie-opaca); }
  .barra-movil a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 14px; font-size: .72rem; font-weight: 600; text-decoration: none; color: var(--texto); }
  .barra-movil svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .barra-movil__main { background: var(--oro); color: var(--sobre-oro) !important; }
  .pie { padding-bottom: 120px; }
  .desliza { display: none; }
}

/* Entradas al hacer scroll */
.anima [data-entra] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--curva), transform 1s var(--curva); }
.anima [data-entra].visible { opacity: 1; transform: none; }
.anima .tarjeta[data-entra]:nth-child(3n+2) { transition-delay: .08s; }
.anima .tarjeta[data-entra]:nth-child(3n) { transition-delay: .16s; }
/* Entrada de la portada en CSS (no espera a los CDN): sube 30 px y aparece escalonada */
.anima .portada .titular .linea, .anima .portada .entradilla, .anima .portada .acciones, .anima .portada .nota, .anima .portada .etiqueta { animation: aparece 1.2s var(--curva) .2s both; }
.anima .portada .titular .linea:first-child { animation-delay: .34s; }
.anima .portada .titular .linea:last-child { animation-delay: .46s; }
.anima .portada .entradilla { animation-delay: .66s; }
.anima .portada .acciones { animation-delay: .76s; }
.anima .portada .nota { animation-delay: .86s; }
@keyframes aparece { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) { .desliza::after, .estado-vivo.abierto { animation: none; } }