/* ═══════════════════════════════════════════════════════════
   pablocoviza.com · lo que /barberias necesita y la portada no
   Va DESPUÉS de styles.css, que sigue mandando: tokens, tipografías,
   timeline, tarjetas de paquetes, pasos y pie salen de allí.
   Solo lo carga barberias.html. Al tocarlo, sube su ?v= en esa página.
   Nada de colores sueltos: solo tokens de :root.
   ═══════════════════════════════════════════════════════════ */

/* ---------- Hero: botón principal y secundario ----------
   El secundario es el mismo .cta en hueco, como el botón del 404. */
.hero h1{text-wrap:balance}  /* sin esto "móvil." se queda sola en la 2ª línea */
.actions{display:flex;flex-wrap:wrap;gap:14px}
/* En móvil los dos botones se apilan; a todo el ancho no quedan desiguales. */
@media(max-width:520px){.actions .cta{flex:1 1 100%;text-align:center}}
.cta-ghost{background:transparent;color:var(--amber)}
.cta-ghost:hover{background:var(--amber);color:var(--on-amber)}

/* ---------- El caso: texto e imagen ----------
   El fondo de la captura es casi --bezel pero no igual: sin marco se ve un
   rectángulo que parece un fallo. Con el filete de --rule parece a propósito.
   height:auto es obligatorio: el global solo pone max-width, y con los
   atributos width/height la imagen se deformaría al estrecharse. */
.case{display:grid;gap:clamp(28px,5vw,64px);align-items:center}
@media(min-width:820px){.case{grid-template-columns:5fr 6fr}}
.case h2{margin-bottom:20px}
.case .lede{margin-bottom:26px}
.case-shot{margin:0}
.case-shot img{width:100%;height:auto;border:1px solid var(--rule)}
.case-link{
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--amber);padding-bottom:3px;
}
.case-link:hover{color:var(--amber)}
/* Reseña de JD. Mismo filete ámbar que los recuadros de las páginas
   legales (.doc .box). Los emojis salen de la fuente del sistema: no se
   carga nada de fuera. */
.review{margin:34px 0 0;padding:2px 0 2px 18px;border-left:2px solid var(--amber)}
.review blockquote{margin:0}
.review p{margin:0 0 12px;color:var(--prose);font-size:16px;line-height:1.55}
.review figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--dim)}

/* Reel de JD, en vertical. Mismo patrón que el reel de la portada: botón con
   portada propia y el iframe lo crea app.js al pulsar. Solo cambia el formato. */
.reel-v{max-width:320px;margin:56px 0 0}
.reel-v .reel-play,.reel-v .video-embed{aspect-ratio:9/16}

/* ---------- Qué incluye ----------
   Lista a dos columnas desde tableta. El marcador es el rombo de la
   timeline, en pequeño. */
.includes{
  list-style:none;margin:0;padding:0;display:grid;
  column-gap:clamp(24px,4vw,56px);border-bottom:1px solid var(--rule);
}
@media(min-width:820px){.includes{grid-template-columns:1fr 1fr}}
.includes li{
  position:relative;padding:15px 0 15px 28px;border-top:1px solid var(--rule);
  color:var(--prose);font-size:clamp(16px,1.7vw,18px);line-height:1.45;
}
.includes li::before{
  content:"";position:absolute;left:3px;top:calc(15px + .72em - 4px);
  width:7px;height:7px;border:1.5px solid var(--amber);transform:rotate(45deg);
}

/* ---------- Precio: las tarjetas de Paquetes, a dos columnas ----------
   Sin la línea .fine de la portada, el precio necesita aire propio. */
@media(min-width:820px){.tiers-2{grid-template-columns:repeat(2,1fr)}}
.tiers-2 .price{margin:18px 0 24px}
.tier-note{margin:0;padding-top:16px;border-top:1px solid var(--rule);font-size:15px;color:var(--dim)}

/* Título de sección solo para lectores de pantalla. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}