@font-face { font-family: "Manrope"; src: url("manrope-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
/* S.O BARBER: sans moderna (Manrope), secciones que alternan oscuro y claro, botones en píldora con brillo,
   tarjetas de vidrio, revelado al desplazar y fotos con paralaje. Solo variables del kit.
   Todo movimiento respeta «reducir movimiento». */
@property --giro { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

body.tema-sob {
  --r-s: .6rem; --r-m: 1rem; --r-l: 1.6rem;
  --hueso: #E9E4D8; --oro: #C9A96A; --noche: #0A0A0B; --papel: #F4F1EA;
  --linea: 1px solid rgb(233 228 216 / .14);
  font-family: var(--f-texto); counter-reset: sec;
}
.tema-sob h1, .tema-sob h2, .tema-sob h3 { font-family: var(--f-titulos); font-weight: 800; letter-spacing: -.035em; }
.tema-sob .demo { background: #000; border-bottom: var(--linea); font-size: .82rem; }

/* ——— Secciones claras (el resto queda oscuro) ——— */
.tema-sob #oficio, .tema-sob #equipo, .tema-sob #resenas, .tema-sob #preguntas, .tema-sob #ubicacion {
  --c-fondo: var(--papel); --c-superficie: #fff; --c-texto: #121213; --c-texto-suave: #5C5A54;
  --linea: 1px solid rgb(18 18 19 / .12);
  background: var(--papel); color: #121213;
}
.tema-sob #oficio h2, .tema-sob #equipo h2, .tema-sob #resenas h2, .tema-sob #preguntas h2, .tema-sob #ubicacion h2 { color: #0A0A0B; }
.tema-sob #equipo p, .tema-sob #resenas p, .tema-sob #preguntas p, .tema-sob #ubicacion p { color: #5C5A54; }

/* Etiqueta numerada de sección */
.tema-sob .seccion__cab { position: relative; }
.tema-sob .seccion__cab::before { counter-increment: sec; content: "0" counter(sec) " —"; display: block; font: 700 .78rem var(--f-texto); letter-spacing: .22em; color: var(--oro); margin-bottom: .9rem; }
.tema-sob .seccion__cab h2 { font-size: clamp(2.3rem, 7vw, 4.2rem); line-height: .98; }
.tema-sob .seccion__cab p { color: #A9A497; font-weight: 400; }

/* ——— Cabecera: isla de vidrio ——— */
.tema-sob .cab__isla { background: rgb(10 10 11 / .6); backdrop-filter: blur(18px) saturate(1.4); border: var(--linea); border-radius: 999px; box-shadow: 0 18px 40px -20px #000; }
.tema-sob .marca img { display: none; }
.tema-sob .marca span { font: 800 1rem var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--hueso); }
.tema-sob .cab__nav a { border-radius: 999px; font: 600 .84rem var(--f-texto); color: #CFCABD; transition: background .25s, color .25s; }
.tema-sob .cab__nav a:hover { background: rgb(233 228 216 / .12); color: #fff; }

/* ——— Botones: píldora, degradado, brillo y flecha ——— */
.tema-sob .btn { position: relative; overflow: hidden; isolation: isolate; border-radius: 999px; font: 700 .92rem var(--f-texto); letter-spacing: .01em; padding: 1rem 1.7rem; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; }
.tema-sob .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 50%, transparent 70%); transform: translateX(-120%); transition: transform .7s; }
.tema-sob .btn:hover::before { transform: translateX(120%); }
.tema-sob .btn::after { content: "→"; display: inline-block; margin-left: .6rem; transition: transform .3s; }
.tema-sob .btn:hover { transform: translateY(-2px); }
.tema-sob .btn:hover::after { transform: translateX(4px); }
.tema-sob .btn--acento, .tema-sob .btn--primario { background: linear-gradient(135deg, #F4EFE2, #C9A96A); color: #0A0A0B; border: 0; box-shadow: 0 14px 34px -14px rgb(201 169 106 / .75), inset 0 1px 0 rgb(255 255 255 / .6); }
.tema-sob .btn--acento:hover, .tema-sob .btn--primario:hover { box-shadow: 0 22px 44px -14px rgb(201 169 106 / .9), inset 0 1px 0 rgb(255 255 255 / .6); }
.tema-sob .btn--borde-claro, .tema-sob .btn--borde { background: rgb(255 255 255 / .06); backdrop-filter: blur(8px); border: 1px solid rgb(233 228 216 / .35); color: var(--hueso); }
.tema-sob .btn--borde-claro:hover, .tema-sob .btn--borde:hover { background: rgb(233 228 216 / .14); border-color: var(--hueso); }
.tema-sob #equipo .btn--borde, .tema-sob #ubicacion .btn--borde, .tema-sob #preguntas .btn--borde { background: transparent; color: #0A0A0B; border-color: rgb(10 10 11 / .35); }

/* ——— Portada a pantalla completa ——— */
.tema-sob .portada { background: var(--noche); }
.tema-sob .portada--pantalla { min-height: 100svh; padding-bottom: 4.5rem; }
.tema-sob .portada--pantalla .forma-foto { object-fit: cover; object-position: 50% 45%; filter: grayscale(.35) contrast(1.1) brightness(.95); }
.tema-sob .portada__visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--noche) 0%, rgb(10 10 11 / .45) 35%, rgb(10 10 11 / .1) 100%), radial-gradient(60% 50% at 80% 30%, rgb(201 169 106 / .22), transparent 70%); }
.tema-sob .insignia { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-radius: 999px; background: rgb(255 255 255 / .08); border: var(--linea); backdrop-filter: blur(10px); font: 600 .74rem var(--f-texto); letter-spacing: .18em; text-transform: uppercase; color: var(--hueso); }
.tema-sob .insignia::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--oro); box-shadow: 0 0 0 4px rgb(201 169 106 / .25); }
.tema-sob .portada h1 { font-size: clamp(3.3rem, 13vw, 8rem); font-weight: 800; line-height: .92; letter-spacing: -.05em; }
.tema-sob .portada h1 .pal:last-child > span { background: linear-gradient(100deg, #F4EFE2 10%, #C9A96A 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tema-sob .portada__lead { color: #D6D1C4; font-weight: 400; font-size: 1.1rem; max-width: 32rem; }
.tema-sob .estado { background: rgb(255 255 255 / .08); border: var(--linea); border-radius: 999px; backdrop-filter: blur(10px); font-size: .8rem; }
.tema-sob .portada__nota { color: #A9A497; font-size: .86rem; }
.tema-sob .confianza { gap: .7rem; }
.tema-sob .confianza li { background: rgb(255 255 255 / .06); border: var(--linea); border-radius: var(--r-m); padding: .9rem 1.1rem; backdrop-filter: blur(14px); }
.tema-sob .confianza strong { font: 800 1.05rem var(--f-titulos); }
.tema-sob .confianza span { color: #B5B0A3; font-size: .82rem; }

/* ——— Franja: texto enorme con contorno ——— */
.tema-sob .franja { background: var(--noche); border-block: var(--linea); padding: 1.4rem 0; color: transparent; }
.tema-sob .franja__pista span { font: 800 clamp(2rem, 6vw, 3.6rem) var(--f-titulos); letter-spacing: -.03em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgb(233 228 216 / .5); }
.tema-sob .franja__pista span:nth-child(odd) { -webkit-text-stroke-color: var(--oro); }
.tema-sob .franja__pista span::after { content: "✦"; -webkit-text-stroke: 0; color: var(--oro); font-size: .5em; margin-inline: 2rem; vertical-align: middle; opacity: 1; }

/* ——— Manifiesto (claro) ——— */
.tema-sob .manifiesto { background: var(--papel); }
.tema-sob .manifiesto__etiqueta { font: 700 .78rem var(--f-texto); letter-spacing: .24em; color: #8A6F3A; }
.tema-sob .manifiesto blockquote p { font-family: var(--f-titulos); font-weight: 800; letter-spacing: -.045em; line-height: .98; color: #0A0A0B; }

/* ——— Servicios: tarjetas de vidrio sobre fondo con luz ——— */
.tema-sob #servicios { background: radial-gradient(50% 40% at 85% 0%, rgb(201 169 106 / .14), transparent 70%), var(--noche); }
.tema-sob #servicios .servicio { background: linear-gradient(160deg, rgb(255 255 255 / .08), rgb(255 255 255 / .02)); border: var(--linea); border-radius: var(--r-l); backdrop-filter: blur(10px); transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .4s; }
.tema-sob #servicios .servicio:hover { transform: translateY(-6px); border-color: rgb(201 169 106 / .6); box-shadow: 0 24px 50px -24px rgb(201 169 106 / .45); }
.tema-sob .servicio__nombre { font: 700 1.15rem var(--f-titulos); letter-spacing: -.01em; }
.tema-sob .servicio__precio { font: 800 1.6rem var(--f-titulos); color: var(--oro); }
.tema-sob .servicio__accion { color: var(--hueso); font-weight: 700; }
.tema-sob .servicios__nota { color: #A9A497; }
.tema-sob .tabpanel { border: 0; background: none; }

/* ——— Foto ancha con paralaje ——— */
.tema-sob .foto-ancha { position: relative; overflow: hidden; background: var(--noche); }
.tema-sob .foto-ancha img { height: clamp(22rem, 62vw, 44rem); width: 100%; object-fit: cover; object-position: 50% 55%; filter: grayscale(.6) contrast(1.1) brightness(.75); }
.tema-sob .foto-ancha::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--noche), transparent 25%, transparent 70%, var(--papel)); pointer-events: none; }
.tema-sob .foto-ancha figcaption span { background: rgb(10 10 11 / .55); backdrop-filter: blur(12px); border: var(--linea); border-radius: 999px; font: 700 .78rem var(--f-texto); letter-spacing: .2em; text-transform: uppercase; padding: .7rem 1.4rem; }

/* ——— Equipo (claro) ——— */
.tema-sob .equipo--retratos .perfil { border: 0; border-radius: var(--r-l); background: #0A0A0B; overflow: hidden; box-shadow: 0 30px 60px -30px rgb(10 10 11 / .5); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.tema-sob .equipo--retratos .perfil:hover { transform: translateY(-8px); }
.tema-sob .equipo--retratos .perfil__foto { border-radius: 0; background: #161618; }
.tema-sob .equipo--retratos .perfil__foto img { filter: grayscale(.3) contrast(1.05); transition: transform .8s; }
.tema-sob .equipo--retratos .perfil:hover img { transform: scale(1.05); }
.tema-sob .perfil__inicial { width: 100%; height: 100%; display: grid; place-items: center; font: 800 clamp(5rem, 16vw, 8rem) var(--f-titulos); color: rgb(201 169 106 / .4); }
.tema-sob .perfil h3 { font-size: 1.8rem; color: #fff; }
.tema-sob .perfil p { color: #C9C4B7; }
.tema-sob .equipo--retratos .perfil__texto { background: linear-gradient(0deg, rgb(10 10 11 / .92), transparent); }

/* ——— Galería (oscura) ——— */
.tema-sob #galeria { background: var(--noche); }
.tema-sob .foto { border-radius: var(--r-l); border: 0; overflow: hidden; }
.tema-sob .foto img { filter: grayscale(.5) contrast(1.06); transition: filter .5s, transform .9s; }
.tema-sob .foto:hover img { filter: grayscale(0); transform: scale(1.06); }
.tema-sob .foto span { border-radius: 999px; background: rgb(10 10 11 / .6); backdrop-filter: blur(10px); border: var(--linea); font: 700 .72rem var(--f-texto); letter-spacing: .18em; text-transform: uppercase; }

/* ——— Reseñas (claro) ——— */
.tema-sob .resenas { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 1rem; }
.tema-sob .resena { background: #fff; border: 1px solid rgb(18 18 19 / .08); border-radius: var(--r-l); padding: 2rem 1.6rem; box-shadow: 0 24px 50px -34px rgb(10 10 11 / .4); }
.tema-sob .resena__estrellas { color: #B8923F; letter-spacing: .25em; font-size: .85rem; margin: 0 0 1rem; }
.tema-sob .resena blockquote { margin: 0 0 1.2rem; font: 700 1.2rem/1.35 var(--f-titulos); letter-spacing: -.02em; color: #0A0A0B; }
.tema-sob .resena__autor { margin: 0; font: 700 .74rem var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: #6F6A5E; }
.tema-sob .resenas__resumen { font: 700 .8rem var(--f-texto); letter-spacing: .16em; text-transform: uppercase; color: #6F6A5E; }

/* ——— Pasos (oscuro, números gigantes) ——— */
.tema-sob .seccion--pasos { background: radial-gradient(45% 50% at 10% 100%, rgb(201 169 106 / .14), transparent 70%), #0D0D0F; }
.tema-sob .paso-num { background: none; color: transparent; -webkit-text-stroke: 1px var(--oro); border: 0; box-shadow: none; font: 800 clamp(4rem, 14vw, 7rem) var(--f-titulos); letter-spacing: -.05em; }
.tema-sob .pasos li:not(:last-child)::after { border-top-color: rgb(201 169 106 / .35); }
.tema-sob .pasos h3 { color: #fff; }

/* ——— Preguntas (claro) ——— */
.tema-sob .faq__item { border-bottom: var(--linea); }
.tema-sob .faq__item button { font: 700 1.08rem var(--f-titulos); letter-spacing: -.01em; color: #0A0A0B; }
.tema-sob .faq__item button .i { background: #0A0A0B; border: 0; color: #fff; border-radius: 50%; transition: transform .35s, background .3s; }
.tema-sob .faq__item button[aria-expanded="true"] .i { background: #B8923F; }

/* ——— Reserva (oscura, cierre con luz y borde giratorio) ——— */
.tema-sob .seccion--agenda { background: radial-gradient(60% 60% at 50% 0%, rgb(201 169 106 / .22), transparent 70%), var(--noche); text-align: center; }
.tema-sob .seccion--agenda > .contenedor { display: flex; flex-direction: column; align-items: center; }
.tema-sob .seccion--agenda .seccion__cab { margin-inline: auto; max-width: 40rem; }
.tema-sob .seccion--agenda .seccion__cab h2 { font-size: clamp(2.8rem, 9vw, 5.6rem); }
.tema-sob .seccion--agenda .resumen-cita__nota { justify-content: center; }
.tema-sob .seccion--agenda .btn { padding: 1.2rem 2.2rem; font-size: 1.02rem; }
@supports (background: conic-gradient(from var(--giro), red, blue)) {
  .tema-sob .seccion--agenda .btn--acento, .tema-sob .seccion--agenda .btn--primario { box-shadow: 0 0 0 2px transparent, 0 20px 50px -16px rgb(201 169 106 / .8); outline: 2px solid transparent; }
}

/* ——— Ubicación (claro) y pie ——— */
.tema-sob .dato, .tema-sob .horario-tarjeta { border-radius: var(--r-l); border: 1px solid rgb(18 18 19 / .08); background: #fff; color: #121213; box-shadow: 0 24px 50px -36px rgb(10 10 11 / .4); }
.tema-sob .pie { background: #060607; border-top: var(--linea); }
.tema-sob .pie__logo { display: none; }
.tema-sob .pie__marca strong { font: 800 1.05rem var(--f-texto); letter-spacing: .2em; text-transform: uppercase; }
.tema-sob .flota .btn { box-shadow: 0 14px 30px -14px #000; }

/* ——— Movimiento ——— */
@media (prefers-reduced-motion: no-preference) {
  @keyframes lento { from { transform: scale(1); } to { transform: scale(1.08); } }
  @keyframes giro { to { --giro: 360deg; } }
  @keyframes brillo { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
  .tema-sob .portada .forma-foto { animation: lento 26s ease-in-out infinite alternate; transform-origin: 50% 40%; }
  .tema-sob .franja__pista { will-change: transform; }
  .tema-sob .seccion--agenda .btn--acento, .tema-sob .seccion--agenda .btn--primario { background: linear-gradient(#E9DFC2, #C9A96A) padding-box, conic-gradient(from var(--giro), #C9A96A, #fff, #C9A96A 50%, #6F5A2C, #C9A96A) border-box; border: 2px solid transparent; animation: giro 5s linear infinite; }
  @supports (animation-timeline: view()) {
    @keyframes paralaje { from { transform: translateY(-9%) scale(1.12); } to { transform: translateY(9%) scale(1.12); } }
    @keyframes emerge { from { opacity: 0; transform: translateY(2.5rem); } to { opacity: 1; transform: none; } }
    .tema-sob .foto-ancha img { animation: paralaje linear both; animation-timeline: view(); }
    .tema-sob #servicios .servicio, .tema-sob .resena, .tema-sob .seccion__cab { animation: emerge linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}
.tema-sob #servicios .tabpanel__intro { display: none; }