/* =========================================================================
   BANDADA HC · AGENDA
   Se monta sobre op.css, que trae la paleta, las tres tipografías y el botón.
   Acá vive solo lo propio de elegir una hora.

   La pieza no repite el corte diagonal de las one pager a propósito: esta
   página no persuade, ejecuta. El adorno acá estorba.
   ========================================================================= */

/* El titular va en el verde de la marca y no en el casi negro del cuerpo:
   en esta página "lo oscuro" es el verde del PDF. El acento se queda en el oro
   profundo, y ese par verde y oro es justo lo que se quería traer. */
.grito{color:var(--verde)}

.ag{max-width:1100px;margin:0 auto}

.ag__intro{padding-bottom:0}
.ag__cuerpo{display:grid;gap:clamp(30px,4vw,54px)}

.ag__paso{border-top:1px solid rgba(22,21,15,.22);padding-top:26px}
.ag__num{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--rojo-boton);margin:0 0 18px}

/* Estados ---------------------------------------------------------------- */
.ag__estado{font-family:var(--serif);font-size:17px;color:var(--tinta-suave);
  margin:0 0 8px}
.ag__estado p{margin:0 0 6px}
.ag__estado--malo{color:var(--rojo);font-family:var(--grotesca);font-size:15px;
  border-left:3px solid var(--rojo);padding-left:14px}

/* Días y horas ----------------------------------------------------------- */
.ag__dias{display:grid;gap:2px}

.ag__dia{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:18px;
  align-items:start;padding:16px 0;border-bottom:1px solid rgba(22,21,15,.12)}
.ag__dia:last-child{border-bottom:0}

.ag__fecha{font-family:var(--grotesca);font-weight:600;font-size:15px;
  text-transform:lowercase;line-height:1.25;margin:0}
.ag__fecha span{display:block;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-suave);
  font-weight:400;margin-top:3px}

.ag__horas{display:flex;flex-wrap:wrap;gap:8px}

.ag__hora{font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  padding:9px 14px;background:var(--hueso);color:var(--tinta);
  border:1px solid rgba(22,21,15,.26);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s}
.ag__hora:hover{border-color:var(--verde);background:var(--turquesa)}
.ag__hora:focus-visible{outline:2px solid var(--verde);outline-offset:2px}
.ag__hora[aria-pressed="true"]{background:var(--verde);color:var(--hueso);
  border-color:var(--verde)}

/* Paso 2 ----------------------------------------------------------------- */
.ag__elegida{font-family:var(--serif);font-size:18px;margin:0 0 22px}
.ag__cambiar{background:none;border:0;padding:0;margin-left:6px;cursor:pointer;
  font-family:var(--grotesca);font-size:14px;color:var(--rojo-boton);
  text-decoration:underline;text-underline-offset:3px}

.ag__campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;margin-bottom:24px}
.ag__campo{display:grid;gap:6px}
.ag__campo>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-suave)}
.ag__campo input{font-family:var(--grotesca);font-size:16px;padding:11px 13px;
  background:var(--hueso);color:var(--tinta);
  border:1px solid rgba(22,21,15,.26);border-radius:0}
.ag__campo input:focus{outline:0;border-color:var(--verde)}
.ag__campo input[aria-invalid="true"]{border-color:var(--rojo)}

.ag__invitados{border:0;padding:0;margin:0 0 22px}
.ag__invitados legend{font-family:var(--serif);font-size:17px;
  color:var(--tinta-suave);padding:0;margin-bottom:12px}
.ag__fila{display:flex;gap:8px;margin-bottom:8px;max-width:520px}
.ag__fila input{flex:1;font-family:var(--grotesca);font-size:16px;padding:11px 13px;
  background:var(--hueso);color:var(--tinta);border:1px solid rgba(22,21,15,.26)}
.ag__fila input:focus{outline:0;border-color:var(--verde)}
.ag__quitar{border:1px solid rgba(22,21,15,.26);background:var(--hueso);
  cursor:pointer;font-family:var(--mono);font-size:15px;line-height:1;
  padding:0 14px;color:var(--tinta-suave)}
.ag__quitar:hover{border-color:var(--rojo);color:var(--rojo)}
.ag__sumar{background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--grotesca);font-size:14px;color:var(--rojo-boton);
  text-decoration:underline;text-underline-offset:3px}

.ag__legal{font-family:var(--grotesca);font-size:12.5px;line-height:1.5;
  color:var(--tinta-suave);max-width:56em;margin:0 0 20px}

.ag__enviar{margin-top:4px}
.ag__enviar[disabled]{opacity:.55;cursor:progress}

/* Paso 3 ----------------------------------------------------------------- */
.ag__listo .grito{font-size:clamp(30px,4vw,58px)}

.ag__pie{padding:26px var(--pad);border-top:1px solid rgba(22,21,15,.22);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--tinta-suave)}
.ag__pie p{margin:0}

@media (max-width:640px){
  .ag__dia{grid-template-columns:1fr;gap:10px}
}