/* =================================================================================================
   agenda-publico.css - las reglas de las paginas publicas
   AgendaModule · .NET 10.0

   La portada, el alta, el acceso y las tres paginas de texto -aviso legal, privacidad y contacto-
   son las unicas que tienen texto corrido, tablas y formularios largos. Sus mockups declaran estas
   reglas en la cabecera, y aqui van juntas.

   Todo cuelga de .agenda, como agenda-base.css: estas paginas viven en MainModule, que tiene otras
   -las de configuracion, las del framework- que no deben heredar ni esta tipografia ni estos
   formularios.

   Va DESPUES de agenda-base.css.
   ================================================================================================= */

/* --- Texto corrido: aviso legal y privacidad ------------------------------------------------- */

.agenda h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.01em;
    margin: 30px 0 10px 0;
}

.agenda p,
.agenda li {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ag-texto);
    margin: 0 0 12px 0;
}

.agenda b {
    color: var(--ag-tinta);
}

.agenda table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 14px 0;
}

.agenda th,
.agenda td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ag-linea);
    font-size: 13px;
    vertical-align: top;
}

.agenda th {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ag-texto-suave);
    font-weight: 700;
}

/* --- Formularios: contacto y alta ------------------------------------------------------------ */

/* La etiqueta de un campo. Se llama `et` en los mockups y se copia el nombre: renombrarla aqui
   obligaria a renombrarla en cinco ficheros de marcado que son la fuente de verdad del diseno. */
.agenda .et {
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ag-texto-suave);
    font-weight: 700;
}

.agenda .campo {
    width: 100%;
    padding: 12px 13px;
    border: 1px solid var(--ag-borde);
    border-radius: 5px;
    background: var(--ag-papel);
    font-family: inherit;
    font-size: 14px;
    color: var(--ag-tinta);
    outline: none;
}

.agenda .campo:focus {
    border-color: var(--ag-acento);
    box-shadow: 0 0 0 3px var(--ag-acento-fondo);
}

.agenda .bloque {
    border: 1px solid var(--ag-borde);
    border-radius: 9px;
    background: var(--ag-papel);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- La portada ------------------------------------------------------------------------------ */
/* Del <style> de landing.html. Es la unica pantalla con secciones largas, tabla comparativa y
   acordeon de preguntas, y todas sus clases viven aqui. */

.agenda h1,
.agenda h2,
.agenda h3 {
    margin: 0;
    font-weight: 400;
}

.agenda .seccion {
    padding: clamp(44px, 6.5vw, 88px) clamp(18px, 4vw, 56px);
}

.agenda .centro {
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
}

.agenda .h2 {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: clamp(27px, 3.6vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.agenda .p {
    font-size: 14.5px;
    line-height: 1.62;
    color: var(--ag-texto);
}

.agenda .tarj {
    border: 1px solid var(--ag-borde);
    border-radius: 9px;
    background: var(--ag-papel);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.agenda .pt {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 3.5px;
    flex-shrink: 0;
}

.agenda .pil {
    height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 13px;
    font-size: 11.5px;
    font-weight: 600;
}

/* Los enlaces del menu llevan a secciones de la propia pagina. Sin esto, la barra pegajosa tapa
   el titulo de la seccion a la que se acaba de saltar. */
.agenda .ancla {
    scroll-margin-top: 86px;
}

.agenda .tabla {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px;
}

.agenda .tabla th,
.agenda .tabla td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--ag-linea);
    text-align: left;
    font-size: 13.5px;
    vertical-align: top;
}

.agenda .tabla thead th {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ag-texto-suave);
    font-weight: 700;
    border-bottom: 1px solid var(--ag-borde);
}

.agenda .tabla tbody th {
    font-weight: 600;
    color: var(--ag-tinta);
    width: 32%;
}

.agenda .si {
    color: var(--ag-ok);
    font-weight: 600;
}

.agenda .no {
    color: var(--ag-texto-suave);
}

/* El acordeon de preguntas es <details> del navegador: se abre y se cierra sin una linea de
   JavaScript, y funciona igual con el circuito caido. */
.agenda details {
    border-bottom: 1px solid var(--ag-linea);
}

.agenda details summary {
    list-style: none;
    cursor: pointer;
    padding: 17px 2px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 600;
}

.agenda details summary::-webkit-details-marker {
    display: none;
}

.agenda details summary::after {
    content: "+";
    margin-left: auto;
    font-size: 19px;
    font-weight: 400;
    color: var(--ag-texto-suave);
    line-height: 1;
}

.agenda details[open] summary::after {
    content: "–";
}

.agenda details .resp {
    padding: 0 2px 18px 2px;
    font-size: 14px;
    line-height: 1.62;
    color: var(--ag-texto);
    max-width: 76ch;
}

/* --- El alta --------------------------------------------------------------------------------- */
/* Del <style> de signup.html. */

.agenda .paso {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--ag-tinta);
    color: var(--ag-papel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.agenda .pack {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 15px;
    border: 1px solid var(--ag-borde);
    border-radius: 7px;
    background: var(--ag-papel);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}