/* Bloques que no existían en la plantilla original.
   Cada uno resuelve un problema que tiene un negocio y no tienen los demás,
   y sólo sale en las webs que lo piden (`secciones` en su client.json).
   La piel, la forma y el ritmo los hereda de variants.css: aquí sólo va la
   estructura propia del bloque. */

/* ---------------------------------------------- elige-persona -----------
   Una ficha por profesional con SUS servicios y SUS precios. Donde cada uno
   cobra lo suyo, elegir mano es el producto, así que esto va arriba y el
   catálogo genérico desaparece. */
.personas {
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin-top:clamp(20px,3vw,34px);
}
.persona {
  display:flex; flex-direction:column; gap:14px;
  padding:20px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md,16px);
  transition:border-color .3s var(--ease), transform .4s var(--ease);
}
.persona:hover { border-color:var(--accent); transform:translateY(-3px) }
.persona header { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center }
.persona header i {
  width:46px; height:46px; border-radius:var(--r-sm,12px); flex:none;
  display:grid; place-items:center; font-style:normal;
  font:600 1.1rem/1 var(--serif); color:#fff; background:var(--c,var(--accent));
}
.persona header b { display:block; font-size:1.05rem; line-height:1.2 }
.persona header span { font-size:.78rem; color:var(--muted) }
.persona header em {
  font-style:normal; font-size:.76rem; color:var(--muted);
  white-space:nowrap; align-self:start; padding-top:3px;
}
.persona ul { list-style:none; margin:0; padding:0; border-top:1px solid var(--line) }
.persona li {
  display:grid; grid-template-columns:1fr auto auto; gap:4px 10px;
  align-items:baseline; padding:9px 0; border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.persona li b { font-variant-numeric:tabular-nums; font-weight:600 }
.persona li small { color:var(--muted); font-size:.74rem; min-width:34px; text-align:right }
.persona .btn { align-self:start; padding:10px 18px; font-size:.86rem }

/* ---------------------------------------------- destacado ---------------
   Una franja a todo lo ancho con una sola frase: lo que ese negocio tiene y
   los demás no. Va sola porque compartir sitio la apaga. */
.destacado {
  background:var(--accent); color:#fff;
  padding:clamp(48px,8vw,92px) 0;
  text-align:center;
}
.destacado .eyebrow { color:#fff; opacity:.75 }
.destacado .eyebrow::before { background:#fff }
.destacado .frase {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.9rem,5vw,3.4rem); line-height:1.1;
  letter-spacing:-.02em; margin:.25em auto .4em; max-width:20ch;
}
.destacado .frase em { font-style:italic; opacity:.72 }
.destacado .pie { max-width:48ch; margin:0 auto 26px; opacity:.9; font-size:1.02rem }
.destacado .btn-light { background:#fff; color:var(--accent-ink) }
/* En las pieles oscuras el acento ya destaca solo: la franja se invierte
   para no dejar un bloque de color encima de otro bloque de color. */
[data-piel="tinta"] .destacado, [data-piel="pizarra"] .destacado {
  background:var(--card); color:var(--ink); border-block:1px solid var(--line);
}
[data-piel="tinta"] .destacado .frase em,
[data-piel="pizarra"] .destacado .frase em { color:var(--accent); opacity:1 }
[data-piel="tinta"] .destacado .btn-light,
[data-piel="pizarra"] .destacado .btn-light { background:var(--accent); color:#fff }

/* ---------------------------------------------- decision ----------------
   "¿Cuál me toca a mí?". Tres o cuatro opciones con el caso en el que cada
   una es la buena. Para cuando equivocarse cuesta una hora y cuarenta euros. */
.decision {
  list-style:none; counter-reset:d; margin:clamp(20px,3vw,34px) 0 0; padding:0;
  display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.decision li {
  counter-increment:d; position:relative;
  padding:22px 20px 20px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-md,16px);
}
.decision li::before {
  content:counter(d); position:absolute; top:-11px; left:20px;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; font:600 .78rem var(--sans);
}
.decision li b { display:block; font-family:var(--serif); font-size:1.18rem; margin-bottom:6px }
.decision .cuando { display:block; font-size:.95rem; color:var(--ink-soft) }
.decision li small { display:block; margin-top:8px; font-size:.82rem; color:var(--muted) }
[data-forma="recta"] .decision li::before { border-radius:0 }

@media (max-width:640px) {
  .personas { grid-template-columns:1fr }
  .persona header { grid-template-columns:auto 1fr; }
  .persona header em { grid-column:2; padding-top:0 }
}

/* ---------------------------------------------- duracion ----------------
   Una barra por servicio, a escala real. Donde una cita son dos horas y la
   de al lado quince minutos, hay que saberlo antes de reservar. */
.duracion { list-style:none; margin:clamp(20px,3vw,34px) 0 0; padding:0; display:grid; gap:2px }
.duracion li {
  display:grid; grid-template-columns:minmax(120px,1.1fr) 2fr auto;
  gap:14px; align-items:center; padding:10px 6px;
  border-bottom:1px solid var(--line);
}
.duracion .que { font-size:.95rem }
.duracion .barra { height:10px; background:var(--paper-2); border-radius:999px; overflow:hidden }
.duracion .barra i { display:block; height:100%; width:var(--w); background:var(--accent); border-radius:inherit }
.duracion b { font-variant-numeric:tabular-nums; font-size:.92rem; min-width:62px; text-align:right }
[data-forma="recta"] .duracion .barra, [data-forma="recta"] .duracion .barra i { border-radius:0 }
@media (max-width:620px) {
  .duracion li { grid-template-columns:1fr auto; }
  .duracion .barra { grid-column:1 / -1; order:3 }
}

/* ---------------------------------------------- explica -----------------
   "Qué hace y qué no hace". Para los aparatos, donde el cliente llega con
   expectativas de anuncio y la única forma de que vuelva es decirle la
   verdad antes de cobrarle. */
.explica { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); margin-top:clamp(20px,3vw,34px) }
.explica-f { padding:22px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-md,16px) }
.explica-f h3 { font-size:1.15rem; margin:0 0 14px }
.explica-f .si, .explica-f .no { display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; padding:9px 0 }
.explica-f .si + .no { border-top:1px solid var(--line) }
.explica-f span {
  font:600 .68rem var(--sans); letter-spacing:.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.explica-f .si span { background:var(--accent-soft); color:var(--accent-ink) }
.explica-f .no span { background:var(--pill,var(--paper-2)); color:var(--muted) }
.explica-f p { margin:0; font-size:.92rem; line-height:1.5 }
.explica-f .no p { color:var(--muted) }
[data-forma="recta"] .explica-f span { border-radius:0 }

/* ---------------------------------------------- pasos -------------------
   Un camino numerado. Para negocios cuyo gancho es un proceso y no un
   precio: la consulta gratis antes de un color, la prueba antes de la boda. */
.pasos { list-style:none; counter-reset:p; margin:clamp(20px,3vw,34px) 0 0; padding:0; display:grid; gap:0 }
.pasos li {
  counter-increment:p; display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding:20px 0 22px 0; border-top:1px solid var(--line); align-items:start;
}
.pasos li::before {
  content:counter(p,decimal-leading-zero);
  font:600 .8rem var(--sans); letter-spacing:.1em; color:var(--accent);
  padding-top:4px; min-width:2.2em;
}
/* El numero, el titulo y el texto van en columnas fijas: sin decirselo, la
   rejilla colocaba el texto debajo del numero y el titulo a la derecha. */
.pasos li::before { grid-column:1; grid-row:1 / span 2 }
.pasos li b { grid-column:2; grid-row:1; font-family:var(--serif); font-size:1.25rem; margin-bottom:4px; text-align:left }
.pasos li span { grid-column:2; grid-row:2; color:var(--muted); font-size:.98rem; max-width:62ch; display:block }