:root{--fondo:#171916;--panel:#20231f;--crema:#efe6d8;--suave:#bcbcaf;--linea:#494e44;--acento:#2f5d50;--titulo:"Bebas Neue","Oswald","Arial Narrow","Liberation Sans Narrow",Impact,sans-serif;--texto:Inter,"Segoe UI",Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--fondo);color:var(--crema);font-family:var(--texto);font-size:16px;line-height:1.55}body,input,button{font-variant-numeric:tabular-nums}a{color:inherit;text-underline-offset:5px}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:not-allowed}a,button,input{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,label:has(input:focus-visible){outline:3px solid var(--crema);outline-offset:5px}input:focus-visible{outline-offset:3px}[hidden]{display:none!important}.contenedor{width:min(1280px,calc(100% - 96px));margin-inline:auto}.solo-lector{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.saltear{position:fixed;top:8px;left:8px;z-index:10;background:var(--crema);color:var(--fondo);padding:12px;transform:translateY(-180%)}.saltear:focus{transform:none}.franja-muestra{padding:10px 24px;text-align:center;background:#252b24;font-size:12px;color:var(--crema);border-bottom:1px solid var(--linea)}.franja-muestra a{font-weight:700}.cabecera{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--linea)}.marca{font-family:var(--titulo);font-size:29px;font-weight:800;letter-spacing:-1px;text-decoration:none}.cabecera nav{display:flex;align-items:center;gap:34px;font-size:14px}.cabecera nav a{padding-block:12px;text-decoration:none}.nav-turno{border-bottom:1px solid var(--crema)}.nav-turno span{margin-left:12px}.portada{padding-top:66px;display:grid;grid-template-columns:1.15fr 1fr;column-gap:64px;align-items:center}.etiqueta{text-transform:uppercase;font-size:11px;letter-spacing:1.7px;font-weight:650;margin:0 0 24px}.punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--crema);margin-right:6px}h1,h2,h3,p{overflow-wrap:break-word}h1,h2{font-family:var(--titulo);font-weight:800;letter-spacing:-3px;line-height:.99;margin:0;text-transform:uppercase}h1{font-size:clamp(72px,7.7vw,112px)}h1 span{color:var(--suave)}.bajada{max-width:340px;font-size:18px;margin:28px 0}.boton{min-height:52px;padding:15px 23px;border:1px solid transparent;display:inline-flex;gap:22px;align-items:center;justify-content:space-between;font-weight:650;text-decoration:none;border-radius:2px;transition:transform .16s,background .16s}.boton:hover{transform:translateY(-2px)}.boton-claro{background:var(--crema);color:#171916}.boton-claro:hover{background:#fff6e9}.nota{font-size:12px;line-height:1.6;color:var(--suave)}.portada-texto>.nota{margin-top:17px}.afiche{background:var(--acento);padding:20px;transform:rotate(3deg);aspect-ratio:1/1.06;position:relative;color:#efe6d8}.afiche-borde{height:100%;border:1px solid currentColor;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:23px 12px;position:relative;background:#0005}.afiche-arriba,.afiche-abajo{font-size:10px;letter-spacing:2.4px;text-align:center}.tijera{width:72%;max-height:300px}.afiche-nombre{font-family:var(--titulo);font-size:clamp(28px,3.6vw,52px);font-weight:800;text-align:center;line-height:1.1;text-transform:uppercase;letter-spacing:-1px}.afiche-abajo{margin-top:16px}.portada-pie{grid-column:1/-1;display:flex;justify-content:space-between;margin-top:65px;padding-block:20px;border-top:1px solid var(--linea);color:var(--suave);font-size:12px}.portada-pie a{text-decoration:none}.portada-pie a span{margin-left:24px}.seccion{padding-top:100px;padding-bottom:100px}h2{font-size:clamp(50px,5vw,74px)}.encabezado-seccion>p:not(.etiqueta){max-width:400px;color:var(--suave)}.lista-servicios{margin-top:42px;border-top:1px solid var(--linea)}.servicio{display:grid;grid-template-columns:50px 1fr 140px 48px;gap:20px;align-items:center;border-bottom:1px solid var(--linea);padding:24px 0;text-decoration:none;transition:background .18s,padding .18s}.servicio:hover{background:var(--panel);padding-left:12px;padding-right:12px}.numero{font-size:12px;color:var(--suave)}h3{font-size:23px;line-height:1.25;margin:0 0 8px;letter-spacing:-.5px}.servicio p{margin:0;color:var(--suave);font-size:13px}.precio{text-align:right;white-space:nowrap}.precio strong{display:block;font-size:20px;font-weight:500}.precio small{color:var(--suave);font-size:12px}.flecha{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--linea);border-radius:50%;font-size:21px}.equipo-seccion{background:var(--panel);border-block:1px solid var(--linea)}.equipo-interior{display:grid;grid-template-columns:1fr 1.25fr;gap:90px}.persona{padding:23px 0;border-bottom:1px solid var(--linea);display:flex;align-items:center;gap:24px}.persona:first-child{padding-top:0}.inicial{display:grid;place-items:center;width:65px;height:75px;border-radius:50% 50% 0 0;border:1px solid var(--linea);font-family:var(--titulo);font-size:35px}.persona:nth-child(2) .inicial{border-radius:0}.persona:nth-child(3) .inicial{border-radius:50%}.persona h3{font-size:27px;margin:0}.persona p{color:var(--suave);font-size:13px;margin:5px 0 0}.reserva{display:grid;grid-template-columns:1fr 1.4fr;gap:80px;align-items:start;scroll-margin-top:24px}.reserva>.encabezado-seccion{position:sticky;top:30px}.sello{display:inline-block;border:1px solid var(--linea);padding:20px;margin-top:40px;font-size:12px;letter-spacing:2px;transform:rotate(-7deg)}.sello span{display:block;font-size:40px;line-height:1.2}.panel-turnero{background:var(--panel);border:1px solid var(--linea);padding:32px;min-width:0}.progreso{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0;margin:0 0 36px}.progreso li{font-size:10px;color:var(--suave);border-top:2px solid var(--linea);padding-top:10px}.progreso li span{display:block;font-size:13px;margin-bottom:7px}.progreso li[aria-current]{color:var(--crema);border-color:var(--crema)}.progreso li.completo{border-color:var(--acento)}.paso h3{font-size:27px}.paso h3:focus{outline:none}.ayuda{color:var(--suave);font-size:13px;margin:0 0 24px}.paso fieldset{border:0;margin:0 0 22px;padding:0;min-width:0}.paso legend{margin-bottom:14px;font-size:14px}.opciones{display:grid;gap:10px}.opcion{display:flex;align-items:center;gap:12px;position:relative;min-height:65px;padding:14px;cursor:pointer;border:1px solid var(--linea);transition:border-color .16s,background .16s}.opcion:hover{border-color:var(--suave)}.opcion:has(input:checked){border-color:var(--crema);background:#ffffff09;box-shadow:inset 4px 0 var(--acento)}.opcion input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--crema);margin:0}.opcion-texto{display:flex;flex-direction:column;min-width:0;font-size:14px}.opcion small{font-size:12px;color:var(--suave);margin-top:3px}.opcion:has(input:disabled){opacity:.55;cursor:not-allowed}.dias{grid-template-columns:repeat(3,minmax(0,1fr))}.horas{grid-template-columns:repeat(3,minmax(0,1fr))}.dias .opcion,.horas .opcion{padding:10px;gap:7px;min-height:48px}.dias .opcion-texto{font-size:12px}.acciones{display:flex;justify-content:space-between;gap:12px;margin-top:28px;padding-top:24px;border-top:1px solid var(--linea)}.acciones>.boton-claro{margin-left:auto}.boton-volver{padding-inline:0;color:var(--crema);background:transparent}.resumen{border-block:1px solid var(--linea);padding:16px 0;margin:0 0 24px;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:13px}.resumen dt{color:var(--suave)}.resumen dd{margin:0;text-align:right}.campo{margin-top:20px}.campo label{display:block;font-size:14px;margin-bottom:8px}.campo input{width:100%;min-height:50px;background:var(--fondo);color:var(--crema);border:1px solid var(--linea);padding:12px;border-radius:2px}.campo input::placeholder{color:#a0a497}.campo input[aria-invalid=true]{border-color:#ffbaaa}.campo .nota{margin:7px 0}.error{color:#ffbaaa;font-size:13px;margin-top:12px}.ubicacion{border-top:1px solid var(--linea);display:grid;grid-template-columns:1fr 1.4fr;gap:80px}.direccion{margin-bottom:0}.direccion+p{margin-top:0;color:var(--suave)}.ubicacion h3{margin-bottom:25px}.horarios-negocio{display:grid;grid-template-columns:1fr auto;font-size:14px;margin:0 0 28px}.horarios-negocio dt,.horarios-negocio dd{padding:9px 0;margin:0;border-bottom:1px solid var(--linea)}.horarios-negocio dd{text-align:right}.enlace{font-size:14px}.pie{padding-block:35px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid var(--linea)}.pie p{font-size:12px;color:var(--suave);margin:5px 0}.pie-enlaces{display:flex;flex-wrap:wrap;gap:25px;font-size:13px}.pie-enlaces a{text-decoration:none}
@media(min-width:1440px){.portada{padding-top:80px}.afiche{max-width:490px;margin-left:auto;width:100%}}
@media(max-width:1000px){.contenedor{width:calc(100% - 48px)}.portada{gap:30px}.etiqueta{letter-spacing:1px}.reserva,.ubicacion{gap:35px;grid-template-columns:.8fr 1.2fr}.panel-turnero{padding:24px}.equipo-interior{gap:45px}.afiche-arriba,.afiche-abajo{font-size:8px;letter-spacing:1px}.dias{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.contenedor{width:calc(100% - 40px)}.cabecera{min-height:85px;gap:12px}.marca{font-size:25px}.cabecera nav{gap:0;font-size:12px}.cabecera nav>a:not(.nav-turno){display:none}.nav-turno span{margin-left:5px}.franja-muestra{font-size:10px;padding:9px 20px}.portada{padding-top:38px;grid-template-columns:1fr;gap:32px}.etiqueta{font-size:10px;margin-bottom:21px}h1{font-size:clamp(66px,17vw,110px);letter-spacing:-2px}.bajada{font-size:16px;margin-top:22px}.afiche{width:82%;max-width:390px;margin:15px auto 6px;aspect-ratio:1/1}.afiche-borde{padding:17px 10px}.afiche-nombre{font-size:35px}.tijera{width:65%;max-height:200px}.afiche-arriba,.afiche-abajo{font-size:8px;letter-spacing:1.6px}.portada-pie{margin-top:9px;font-size:10px;gap:12px}.portada-pie a span{margin-left:5px}.seccion{padding-top:64px;padding-bottom:64px}h2{font-size:54px;letter-spacing:-2px}.encabezado-seccion>p:not(.etiqueta){font-size:14px}.servicio{grid-template-columns:25px 1fr auto;gap:10px;padding-block:22px}.servicio h3{font-size:19px}.servicio p{font-size:12px;max-width:210px}.servicio .flecha{display:none}.precio strong{font-size:17px}.precio small{font-size:11px}.numero{align-self:start;padding-top:3px}.equipo-interior,.reserva,.ubicacion{grid-template-columns:1fr;gap:30px}.lista-equipo{margin-top:10px}.reserva>.encabezado-seccion{position:static}.sello{display:none}.panel-turnero{padding:20px 16px}.progreso{gap:8px;margin-bottom:28px}.progreso li{font-size:9px}.paso h3{font-size:24px}.dias{grid-template-columns:repeat(3,minmax(0,1fr))}.dias .opcion{flex-direction:column;justify-content:center;text-align:center;gap:7px}.dias .opcion-texto{font-size:11px}.horas .opcion{padding:10px 8px;gap:6px}.acciones{gap:8px}.acciones .boton{font-size:13px;padding-inline:12px;gap:8px}.acciones .boton-volver{padding-left:0}.resumen{gap:10px 12px;font-size:12px}.pie{align-items:start;flex-direction:column;gap:24px}.pie-enlaces{font-size:12px;gap:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.boton:hover{transform:none}}

.cabecera{position:relative}.instalar-app{background:transparent;color:var(--suave);border:1px solid var(--linea);border-radius:2px;padding:8px 10px;font-size:12px}.ayuda-instalar{position:absolute;right:0;top:calc(100% - 8px);z-index:2;max-width:280px;padding:12px;background:var(--panel);border:1px solid var(--linea);font-size:12px}.cabecera nav{flex-wrap:wrap;justify-content:flex-end}@media(max-width:700px){.cabecera nav{gap:8px}.instalar-app{font-size:11px;padding:6px}}

/* Los temas comparten la estructura y cambian sólo su lenguaje visual. */
html[data-tema="barberia"]{--fondo:#e4d5b8;--panel:#dac8a7;--crema:#251f18;--suave:#61513e;--linea:#88765a;--titulo:Rockwell,Clarendon,"Roboto Slab",Georgia,serif;color-scheme:light}
html[data-tema="tatuajes"]{--fondo:#121311;--panel:#1c211c;--crema:#efe6d8;--suave:#c0b79f;--linea:#77745c;--titulo:Rockwell,Clarendon,"Roboto Slab",Georgia,serif;color-scheme:dark}
html:not([data-tema="peluqueria"]) h1{font-size:clamp(48px,5.4vw,78px);letter-spacing:-2px;line-height:1.06}
html:not([data-tema="peluqueria"]) h2{font-size:clamp(38px,4.3vw,62px);letter-spacing:-1.5px;line-height:1.07}
html:not([data-tema="peluqueria"]) h3{font-family:var(--titulo)}
html:not([data-tema="peluqueria"]) .marca{letter-spacing:-.8px;font-size:clamp(21px,2.5vw,29px)}
html[data-tema="barberia"] body{background-image:repeating-linear-gradient(3deg,#47372106 0 1px,transparent 1px 5px)}
html[data-tema="barberia"] .cabecera,html[data-tema="barberia"] .lista-servicios{border-block:5px double var(--crema)}
html[data-tema="barberia"] .cabecera::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:7px;background:repeating-linear-gradient(125deg,#794b3d 0 16px,#d6c4a1 16px 32px,#4b6065 32px 48px,#d6c4a1 48px 64px)}
html[data-tema="barberia"] .numero{font-family:var(--titulo);padding:4px 6px;border-block:1px dashed var(--linea);font-size:16px;color:var(--crema)}
html[data-tema="barberia"] .franja-muestra{background:var(--panel)}
html[data-tema="tatuajes"] .etiqueta{letter-spacing:3px}
html[data-tema="tatuajes"] .panel-turnero,html[data-tema="tatuajes"] .afiche{border:7px double var(--linea);clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}
html[data-tema="tatuajes"] .sello{border-color:#718775}
html:not([data-tema="peluqueria"]) .afiche{transform:rotate(-2deg);overflow:hidden;color:#efe6d8}
.foto-portada{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.22);opacity:.7}
.afiche:has(.foto-portada:not([hidden])) .tijera{visibility:hidden}
.afiche:has(.foto-portada:not([hidden])) .afiche-borde{background:linear-gradient(#0007,#0001,#000b);text-shadow:0 1px 5px #000}
.flash{display:none;position:absolute;width:60px;top:43%;left:43%;z-index:1;color:var(--acento)}
html[data-tema="tatuajes"] .flash{display:block}
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding-bottom:80px}
.galeria figure{margin:0;padding:10px;border:4px double var(--linea)}
.galeria img{display:block;width:100%;height:clamp(180px,27vw,350px);object-fit:cover;filter:grayscale(1) sepia(.22)}
.logo-negocio{display:block;max-width:220px;max-height:85px;object-fit:contain}.portada-texto>.logo-negocio{max-height:120px;margin-bottom:24px}
html:not([data-tema="peluqueria"]) .boton-claro,html[data-acento-personalizado="true"] .boton-claro{background:var(--acento);color:var(--sobre-acento)}
html:not([data-tema="peluqueria"]) .boton-claro:hover,html[data-acento-personalizado="true"] .boton-claro:hover{filter:brightness(1.08)}
html:not([data-tema="peluqueria"]) :focus-visible,html[data-acento-personalizado="true"] :focus-visible,html:not([data-tema="peluqueria"]) label:has(input:focus-visible),html[data-acento-personalizado="true"] label:has(input:focus-visible){outline-color:var(--acento)}
html:not([data-tema="peluqueria"]) .progreso li[aria-current],html[data-acento-personalizado="true"] .progreso li[aria-current]{border-color:var(--acento)}
html:not([data-tema="peluqueria"]) .opcion input,html[data-acento-personalizado="true"] .opcion input{accent-color:var(--acento)}
html[data-acento-personalizado="true"] .afiche{color:var(--sobre-acento)}
html[data-acento-personalizado="true"] .afiche-borde{background:transparent}
.progreso li>[data-vocabulario]{font-size:inherit;margin-bottom:0}.sello>[data-texto]{font-size:12px;line-height:inherit}
html[data-tema="barberia"] .error{color:#8c271d}
@media(max-width:700px){html:not([data-tema="peluqueria"]) h1{font-size:clamp(44px,12vw,70px)}html:not([data-tema="peluqueria"]) h2{font-size:40px}.galeria{gap:12px;padding-bottom:45px}.galeria figure{padding:5px}.cabecera .logo-negocio{max-width:140px;max-height:60px}html:not([data-tema="peluqueria"]) .cabecera{flex-wrap:wrap;padding-block:18px}.precio strong{white-space:normal}}
html[data-acento-personalizado="true"] .punto{background:var(--acento)}
html[data-acento-personalizado="true"] :is(.nav-turno,.flecha,.sello){border-color:var(--acento)}
html[data-tema="tatuajes"] .precio strong{font-size:17px;white-space:normal}
.nav-turno [data-texto]{margin-left:0}