/* Sitio público de Barberías.co — identidad «Poste» (23-sep-2026).
 *
 * Lo propio de este oficio, no de cualquier SaaS: el poste de barbería (rojo,
 * blanco y azul en diagonal) como marca y como separador; titulares en Anton,
 * condensada y en mayúsculas como un letrero de barbería; la agenda de mentira
 * con una columna por silla. Oscuro solo en el héroe y en la llamada final: el
 * resto del sitio es claro y se lee sin esfuerzo.
 * Solo lo usan las páginas de marketing (server/src/marketing); la app y la
 * página de reservas de cada barbería tienen sus propias hojas.
 */
:root{
  --papel:#F5F4F0;--blanco:#fff;--papel-2:#ECEAE4;--linea:#E3E1DB;--linea-2:#CFCCC4;
  --tinta:#111113;--tinta-2:#3C3C42;--muted:#6F6E75;
  --rojo:#D7262E;--rojo-2:#B31C23;--rojo-suave:#FBE6E7;
  --azul:#1F43B5;--azul-2:#17348F;--azul-suave:#E8EDFB;
  --noche:#0F0F12;--noche-2:#1A1A20;--cromo:#C7CBD1;--ok:#1F7A45;--ok-suave:#E3F3E8;
  --display:'Anton','Impact','Arial Narrow',sans-serif;
  --ui:'Manrope',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --r:16px;--sombra:0 1px 2px rgba(17,17,19,.06),0 18px 40px -20px rgba(17,17,19,.35);
  --poste:repeating-linear-gradient(-45deg,var(--rojo) 0 14px,#fff 14px 24px,var(--azul) 24px 38px,#fff 38px 48px);
  color-scheme:light}
*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papel);color:var(--tinta);font:16.5px/1.62 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{margin:0;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:1.05}
h1{font-size:clamp(42px,7vw,86px)}h2{font-size:clamp(30px,4.2vw,50px)}
h3{font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
p{margin:0}a{color:var(--azul)}a:hover{color:var(--azul-2)}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px;border-radius:4px}
code{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:var(--papel-2);padding:1px 6px;border-radius:6px}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}.narrow{max-width:780px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo);margin-bottom:14px}
.eyebrow::before{content:'';width:26px;height:8px;border-radius:2px;background:var(--poste);background-size:34px 34px}
.sub{font-size:clamp(17px,1.6vw,20px);color:var(--tinta-2);line-height:1.55;margin-top:16px;max-width:62ch}
.muted{color:var(--muted)}.small{font-size:13.5px}
/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:12px;border:2px solid var(--tinta);background:var(--blanco);color:var(--tinta);font-weight:800;font-size:15px;white-space:nowrap;text-decoration:none!important;transition:transform .08s,box-shadow .08s,background .12s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--tinta);color:var(--tinta)}
.btn:active{transform:none;box-shadow:none}
.btn-p{background:var(--rojo);border-color:var(--tinta);color:#fff;box-shadow:4px 4px 0 var(--tinta)}
.btn-p:hover{background:var(--rojo-2);color:#fff;box-shadow:6px 6px 0 var(--tinta)}
.btn-lg{min-height:56px;padding:0 28px;font-size:16.5px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* poste y bandas */
.franja{height:14px;background:var(--poste);background-size:68px 68px;animation:poste 6s linear infinite;border-top:2px solid var(--tinta);border-bottom:2px solid var(--tinta)}
@keyframes poste{to{background-position:68px 0}}
/* cabecera */
.top{position:sticky;top:0;z-index:20;background:rgba(245,244,240,.92);backdrop-filter:blur(10px);border-bottom:2px solid var(--tinta)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:66px}
.wordmark{display:inline-flex;align-items:center;gap:10px;min-width:0;color:var(--tinta);text-decoration:none!important}
.mark{flex:none;width:14px;height:34px;border-radius:7px;background:var(--poste);background-size:34px 34px;border:2px solid var(--tinta);animation:poste 5s linear infinite}
.wm-txt{font-family:var(--display);font-size:26px;text-transform:uppercase;letter-spacing:.01em;line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wm-txt b{color:var(--rojo);font-weight:400}
.topnav{flex:none;display:flex;align-items:center;gap:4px}
.topnav>a:not(.btn){padding:8px 12px;border-radius:10px;color:var(--tinta-2);font-weight:700;font-size:14.5px;text-decoration:none}
.topnav>a:not(.btn):hover{background:var(--papel-2);color:var(--tinta)}
.topnav .btn{min-height:40px;box-shadow:3px 3px 0 var(--tinta)}
@media (max-width:760px){.hide-sm{display:none}}
@media (max-width:480px){.topnav>a[href='/login']{display:none}.topnav .btn{padding:0 12px;font-size:13.5px}.wm-txt{font-size:22px}}
/* héroe de la portada */
.hero{position:relative;background:var(--noche);color:#EDEDF0;overflow:hidden;padding:clamp(40px,7vw,90px) 0 clamp(40px,6vw,76px)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(700px 420px at 85% 10%,rgba(31,67,181,.35),transparent 70%),radial-gradient(600px 380px at 5% 100%,rgba(215,38,46,.28),transparent 70%);pointer-events:none}
.hero .wrap{position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}
.hero .eyebrow{color:#fff}
.hero h1{color:#fff}
.hero h1 .gratis{display:inline-block;background:var(--rojo);color:#fff;padding:0 .14em;margin-right:.04em;transform:rotate(-2deg);box-shadow:5px 5px 0 #000}
.hero .sub{color:#C9C9D1}
.hero .btn{border-color:#fff}
.hero .btn:not(.btn-p){background:transparent;color:#fff}.hero .btn:not(.btn-p):hover{box-shadow:3px 3px 0 #fff}
.hero .btn-p{border-color:#fff;box-shadow:4px 4px 0 #fff}.hero .btn-p:hover{box-shadow:6px 6px 0 #fff}
.hero .muted{color:#9C9CA6}
.sellos{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.sellos li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1.5px solid rgba(255,255,255,.28);border-radius:999px;font-size:13.5px;font-weight:700;color:#E4E4EA}
.sellos li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rojo)}
/* la agenda de mentira: una columna por silla */
.demo{position:relative;background:var(--blanco);color:var(--tinta);border:2px solid #000;border-radius:18px;box-shadow:10px 10px 0 var(--azul);padding:14px;font-size:13px}
.demo-top{display:flex;align-items:center;justify-content:space-between;gap:8px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.demo-top .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rojo);margin-right:6px;animation:latido 1.6s infinite}
@keyframes latido{50%{opacity:.3}}
.sillas{display:grid;grid-template-columns:36px repeat(3,1fr);gap:6px}
.sillas .hh{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11.5px;padding-top:4px}
.sillas .cab{font-weight:800;font-size:12px;text-align:center;padding:6px 4px;border-radius:8px;background:var(--papel);border:1.5px solid var(--linea)}
.sillas .cab small{display:block;font-weight:600;color:var(--muted);font-size:10.5px}
.bloque{border-radius:8px;padding:5px 7px;border-left:4px solid var(--azul);background:var(--azul-suave);line-height:1.25;min-height:40px}
.bloque b{display:block;font-size:12.5px}.bloque i{font-style:normal;color:var(--tinta-2);font-size:11px}
.bloque.rojo{border-left-color:var(--rojo);background:var(--rojo-suave)}
.bloque.hecho{opacity:.55}
.bloque.nuevo{border-left-color:var(--ok);background:var(--ok-suave);animation:nuevo 2.6s infinite}
.bloque.nuevo i{color:var(--ok);font-weight:800}
.bloque.libre{background:repeating-linear-gradient(-45deg,transparent 0 6px,var(--papel) 6px 12px);border:1.5px dashed var(--linea-2);border-left-width:1.5px}
@keyframes nuevo{0%,100%{box-shadow:0 0 0 0 rgba(31,122,69,.3)}50%{box-shadow:0 0 0 5px rgba(31,122,69,0)}}
.demo-foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:2px dashed var(--linea-2)}
.demo-foot span{font-weight:700;color:var(--muted);font-size:12.5px}
.demo-foot b{font-family:var(--display);font-size:30px;font-weight:400;line-height:1}
.aviso-turno{position:absolute;right:-8px;top:-18px;background:var(--rojo);color:#fff;font-weight:800;font-size:12.5px;padding:7px 12px;border-radius:10px;border:2px solid #000;transform:rotate(3deg);box-shadow:3px 3px 0 #000}
@media (max-width:520px){.sillas{grid-template-columns:30px repeat(3,1fr);gap:4px}.bloque i{display:none}.aviso-turno{right:6px}}
/* secciones */
.sec{padding:clamp(44px,6vw,80px) 0}.sec.alt{background:var(--blanco);border-top:2px solid var(--tinta);border-bottom:2px solid var(--tinta)}
.sec h2{margin-bottom:16px}.sec p+p{margin-top:14px}.sec p{color:var(--tinta-2);max-width:68ch}
.cabecera{max-width:720px;margin-bottom:30px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.feats{grid-template-columns:repeat(2,1fr)}}@media (max-width:580px){.feats{grid-template-columns:1fr}}
.feat{position:relative;background:var(--blanco);border:2px solid var(--tinta);border-radius:var(--r);padding:22px 22px 20px;transition:transform .12s,box-shadow .12s}
.feat:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--tinta)}
.feat .ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--rojo-suave);color:var(--rojo);margin-bottom:14px;border:2px solid var(--tinta)}
.feat:nth-child(even) .ico{background:var(--azul-suave);color:var(--azul)}
.feat .ico svg{width:24px;height:24px}
.feat h3{margin-bottom:6px}.feat p{font-size:15px;color:var(--tinta-2)}
/* gratis de verdad */
.gratis-banda{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,60px);align-items:center}
.cero{--cero:clamp(110px,18vw,220px);font-family:var(--display);font-size:var(--cero);line-height:.8;color:var(--tinta);letter-spacing:-.02em;position:relative}
.cero small{display:block;font-family:var(--ui);font-size:15px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--rojo);margin-top:calc(var(--cero) * .24);line-height:1.4}
.sin{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0 0;padding:0;list-style:none}
.sin li{padding:12px 14px;border:2px solid var(--tinta);border-radius:12px;background:var(--blanco);font-weight:800}
.sin li::before{content:'✕ ';color:var(--rojo)}
@media (max-width:700px){.gratis-banda{grid-template-columns:1fr}.sin{grid-template-columns:1fr}}
/* pasos */
.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.steps li{counter-increment:s;background:var(--blanco);border:2px solid var(--tinta);border-radius:var(--r);padding:20px;color:var(--tinta-2)}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--display);font-size:52px;line-height:1;color:var(--rojo);margin-bottom:8px}
.steps b{color:var(--tinta);display:block;margin-bottom:4px}
@media (max-width:860px){.steps{grid-template-columns:1fr}}
/* llamada final */
.cta{position:relative;background:var(--noche);color:#EDEDF0;padding:clamp(52px,7vw,90px) 0;text-align:center;overflow:hidden}
.cta::before{content:'';position:absolute;left:0;right:0;top:0;height:14px;background:var(--poste);background-size:68px 68px;animation:poste 6s linear infinite}
.cta h2{color:#fff}.cta .sub{margin:14px auto 0;color:#C9C9D1}.cta .actions{justify-content:center}
.cta .btn{border-color:#fff}.cta .btn:not(.btn-p){background:transparent;color:#fff}.cta .btn:not(.btn-p):hover{box-shadow:3px 3px 0 #fff}
.cta .btn-p{box-shadow:4px 4px 0 #fff}
/* preguntas y enlaces */
.faq{border-top:2px solid var(--tinta);padding:4px 0}.faq:last-child{border-bottom:2px solid var(--tinta)}
.faq summary{cursor:pointer;font-weight:800;font-size:17px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:'+';font-family:var(--display);color:var(--rojo);font-size:28px;line-height:.8}.faq[open] summary::after{content:'–'}
.faq summary::-webkit-details-marker{display:none}.faq p{padding:0 0 16px;color:var(--tinta-2)}
.rel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rel.cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 14px}
.rel a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;border-radius:12px;background:var(--blanco);border:2px solid var(--tinta);color:var(--tinta);font-weight:800;font-size:15px;text-decoration:none;transition:transform .1s,box-shadow .1s}
.rel a::after{content:'→';color:var(--rojo);flex:none}
.rel a:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--tinta);color:var(--tinta)}
.sec.alt .rel a{background:var(--papel)}
.bullets{margin:14px 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.bullets li{position:relative;padding-left:26px;color:var(--tinta-2)}
.bullets li::before{content:'';position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:3px;background:var(--poste);background-size:20px 20px;border:1.5px solid var(--tinta)}
/* páginas interiores */
.phero{padding:clamp(30px,5vw,60px) 0 clamp(14px,2vw,24px)}
.phero h1{font-size:clamp(38px,5.4vw,66px)}
.phero .actions{margin-top:24px}
article .sec{padding:clamp(26px,3.6vw,44px) 0}
article .sec h2{font-size:clamp(26px,3.2vw,38px)}
.crumbs{font-size:13px;color:var(--muted);padding-top:18px;display:flex;flex-wrap:wrap;gap:6px}.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--rojo)}.crumbs .sep{color:var(--linea-2)}
.tblwrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:14.5px}td,th{padding:10px 8px;border-top:1px solid var(--linea);text-align:left}td.num{text-align:right;font-weight:700}
.legal h2{font-family:var(--ui);text-transform:none;font-size:20px;font-weight:800;margin:26px 0 8px;line-height:1.3}.legal p{margin-bottom:10px}
/* pie */
.foot{background:var(--blanco);border-top:2px solid var(--tinta);padding:40px 0 44px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:24px}@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
.foot .muted{margin-top:12px;font-size:14.5px;max-width:34ch}
.footnav{display:flex;flex-direction:column;gap:7px}.footnav a{color:var(--tinta-2);font-size:14.5px;font-weight:700;text-decoration:none}.footnav a:hover{color:var(--rojo)}
.footnav .muted{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}