/* Agenda, calculadora, diagnóstico, contacto y ARCO. Usa los componentes de contenido.css. */
.opcional { font-weight: 400; font-size: 0.8125rem; color: var(--tinta-2); }
.campo[hidden], .error[hidden] { display: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.campo legend, .pregunta legend, .franjas legend { font: 600 1rem var(--fuente-titulos); color: var(--navy); padding: 0; margin-bottom: 6px; }

/* Agenda: a la izquierda el día y la hora, a la derecha los datos */
.formulario--agenda { max-width: none; }
.agenda { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.agenda__fecha, .agenda__datos { display: grid; gap: var(--e-3); align-content: start; }
.agenda__paso { display: flex; align-items: center; gap: var(--e-1); font-size: var(--t-2); line-height: 1.2; color: var(--navy); }
.agenda__paso span { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--navy); color: #fff; font: 600 1rem var(--fuente-titulos); }
.agenda__datos { max-width: 34rem; }

/* Horas libres */
.franjas { display: grid; gap: var(--e-3); }
.franjas .ayuda { margin: 0; }
.franjas__dia h3 { font-size: 1.0625rem; color: var(--navy); margin-bottom: var(--e-2); text-transform: none; }
.franjas__dia h3::first-letter { text-transform: uppercase; }
.franjas__horas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--e-1); }
.franjas__horas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.franjas__horas label {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--e-1);
  border: 1.5px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--navy);
  font: 600 1rem var(--fuente-titulos); cursor: pointer; font-variant-numeric: tabular-nums;
}
.franjas__horas label:hover { border-color: var(--navy); }
.franjas__horas input:checked + label { background: var(--navy); border-color: var(--navy); color: #fff; }
.franjas__horas input:focus-visible + label { outline: 3px solid var(--teal); outline-offset: 2px; }
.franjas__dias { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: var(--e-1); }
.franjas__dias button {
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; min-height: 4.25rem; padding: 6px 4px;
  background: var(--superficie); color: var(--navy); border: 1.5px solid var(--linea); border-radius: var(--radio); cursor: pointer;
}
.franjas__dias button:hover { border-color: var(--navy); }
.franjas__dias button[aria-pressed="true"] { background: var(--tinte); border-color: var(--navy); }
.franjas__semana, .franjas__mes { font: 600 0.8125rem var(--fuente-titulos); text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta-2); }
.franjas__numero { font: 600 1.5rem var(--fuente-titulos); }
.franjas__dia[hidden] { display: none; }
@media (max-width: 860px) { .agenda { grid-template-columns: 1fr; gap: var(--e-4); } }

/* Preguntas del diagnóstico */
.formulario--preguntas { gap: var(--e-4); }
.pregunta { display: grid; gap: var(--e-1); }
.pregunta .casilla { padding-block: 4px; }

/* Resultado */
.areas > li { align-items: center; }
.areas__etiqueta { display: block; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
progress { width: 100%; height: 12px; accent-color: var(--teal); }
.plan { list-style: none; margin: 0 0 var(--e-3); padding: 0; display: grid; gap: var(--e-3); max-width: 66ch; }
.plan li { border-left: 3px solid var(--teal); padding-left: var(--e-2); }
.plan h3 { font-size: 1.1875rem; color: var(--navy); margin: 2px 0 6px; }
.plan__periodo { font: 600 0.875rem var(--fuente-titulos); color: var(--teal-texto); }
.medidas td { font-variant-numeric: tabular-nums; }
.bloque .botones, .bloque .nota { margin-top: var(--e-3); }
.formulario .botones { margin-top: var(--e-1); }