[hidden]{display:none !important}
/* Estilos de las páginas públicas de Traffic Barber */

  :root{
    --bg:#050505;
    --surface:#111111;
    --line:#242424;
    --text:#F5F5F5;
    --muted:#A3A3A3;
    --soft:#C9C9C9;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--text);font-family:'Barlow',sans-serif;-webkit-font-smoothing:antialiased}
  a{color:var(--gold)}
  a:hover{color:var(--gold-hi)}
  img{max-width:100%;display:block}
  .wrap{max-width:1180px;margin:0 auto;padding-left:24px;padding-right:24px}
  .display{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;line-height:.9;margin:0}
  .script{font-family:'Pinyon Script',cursive;font-weight:400;font-style:normal;text-transform:none;color:var(--gold)}
  .gold{color:var(--gold)}
  .pole{height:6px;background:repeating-linear-gradient(135deg,var(--gold) 0 10px,#050505 10px 20px)}

  /* Botones */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:14px 24px;border-radius:999px;font:inherit;font-weight:700;font-size:16px;text-decoration:none;border:none;cursor:pointer;transition:translate .15s ease, background .15s ease, color .15s ease}
  .btn:disabled{opacity:.45;cursor:not-allowed;translate:none}
  .btn-sm{min-height:44px;padding:10px 16px;font-size:15px}
  .btn-block{width:100%}
  .btn:hover{translate:0 -2px}
  .btn-primary{background:var(--gold);color:#050505}
  .btn-primary:hover{color:#050505;background:var(--gold-hi)}
  .btn-ghost{border:2px solid var(--text);color:var(--text)}
  .btn-ghost:hover{color:#050505;background:var(--text)}
  .btn-dark{background:#050505;color:var(--text)}
  .btn-dark:hover{color:var(--gold)}

  /* Logo C (navajas + Traffic + BARBER) */
  .logo-c{display:flex;flex-direction:column;align-items:center;color:var(--gold);text-align:center}
  .logo-c .razors{width:42%;max-width:200px;height:auto}
  .logo-c .word{font-family:'Pinyon Script',cursive;font-size:clamp(84px,11vw,140px);line-height:1;margin-top:4px}
  .logo-c .barber{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;margin-top:10px}
  .logo-c .barber span{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:clamp(30px,4vw,44px);letter-spacing:.42em;padding-left:.42em;line-height:1}
  .logo-c .barber i{height:2px;flex:1;max-width:80px;background:var(--gold)}
  .logo-c .place{margin-top:16px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:15px;letter-spacing:.36em;padding-left:.36em;color:var(--gold-soft)}

  /* Header */
  header{position:sticky;top:0;z-index:10;background:#050505;border-bottom:1px solid #222;transition:transform .3s ease}
  header.oculto{transform:translateY(-100%)}
  .nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding-top:10px;padding-bottom:10px}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--gold)}
  .brand svg{flex-shrink:0}
  .brand .name{display:flex;flex-direction:column;align-items:center;line-height:1}
  .brand .name b{font-family:'Pinyon Script',cursive;font-weight:400;font-size:38px;line-height:.95}
  .brand .name small{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:12px;letter-spacing:.42em;padding-left:.42em;margin-top:6px}

  /* Hero */
  .hero{display:flex;flex-wrap:wrap;align-items:center;gap:48px;padding-top:72px;padding-bottom:72px}
  .hero-text{flex:999 1 480px;min-width:0}
  .pill{display:inline-flex;align-items:center;gap:8px;border:1px solid #3A3A3A;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--soft)}
  .hero h1{margin-top:20px;font-size:clamp(60px,9vw,116px)}
  .hero h1 .script{display:block;font-size:.82em;line-height:1.05;margin-top:.04em}
  .hero p{margin:24px 0 0;font-size:19px;line-height:1.55;color:var(--soft);max-width:34em}
  .actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
  .hero-logo{flex:1 1 320px;max-width:470px;position:relative;margin-right:18px;margin-bottom:18px}
  .hero-logo::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:2px solid var(--gold);border-radius:20px}
  .hero-logo .panel{position:relative;aspect-ratio:1/1;border-radius:20px;background:#0C0C0C;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;padding:32px}

  /* Franja de beneficios */
  .perks{background:#0C0C0C;border-top:1px solid #222;border-bottom:1px solid #222}
  .perks .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px 32px;padding-top:28px;padding-bottom:28px}
  .perk{display:flex;align-items:center;gap:14px}
  .perk svg{flex-shrink:0}
  .perk b{display:block;font-size:16px}
  .perk span{font-size:14px;color:var(--muted)}

  /* Secciones */
  section.block{padding-top:88px;padding-bottom:40px}
  .sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
  .sec-head h2{font-size:clamp(44px,6vw,72px)}
  .sec-head p{margin:0;color:var(--muted)}
  .sec-head a{font-weight:700}

  /* Servicios */
  .grid-3{margin-top:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
  .card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s ease, translate .2s ease, box-shadow .2s ease}
  .card:hover{border-color:var(--gold);translate:0 -3px}
  .card h3{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;text-transform:uppercase}
  .card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
  .price{margin-top:auto;padding-top:12px;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:48px;color:var(--gold)}
  .card.promo{background:var(--gold);color:#050505;border-color:var(--gold)}
  .card.promo p{color:#050505;font-weight:500}
  .tag{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
  .card.promo .display{font-size:36px;overflow-wrap:anywhere}

  /* Lealtad */
  .loyalty{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:40px;display:flex;flex-wrap:wrap;align-items:center;gap:32px}
  .loyalty-text{flex:1 1 320px;min-width:0}
  .loyalty-text h2{font-size:clamp(36px,5vw,56px)}
  .loyalty-text h2 .script{display:block;font-size:1.05em;line-height:1.1}
  .loyalty-text p{margin:16px 0 0;color:var(--soft);font-size:17px;line-height:1.55}
  .stamps{flex:1 1 340px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
  .stamp{aspect-ratio:1/1;border-radius:50%;border:2px dashed #3B3B3B;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px;color:#777777}
  .stamp.win{border:none;background:var(--gold);color:#050505;font-weight:900;font-style:italic;font-size:22px}
  .rewards{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:6px;font-size:15px;color:var(--soft)}
  .rewards b{color:var(--text)}

  /* Galería */
  .gallery{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
  .shot{aspect-ratio:4/5;border-radius:14px;background:var(--surface);border:1px dashed #3A3A3A;display:flex;align-items:center;justify-content:center;color:#777777;font-size:14px;font-weight:600;overflow:hidden}
  .shot img{width:100%;height:100%;object-fit:cover}

  /* Ubicación */
  .visit{display:flex;flex-wrap:wrap;gap:16px;padding-bottom:88px}
  .visit-card{flex:1 1 340px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:20px}
  .visit-card h2{font-size:clamp(40px,5vw,60px)}
  .row{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.5}
  .row svg{flex-shrink:0;margin-top:2px}
  .row span{color:var(--muted)}
  .facade{flex:1 1 340px;min-height:320px}
  .facade.shot{aspect-ratio:auto}

  /* Vacante */
  .hiring{background:var(--gold);color:#050505}
  .hiring .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;padding-top:44px;padding-bottom:44px}
  .hiring .display{font-size:clamp(36px,5vw,56px)}
  .hiring p{margin:8px 0 0;font-size:17px;font-weight:500}

  .fb-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:600;font-size:15px;color:var(--soft);text-decoration:none;border-bottom:1px solid #3A3A3A;padding-bottom:2px}
  .fb-link:hover{color:var(--gold);border-color:var(--gold)}
  .fb-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:var(--surface);border:1px solid var(--gold-deep);border-radius:20px;padding:32px;margin:24px 0 8px}
  .fb-band .display{font-size:clamp(34px,4.5vw,52px)}
  .fb-band .script{font-size:1.05em}
  .fb-band p{margin:10px 0 0;color:var(--soft);font-size:17px;line-height:1.5;max-width:34em}
  .foot-links a{color:var(--soft);text-decoration:none}
  .foot-links a:hover{color:var(--gold)}
  footer{border-top:1px solid #222}
  footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:28px;padding-bottom:28px;font-size:14px;color:#8A8A8A}
  footer .script{font-size:34px;margin-right:6px}

  /* Botón flotante de WhatsApp */
  .float{position:fixed;right:20px;bottom:20px;z-index:20;width:60px;height:60px;border-radius:50%;background:var(--gold);color:#050505;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .15s ease}
  .float:hover{transform:scale(1.08);color:#050505}


  /* ---------- Navegación ---------- */
  .links{display:flex;align-items:center;gap:4px 26px;margin-left:auto;font-weight:600;font-size:15px}
  .links a{color:var(--text);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
  .links a:hover{color:var(--gold)}
  .links a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
  .btn-agenda{padding:10px 18px;min-height:44px}
  .page-head{padding-top:64px;padding-bottom:8px}
  .page-head h1{font-size:clamp(52px,8vw,100px)}
  .page-head h1 .script{display:block;font-size:.85em;line-height:1.1}
  .page-head p{margin:18px 0 0;font-size:18px;line-height:1.55;color:var(--soft);max-width:36em}
  .mas{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none}
  .mas:hover{gap:10px}

  /* ---------- Reseñas ---------- */
  .reviews{display:flex;flex-wrap:wrap;gap:36px;align-items:flex-start}
  .rating{flex:0 1 260px;background:var(--surface);border:1px solid var(--gold-deep);border-radius:20px;padding:28px;text-align:center}
  .rating .num{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:96px;line-height:.9;color:var(--text)}
  .stars{display:flex;justify-content:center;gap:4px;margin:10px 0 8px;color:var(--gold)}
  .rating span{color:var(--soft);font-size:15px}
  .reviews-body{flex:999 1 420px;min-width:0}
  .reviews-body h2{font-size:clamp(40px,5.5vw,64px)}
  .reviews-body h2 .script{font-size:.95em}
  .chips{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:10px}
  .chips li{border:1px solid var(--gold-deep);background:rgb(var(--gold-rgb) / .08);color:var(--text);border-radius:999px;padding:9px 16px;font-weight:600;font-size:15px}
  .review-grid{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
  .review{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px;margin:0}
  .review .stars{justify-content:flex-start;margin:0}
  .review blockquote{margin:0;font-size:16px;line-height:1.55;color:var(--soft)}
  .review figcaption{font-weight:700;font-size:15px}
  .review figcaption span{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-top:2px}

  /* ---------- Tarjeta (versión corta en Inicio) ---------- */
  .teaser{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(135deg,#161616,#131417);border:1px solid var(--gold-deep);border-radius:20px;padding:32px}
  .teaser .display{font-size:clamp(34px,4.5vw,52px)}
  .teaser p{margin:10px 0 0;color:var(--soft);font-size:17px;line-height:1.5;max-width:30em}
  .mini-stamps{display:flex;gap:8px;margin-top:18px}
  .mini-stamps i{width:26px;height:26px;border-radius:50%;border:2px dashed #3B3B3B}
  .mini-stamps i.on{border:none;background:var(--gold)}

  .foot-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;width:100%}
  .lilghost{color:var(--gold);font-weight:700;text-decoration:none;border-bottom:1px solid transparent}
  .lilghost:hover{border-bottom-color:var(--gold)}

  /* ---------- Animaciones ---------- */
  @keyframes subir{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes navajas{from{opacity:0;transform:scale(.55) rotate(-25deg)}to{opacity:1;transform:none}}
  @keyframes polo{to{background-position:56.57px 0}}
  @keyframes latido{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 0 rgb(var(--gold-rgb) / .45)}50%{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 12px rgb(var(--gold-rgb) / 0)}}
  .pole{background-size:56.57px 56.57px;animation:polo 2.2s linear infinite}
  .fx{animation:subir .8s cubic-bezier(.2,.7,.2,1) both}
  .fx.d1{animation-delay:.08s}.fx.d2{animation-delay:.18s}.fx.d3{animation-delay:.3s}.fx.d4{animation-delay:.42s}.fx.d5{animation-delay:.55s}
  .logo-c .razors{animation:navajas 1s .35s cubic-bezier(.2,.8,.2,1.2) both}
  .logo-c .word{animation:subir .9s .55s both}
  .logo-c .barber{animation:subir .9s .75s both}
  .logo-c .place{animation:subir .9s .9s both}
  .float{animation:latido 2.4s ease-in-out 2s infinite}
  html.anim .reveal{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
  html.anim .reveal.in{opacity:1;transform:none}
  html.anim .reveal .stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),translate .2s ease,box-shadow .2s ease,border-color .2s ease}
  html.anim .reveal.in .stagger>*{opacity:1;transform:none}
  .reveal.in .stagger>*:nth-child(2){transition-delay:.08s}
  .reveal.in .stagger>*:nth-child(3){transition-delay:.16s}
  .reveal.in .stagger>*:nth-child(4){transition-delay:.24s}
  .reveal.in .stagger>*:nth-child(5){transition-delay:.32s}
  .reveal.in .stagger>*:nth-child(6){transition-delay:.4s}
  .reveal.in .stagger>*:nth-child(n+7){transition-delay:.48s}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
    html.anim .reveal,html.anim .reveal .stagger>*{opacity:1;transform:none}
    .palomita path{stroke-dashoffset:0 !important}
    html.anim .reveal .rc-s.on{scale:1 !important;opacity:1 !important}
    .v-in{opacity:1 !important;translate:none !important}
  }

  /* ---------- Celular ---------- */

  /* ---------- Utilidades y formularios ---------- */
  .hidden{display:none !important}
  .muted{color:var(--muted)}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nota{margin:12px 0 0;font-size:14px;color:var(--muted);line-height:1.5}
  .sin-cita{margin:16px 0 0 !important;font-size:15px !important;color:var(--muted) !important}
  label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:15px}
  .hint{font-weight:400;font-size:13px;color:var(--muted)}
  input,select,textarea{font:inherit;font-size:17px;color:var(--text);background:#0A0A0A;border:1px solid #333333;border-radius:12px;padding:12px 14px;min-height:48px;width:100%}
  textarea{min-height:64px;resize:vertical}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
  .fila{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
  .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;font-size:14px;color:var(--soft);line-height:1.45}
  .check input{width:22px;height:22px;min-height:0;margin-top:1px;accent-color:var(--gold);flex-shrink:0}
  .aviso{border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.45}
  .aviso.error{background:rgba(229,103,90,.12);border:1px solid rgba(229,103,90,.5);color:#F2B1A8}

  /* ---------- Tarjeta de recompensas (Inicio) ---------- */
  .reward{display:flex;flex-wrap:wrap;align-items:center;gap:36px 56px;background:var(--surface);border:1px solid var(--gold-deep);border-radius:24px;padding:40px}
  .reward-text{flex:999 1 380px;min-width:0}
  .tag-oro{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
  .reward-text h2{font-size:clamp(46px,6vw,76px)}
  .reward-text h2 .script{font-size:.95em}
  .reward-text p{margin:14px 0 0;color:var(--soft);font-size:17px;line-height:1.55;max-width:32em}
  .reward-list{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
  .reward-list li{display:flex;align-items:center;gap:12px;font-size:16px;color:var(--text)}
  .reward-list b{flex-shrink:0;min-width:104px;text-align:center;background:var(--gold);color:#050505;border-radius:999px;padding:5px 12px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;letter-spacing:.04em;text-transform:uppercase}
  .reward-card{flex:1 1 300px;max-width:420px;background:linear-gradient(160deg,#1F2125,#0C0C0C);border:1px solid #4A4128;border-radius:22px;padding:22px;box-shadow:0 24px 60px rgba(0,0,0,.45);rotate:-2.5deg;transition:rotate .5s cubic-bezier(.2,.8,.2,1.2)}
  .reward:hover .reward-card{rotate:0deg}
  .rc-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
  .rc-cab b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase}
  .rc-cab small{display:block;font-size:12px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
  .rc-cab .script{font-size:30px;line-height:1}
  .rc-sellos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-top:16px}
  .rc-s{aspect-ratio:1/1;border-radius:50%;border:2px dashed #3B3B3B;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;color:#777777}
  .rc-s.premio{border-color:var(--gold-soft);color:var(--gold-soft)}
  .rc-s.on{border:none;background:var(--gold);color:#050505;font-size:18px}
  .rc-pie{margin-top:14px;font-size:14px;color:var(--soft)}
  .rc-pie b{color:var(--gold)}
  html.anim .reveal .rc-s.on{scale:.2;opacity:0;transition:scale .55s cubic-bezier(.3,1.6,.5,1),opacity .3s ease}
  html.anim .reveal.in .rc-s.on{scale:1;opacity:1}
  html.anim .reveal.in .rc-s.on:nth-child(1){transition-delay:.5s}
  html.anim .reveal.in .rc-s.on:nth-child(2){transition-delay:.8s}
  html.anim .reveal.in .rc-s.on:nth-child(3){transition-delay:1.1s}

  /* ---------- Botones que se despliegan ---------- */
  .ventajas{background:#0C0C0C;border-top:1px solid #222;border-bottom:1px solid #222}
  .ventajas .wrap{padding-top:24px;padding-bottom:24px}
  .v-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .v-btn{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:78px;padding:14px;text-align:left;border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;cursor:pointer;transition:scale .3s cubic-bezier(.2,.8,.2,1.3),border-color .2s ease,background .2s ease,box-shadow .3s ease}
  .v-btn:hover{border-color:var(--gold-soft)}
  .v-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
  .v-btn[aria-expanded="true"]{scale:1.05;z-index:1;border-color:var(--gold);background:#1F1B10;box-shadow:0 14px 34px rgba(0,0,0,.5)}
  .v-ico{flex-shrink:0;transition:scale .3s ease}
  .v-btn[aria-expanded="true"] .v-ico{scale:1.15}
  .v-t{flex:1;min-width:0;display:flex;flex-direction:column}
  .v-t b{font-size:16px;line-height:1.2}
  .v-t span{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.3}
  .v-chev{flex-shrink:0;color:var(--muted);transition:rotate .3s ease,color .2s}
  .v-btn[aria-expanded="true"] .v-chev{rotate:180deg;color:var(--gold)}
  .v-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
  .v-panel.abierto{grid-template-rows:1fr}
  .v-panel>div{overflow:hidden;min-height:0}
  .v-in{margin-top:16px;background:var(--surface);border:1px solid var(--gold-deep);border-radius:18px;padding:24px;opacity:0;translate:0 -12px;transition:opacity .35s ease,translate .45s cubic-bezier(.2,.7,.2,1)}
  .v-panel.abierto .v-in{opacity:1;translate:0 0;transition-delay:.08s}
  .v-in h3{margin:0 0 10px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;text-transform:uppercase;line-height:1}
  .v-in>p{margin:0;color:var(--soft);font-size:16px;line-height:1.55;max-width:44em}
  .v-in b{color:var(--text)}
  .pasos{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:12px;counter-reset:paso}
  .pasos li{display:flex;gap:12px;align-items:flex-start;color:var(--soft);line-height:1.5;font-size:16px}
  .pasos li::before{counter-increment:paso;content:counter(paso);flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--gold);color:#050505;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
  .dato{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
  .dato span{display:block;font-size:13px;color:var(--muted)}
  .dato b{font-size:17px;overflow-wrap:anywhere}
  .dato.grande b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;letter-spacing:.06em}
  .btn.copiado{background:#5BC27A;color:#050505}
  .horario{width:100%;border-collapse:collapse;margin-top:8px}
  .horario td{padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
  .horario td:last-child{text-align:right;color:var(--soft)}
  .horario tr.hoy td{color:var(--gold);font-weight:700}
  .estado{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin-bottom:6px}
  .estado::before{content:"";width:10px;height:10px;border-radius:50%;background:#777777}
  .estado.abierto::before{background:#5BC27A;box-shadow:0 0 0 4px rgba(91,194,122,.2)}

  /* ---------- Quién te corta ---------- */
  .barber-grid{margin-top:32px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
  .barbero{display:flex;flex-wrap:wrap;gap:22px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;transition:border-color .2s ease}
  .barbero:hover{border-color:var(--gold-soft)}
  .b-foto{flex:0 0 150px;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:#101114;border:1px dashed #3A3A3A;display:flex;align-items:center;justify-content:center}
  .b-foto img{width:100%;height:100%;object-fit:cover;object-position:top}
  .b-vacia{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--gold-soft);font-size:12px;font-weight:600}
  .b-vacia span{color:#777777}
  .b-info{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  .b-rol{font-size:30px;line-height:1}
  .b-info h3{font-size:clamp(30px,4vw,40px);overflow-wrap:anywhere}
  .b-info p{margin:0;color:var(--soft);line-height:1.55;font-size:16px}
  .b-redes{display:flex;flex-wrap:wrap;gap:8px}

  /* ---------- Servicios: sin cita / con cita y precios ---------- */
  .tipos{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
  .tipo{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:12px}
  .tipo.top{border-color:var(--gold);background:#1A1812}
  .tipo .tag{color:var(--gold)}
  .tipo h3{margin:0;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:34px;text-transform:uppercase;line-height:.95}
  .mas-txt{margin:0;font-size:14px;color:var(--muted)}
  .checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
  .checks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--text)}
  .checks li svg{flex-shrink:0;color:var(--gold);margin-top:1px}
  .precios{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden}
  .precio-head,.precio-row{display:grid;grid-template-columns:minmax(0,1fr) 96px 96px 24px;align-items:center;gap:8px;padding:16px 22px}
  .precio-head{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
  .precio-head span:nth-child(2),.precio-head span:nth-child(3){text-align:right}
  .precio-head span:nth-child(3){color:var(--gold)}
  .precio-row{color:var(--text);text-decoration:none;border-bottom:1px solid var(--line);transition:background .15s ease}
  .precio-row:last-child{border-bottom:none}
  .precio-row:hover{background:#161616;color:var(--text)}
  .p-nombre{font-weight:600;font-size:17px}
  .p-sin,.p-con{text-align:right;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:25px;font-variant-numeric:tabular-nums}
  .p-sin{color:var(--soft)}
  .p-con{color:var(--gold)}
  .p-ir{text-align:right;color:var(--muted);font-size:24px;line-height:1;transition:translate .2s ease,color .2s}
  .precio-row:hover .p-ir{translate:3px 0;color:var(--gold)}

  /* Promos como link a Agendar */
  a.card.promo{text-decoration:none;color:#050505}
  a.card.promo:hover{color:#050505;box-shadow:0 14px 34px rgb(var(--gold-rgb) / .2)}
  .promo-cta{margin-top:auto;padding-top:8px;font-weight:700;font-size:15px;transition:letter-spacing .2s}
  a.card.promo:hover .promo-cta{letter-spacing:.02em}

  /* ---------- Agendar ---------- */
  .agenda{display:grid;gap:16px;max-width:780px}
  .paso{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px}
  .paso fieldset{border:none;margin:0;padding:0;min-width:0}
  .paso-t{display:flex;align-items:center;gap:12px;padding:0;margin:0 0 16px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;text-transform:uppercase}
  .paso-t .n{width:32px;height:32px;border-radius:50%;background:var(--gold);color:#050505;display:inline-flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
  .opciones{display:grid;gap:8px}
  .opciones.servicios{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
  .opciones.chips{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
  .opciones.horas{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .opcion{position:relative;display:block;cursor:pointer;font-weight:400}
  .opcion input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;border:0}
  .o-cuerpo{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;height:100%;padding:12px 16px;border-radius:14px;border:1px solid #333333;background:#0A0A0A;transition:border-color .15s,background .15s,scale .2s cubic-bezier(.2,.8,.2,1.3)}
  .opcion:hover .o-cuerpo{border-color:var(--gold-soft)}
  .opcion input:checked + .o-cuerpo{border-color:var(--gold);background:#1F1B10;box-shadow:inset 0 0 0 1px var(--gold);scale:1.02}
  .opcion input:focus-visible + .o-cuerpo{outline:2px solid var(--gold);outline-offset:2px}
  .o-nombre{font-weight:600;font-size:16px;line-height:1.25}
  .o-nombre small{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
  .o-precio{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;color:var(--gold);white-space:nowrap}
  .chips .o-cuerpo,.horas .o-cuerpo{flex-direction:column;justify-content:center;gap:0;padding:8px;text-align:center}
  .chips .o-cuerpo b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;text-transform:uppercase;line-height:1.1}
  .chips .o-cuerpo span{font-size:13px;color:var(--muted)}
  .horas .o-cuerpo{min-height:48px;font-weight:700;font-size:15px}
  .promo-sel{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-4px 0 14px;padding:12px 14px;border-radius:14px;background:rgb(var(--gold-rgb) / .1);border:1px solid var(--gold);font-size:15px}
  .promo-sel b{color:var(--gold)}
  .promo-sel button{background:none;border:none;color:var(--soft);font:inherit;font-size:14px;text-decoration:underline;cursor:pointer;min-height:44px;padding:0 4px}
  .campos{display:grid;gap:14px}
  .campo-cumple{display:grid;gap:6px}
  .etiqueta{font-weight:600;font-size:15px}
  .ya-tengo{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:14px;border-radius:14px;background:#0A0A0A;border:1px solid var(--gold-deep);font-size:15px;line-height:1.45}
  .ya-tengo b{color:var(--text)}
  .ya-tengo button{background:none;border:none;color:var(--gold);font:inherit;font-weight:700;font-size:14px;cursor:pointer;min-height:44px;padding:0 4px}
  .resumen-bar{position:sticky;bottom:10px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(16,17,20,.97);border:1px solid var(--gold-deep);border-radius:18px;padding:10px 10px 10px 18px;box-shadow:0 -6px 30px rgba(0,0,0,.5)}
  .r-txt{min-width:0;display:flex;flex-direction:column;font-size:13px;color:var(--muted);line-height:1.35}
  .r-txt b{color:var(--text);font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .r-der{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .r-total{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:26px;color:var(--gold)}
  .listo{max-width:560px;margin:0 auto;text-align:center;outline:none}
  .listo h2{font-size:clamp(44px,7vw,64px)}
  .listo h2 .script{display:block;font-size:.9em;line-height:1.1}
  .lead-c{color:var(--soft);font-size:17px;line-height:1.55;margin:14px 0 0}
  .palomita{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;animation:rebote .6s cubic-bezier(.3,1.6,.5,1) both}
  .palomita path{stroke-dasharray:24;stroke-dashoffset:24;animation:trazo .45s .4s ease forwards}
  @keyframes rebote{from{scale:.3;opacity:0}to{scale:1;opacity:1}}
  @keyframes trazo{to{stroke-dashoffset:0}}
  .ticket{text-align:left;background:var(--surface);border:1px dashed #5A4F30;border-radius:18px;padding:18px 20px;margin:22px 0;display:grid}
  .ticket div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px}
  .ticket div:last-child{border-bottom:none}
  .ticket span{color:var(--muted);flex-shrink:0}
  .ticket b{text-align:right}
  .ticket .folio{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.1em;color:var(--gold);font-size:20px}
  .listo .btn{margin-top:10px}

  @media (max-width:640px){
    .hero-logo{display:none}
    .hero{padding-bottom:28px}
    .reward{padding:24px;gap:28px}
    .reward-card{rotate:0deg;max-width:none}
    .reward-list b{min-width:92px;font-size:14px}
    .v-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .v-btn{flex-direction:column;align-items:flex-start;gap:8px;min-height:128px;padding:14px 12px}
    .v-btn .v-chev{position:absolute;top:12px;right:10px}
    .v-btn[aria-expanded="true"]{scale:1.04}
    .v-t b{font-size:15px}
    .v-in{padding:20px}
    .dato .btn{width:100%}
    .b-foto{flex-basis:100%;aspect-ratio:4/3}
    .precio-head,.precio-row{grid-template-columns:minmax(0,1fr) 62px 62px 12px;gap:6px;padding:14px 16px}
    .precio-head{font-size:11px;letter-spacing:.02em}
    .p-nombre{font-size:15px}
    .p-sin,.p-con{font-size:21px}
    .paso{padding:18px 16px}
    .paso-t{font-size:21px}
    .opciones.servicios{grid-template-columns:1fr}
    .opciones.chips{grid-template-columns:repeat(3,minmax(0,1fr))}
    .opciones.horas{grid-template-columns:repeat(3,minmax(0,1fr))}
    .resumen-bar{padding:8px 8px 8px 14px}
    .r-total{font-size:22px}
    .resumen-bar .btn{padding:12px 16px}
    .nav{row-gap:4px;padding-top:8px;padding-bottom:4px}
    .brand svg{width:36px;height:22px}
    .brand .name b{font-size:30px}
    .brand .name small{font-size:10px;margin-top:4px}
    .btn-agenda{padding:8px 14px;min-height:40px;font-size:14px}
    .float{width:54px;height:54px;right:16px;bottom:16px}
    .links{order:3;width:100%;margin:0;justify-content:space-between;border-top:1px solid #222;padding-top:4px;font-size:15px}
    .links a{padding:10px 2px}
    .btn-agenda{margin-left:auto}
    .gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
    .shot{font-size:12px;padding:8px;text-align:center}
    .fb-band,.teaser{padding:24px}
    .hero{padding-top:40px}
    .page-head{padding-top:40px}
    section.block{padding-top:64px}
    .loyalty,.visit-card{padding:24px}
    .rating{flex:1 1 100%}
  }

  .promo-nota{margin:8px 0 0;font-size:14px;line-height:1.45;color:var(--gold-tint);background:rgb(var(--gold-rgb) / .08);border:1px dashed rgb(var(--gold-rgb) / .5);border-radius:10px;padding:8px 12px}
  .tachado,#total s{color:var(--muted);font-weight:600;text-decoration:line-through;font-size:.75em;margin-right:4px}

  /* ===================== Estilo Traffic (negro + verde neón) ===================== */
  body{background:#050505}
  .script{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;color:var(--gold);letter-spacing:-.005em}
  .hero h1 .script{font-size:1em;line-height:.9;margin-top:0}
  .page-head h1 .script{font-size:1em;line-height:.92}
  .loyalty-text h2 .script,.reviews-body h2 .script,.fb-band .script{font-size:1em}
  .brand-logo{display:block;height:46px;width:auto}
  .foot-logo{display:block;height:40px;width:auto;margin-bottom:6px}
  .rc-marca{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-style:italic;font-size:26px;color:var(--gold);line-height:1}
  /* Logo grande del inicio con brillo verde, sin caja */
  .hero-logo{display:flex;align-items:center;justify-content:center;position:relative;margin:0}
  .hero-logo::before{content:"";position:absolute;inset:-6% -4%;border:none;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--gold-rgb) / .16),rgb(var(--gold-rgb) / 0));pointer-events:none}
  .hero-marca{position:relative;width:100%;max-width:520px;height:auto;filter:drop-shadow(0 0 22px rgb(var(--gold-rgb) / .18))}
  /* Divisor del logo: línea · estrella · línea, debajo de cada título de sección */
  .sec-head{position:relative;padding-bottom:18px}
  .sec-head::after{content:"";position:absolute;left:0;bottom:0;width:min(260px,70%);height:14px;
    background:
      linear-gradient(var(--gold),var(--gold)) left center/calc(50% - 14px) 2px no-repeat,
      linear-gradient(var(--gold),var(--gold)) right center/calc(50% - 14px) 2px no-repeat,
      var(--sec-estrella) center/14px 14px no-repeat}
  /* Botones: como las etiquetas del póster */
  .btn{text-transform:uppercase;letter-spacing:.03em;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:18px}
  .btn-primary{box-shadow:0 0 0 0 rgb(var(--gold-rgb) / 0);transition:transform .15s ease,box-shadow .2s ease,background .15s ease}
  .btn-primary:hover{box-shadow:0 0 22px rgb(var(--gold-rgb) / .35)}
  .card.promo{box-shadow:0 0 30px rgb(var(--gold-rgb) / .12)}
  /* Lista de precios con línea punteada como el póster */
  .precio-row .p-nombre{text-transform:uppercase;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:19px;letter-spacing:.01em}
  @media (max-width:640px){
    .hero-logo{display:none}
    .brand-logo{height:38px}
    .btn{font-size:17px}
  }
  @media (min-width:641px){ .hero-logo{flex:1 1 440px;max-width:560px} }
  @media (max-width:640px){ .brand-logo{height:42px} }

  /* ---------- Fotos de cortes ---------- */
  .shot.foto{margin:0;border:1px solid var(--line);background:#0C0C0C;padding:0}
  .shot.foto .zoom{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
  .shot.foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .3s ease}
  .shot.foto:hover img{transform:scale(1.05)}
  .shot.foto .zoom:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
  .gallery-inicio{grid-template-columns:repeat(4,minmax(0,1fr))}
  @media (max-width:900px){ .gallery-inicio{grid-template-columns:repeat(2,minmax(0,1fr))} }
  dialog.visor{border:none;padding:0;background:transparent;max-width:min(92vw,720px);max-height:92vh}
  dialog.visor::backdrop{background:rgba(0,0,0,.88)}
  dialog.visor img{display:block;max-width:100%;max-height:86vh;border-radius:14px;border:1px solid var(--line)}
  dialog.visor p{margin:10px 0 0;text-align:center;color:var(--soft);font-size:15px}
  dialog.visor .cerrar{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:none;background:var(--gold);color:#050505;font-size:22px;font-weight:800;cursor:pointer}
  @media (max-width:640px){ .gallery > .foto:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:4/3} }

  .rc-s.premio,.stamp.win{white-space:pre-line;text-align:center;line-height:1.05;letter-spacing:.02em}
  .rc-s.premio{font-size:9px}
  .stamp.win{font-size:clamp(10px,2.8vw,13px);font-style:normal}
  .rc-logo{height:30px;width:auto;display:block}
  /* Pasos del WiFi: el texto corre normal (antes cada negrita quedaba en su propia columna) */
  .pasos li{display:block;position:relative;padding-left:42px;min-height:28px}
  .pasos li::before{position:absolute;left:0;top:-1px}

/* ---- Calendario para agendar ---- */
.cal{max-width:440px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.cal-head b{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.cal-nav{width:44px;height:44px;border-radius:50%;border:1px solid #333;background:#0A0A0A;color:var(--text);font-size:24px;line-height:1;cursor:pointer}
.cal-nav:hover:not(:disabled){border-color:var(--gold)}
.cal-nav:disabled{opacity:.25;cursor:default}
.cal-sem,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cal-sem span{text-align:center;font-size:12px;font-weight:700;color:var(--muted);padding-bottom:4px}
.cal-d{position:relative;display:block;cursor:pointer}
.cal-d input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;padding:0;border:0}
.cal-d span{display:flex;align-items:center;justify-content:center;aspect-ratio:1;min-height:40px;border-radius:12px;border:1px solid #333;background:#0A0A0A;font-weight:700;font-size:16px;transition:border-color .15s,background .15s}
.cal-d:hover:not(.off) span{border-color:var(--gold-soft)}
.cal-d.hoy span{box-shadow:inset 0 -3px 0 var(--gold)}
.cal-d input:checked + span{background:var(--gold);border-color:var(--gold);color:#050505;box-shadow:none}
.cal-d input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.cal-d.off{cursor:default}
.cal-d.off span{background:transparent;border-color:transparent;color:#4A4A4A;font-weight:500}
.cal-d.lleno span{text-decoration:line-through;color:#7A5A55}
.cal-ley{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:12px 0 0;font-size:13px;color:var(--muted)}
.cal-ley .pt{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:-8px;vertical-align:-1px}
.cal-ley .pt.hoy{box-shadow:inset 0 -3px 0 var(--gold);border:1px solid #333}
.cal-ley .pt.lleno{background:#2A1A18}
.cal-ley .pt.cerr{background:transparent;border:1px dashed #444}
.horas .o-cuerpo small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.opcion.ocupada{cursor:not-allowed}
.opcion.ocupada .o-cuerpo{background:transparent;border-style:dashed;color:#5A5A5A}
.opcion.ocupada .o-cuerpo small{text-decoration:none}
.opciones.horas{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
@media (max-width:640px){.opciones.horas{grid-template-columns:repeat(3,minmax(0,1fr))}}
.horario tr.especial td{color:var(--gold);font-size:14px}
.precios.una .p-sin{visibility:hidden}
/* Nota de "si vienes acompañado" bien visible, y el póster de la promo */
.nota-pareja{margin:16px 0 0;padding:16px 18px 16px 58px;position:relative;border-radius:16px;background:var(--gold);color:#050505;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;font-size:22px;line-height:1.15;text-transform:uppercase}
.nota-pareja::before{content:"";position:absolute;left:18px;top:50%;width:28px;height:28px;margin-top:-14px;background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23050505' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.5'/><path d='M2.5 20a6.5 6.5 0 0 1 13 0'/><path d='M16 4.5a3.5 3.5 0 0 1 0 7M18 14a6 6 0 0 1 3.5 6'/></svg>")}
.promo-poster{margin:20px auto 0;max-width:420px;aspect-ratio:853/1280;border-radius:18px}

/* ---- Barra de navegación abajo, al alcance del pulgar (celular) ---- */
.barra-app{display:none}
@media (max-width:640px){
  header .links,header .btn-agenda{display:none}
  .nav{padding-top:10px;padding-bottom:10px}
  body{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  .barra-app{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:rgba(5,5,5,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #222}
  .barra-app a{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:54px;justify-content:flex-end;padding-bottom:4px;color:#9A9A9A;text-decoration:none;font-size:11px;font-weight:600;letter-spacing:.01em}
  .barra-app a[aria-current="page"]{color:var(--gold)}
  .barra-app a:focus-visible{outline:2px solid var(--gold);outline-offset:-2px;border-radius:12px}
  .barra-app .ba-cta{color:#F5F5F5}
  .barra-app .ba-cta .ba-ic{width:58px;height:58px;margin-top:-26px;border-radius:50%;background:var(--gold);color:#050505;display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 5px #050505,0 8px 22px rgba(165,242,10,.35)}
  .barra-app .ba-cta[aria-current="page"]{color:var(--gold)}
  .float{bottom:calc(88px + env(safe-area-inset-bottom))}
  .resumen-bar{bottom:calc(82px + env(safe-area-inset-bottom))}
}

/* ---- Recompensas: lista tipo ticket en lugar de pastillas ---- */
.reward-list{gap:0;margin-top:22px}
.reward-list li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:14px;align-items:baseline;padding:13px 0;border-top:1px dashed #2E2E2E;font-size:17px;line-height:1.35}
.reward-list li:last-child{border-bottom:1px dashed #2E2E2E}
.reward-list b{min-width:0;background:none;color:var(--gold);border-radius:0;padding:0;text-align:left;font-size:19px;letter-spacing:.02em}
.reward-list .li-pro b{color:#E9C46A}
.rw-link{color:var(--text);font-weight:700;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px;padding:12px 4px}
.rw-link:hover{color:var(--gold)}
/* tarjeta de ejemplo: se inclina con el dedo y se voltea al tocarla */
.rc3d{flex:1 1 300px;max-width:420px;perspective:1100px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.rc3d.activa{cursor:grabbing}
.rc3d-in{display:grid;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.8,.2,1.15)}
.rc3d-in>.reward-card{grid-area:1/1;max-width:none;rotate:0deg;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.reward:hover .rc3d-in>.reward-card{rotate:0deg}
.rc-reverso{transform:rotateY(180deg);display:flex;flex-direction:column;padding:0 !important;overflow:hidden;background:linear-gradient(155deg,#1A1B1D 0%,#0A0A0A 55%,#121313 100%) !important}
.rc-banda{height:28px;margin-top:22px;background:repeating-linear-gradient(115deg,var(--gold) 0 12px,#F2F2EE 12px 24px,#0A0A0A 24px 36px,#F2F2EE 36px 48px)}
.rc-rev-logo{display:block;width:72%;height:auto;margin:auto;filter:drop-shadow(0 6px 20px rgb(var(--gold-rgb) / .3))}
.rc-rev-nombre{padding:0 20px 20px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.12em;color:#E9EAE6}
@media (prefers-reduced-motion:no-preference){
  .rc3d:not(.activa) .rc3d-in{animation:flota-demo 6s ease-in-out infinite}
}
@keyframes flota-demo{0%,100%{translate:0 0}50%{translate:0 -6px}}
/* los premios de la lista empiezan con mayúscula */
.reward-list li>span::first-letter{text-transform:uppercase}
@media (max-width:640px){
  .reward{padding:28px 22px}
  .reward-list li{grid-template-columns:96px minmax(0,1fr);font-size:16px}
  .nav{justify-content:center}
  .brand-logo{height:58px}
}