/* ==========================================================================
   /comecar/ — a escolha da conta (2026-10-03)

   Carregado só nesta página. Dois cartões, o cartão inteiro é o link. Celular
   primeiro: empilhados; lado a lado só a partir de 720 px, com a mesma altura
   (o <li> estica e o <a> enche o <li>) e o título na mesma linha nos dois.
   Botão verde não há: a página é a escolha, e o verde fica para o que vem
   depois dela.

   .has-img (pedido do dono, mesmo dia: "falta imagem"): foto no topo, ícone
   num círculo branco montado na borda da foto, texto embaixo. Sem foto, o
   cartão é o de antes, sem imagem quebrada.
   ========================================================================== */

.cm-head{text-align:center}
.cm-head .lead{margin-inline:auto}

.cm-solo{padding-top:22px}

.cm-choices{list-style:none;margin:0;padding:0;display:grid;gap:14px;align-items:stretch}
.cm-choices > li{display:flex;min-width:0}

.cm-card{flex:1 1 auto;min-width:0;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  min-height:96px;padding:18px 16px 18px 18px;
  background:var(--card);border:1.5px solid var(--line-2);border-radius:var(--r-lg);
  color:var(--ink);text-decoration:none;box-shadow:var(--shadow-1);
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease);
  -webkit-tap-highlight-color:transparent}
.cm-card:hover{border-color:var(--petrol);background:var(--petrol-wash);box-shadow:var(--shadow-2)}
.cm-card:active{background:var(--petrol-soft)}
.cm-card:focus-visible{outline:3px solid var(--coral-deep);outline-offset:3px}

.cm-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:var(--petrol-soft);color:var(--petrol-deep)}
.cm-ic svg{width:24px;height:24px}

.cm-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.cm-title{font-family:var(--font-display);font-weight:var(--display-weight);
  font-size:19px;line-height:1.25;color:var(--ink)}
.cm-text{font-size:14.5px;line-height:1.5;color:var(--muted)}

.cm-go{display:grid;place-items:center;width:32px;height:32px;color:var(--petrol)}
.cm-go svg{width:20px;height:20px;transition:transform .15s var(--ease)}
.cm-card:hover .cm-go svg{transform:translateX(3px)}

/* --- With a photo ------------------------------------------------------- */

.cm-card.has-img{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;
  min-height:0;padding:0;overflow:hidden}

/* 2:1 on a phone so both cards fit almost without scrolling; the frame has
   its ratio before the bytes arrive, so nothing shifts. */
.cm-media{display:block;position:relative;aspect-ratio:2 / 1;overflow:hidden;
  background:var(--petrol-ink);border-radius:calc(var(--r-lg) - 2px) calc(var(--r-lg) - 2px) 0 0}
.cm-media .cm-img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  transition:transform .4s var(--ease)}
/* A light green veil from the bottom: ties both photos to the palette and
   gives the icon's white ring an edge to sit on. */
.cm-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(7,38,28,.45),rgba(7,38,28,0) 55%)}
.cm-card.has-img:hover .cm-img{transform:scale(1.03)}
/* The barber's hands sit high in a portrait frame. */
.cm-profissional .cm-img{object-position:50% 30%}

.cm-card.has-img .cm-ic{position:relative;z-index:1;margin:-26px 0 0 16px;
  width:52px;height:52px;background:var(--card);color:var(--petrol);
  box-shadow:0 0 0 3px var(--card),var(--shadow-1)}
.cm-card.has-img .cm-body{flex:1 1 auto;padding:10px 54px 18px 18px}
.cm-card.has-img .cm-go{position:absolute;right:12px;bottom:14px}

.cm-login{margin:22px 0 0;text-align:center;font-size:15px;color:var(--muted)}
.cm-login a{display:inline-block;padding:10px 6px;font-weight:600;color:var(--petrol)}

@media (max-width:719px){
  .cm-solo{padding-top:16px}
  .cm-card.has-img .cm-title{font-size:18px}
  .cm-card.has-img .cm-text{font-size:14px;line-height:1.45}
}

@media (min-width:720px){
  .cm-choices{grid-template-columns:1fr 1fr;gap:18px}

  /* Without a photo: icon and arrow on top, the text right under them (top,
     not bottom: bottom-aligned bodies put the two titles at different heights). */
  .cm-card:not(.has-img){grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:start;
    min-height:220px;padding:24px 22px}
  .cm-card:not(.has-img) .cm-ic{grid-column:1;grid-row:1}
  .cm-card:not(.has-img) .cm-go{grid-column:2;grid-row:1}
  .cm-card:not(.has-img) .cm-body{grid-column:1 / -1;grid-row:2;align-self:start;margin-top:20px}

  .cm-media{aspect-ratio:16 / 9}
  .cm-card.has-img .cm-ic{margin-left:20px}
  .cm-card.has-img .cm-body{padding:12px 58px 22px 22px}
  .cm-card.has-img .cm-go{right:16px;bottom:18px}
  .cm-title{font-size:22px}
}

@media (prefers-reduced-motion:reduce){
  .cm-card,.cm-go svg,.cm-media .cm-img{transition:none}
  .cm-card:hover .cm-go svg,.cm-card.has-img:hover .cm-img{transform:none}
}