/* ═══════════════════════════════════════════════════════════
   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)}

/* ---------- 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)}

/* ---------- Hablemos ----------
   app.js enciende el marcador de una sección cuando su borde superior pasa
   la línea de 120px. Esta última sección es corta y, al llegar al final, su
   borde se quedaba por debajo: "Hablemos" no se encendía nunca. Con esta
   altura mínima siempre llega. Si cambia el 120 de app.js, cambia este.
   Antetítulo centrado sin la clase .center: en styles.css esa clase también
   es el layout del 404 (min-height:100vh) y se come la pantalla entera. */
.contact{min-height:calc(100vh - 120px);display:flex;flex-direction:column;justify-content:center}
.contact .wrap{width:100%}
.contact .slate{justify-content:center}
.contact .slate i{max-width:80px}

/* 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;
}