/*
 * Página «About» (/about).
 *
 * Antes el diseño de esta página consistía en dos `style="background: #eaf0f3;"` en
 * línea y un envoltorio `<div id="home" class="home">` que no tenía ni una regla en
 * ninguna de las hojas del sitio.
 *
 * Los colores son los del sitio: #f2849e de acento, #585858 para el texto, #6c7d8e
 * para lo secundario y #eaf0f3 para las bandas —que es el que ya usaba.
 */

/* La cabecera del sitio es `fixed` y mide 100 px; `.sitio-contenido` deja justo ese
   hueco, ni uno más. Sin esto el <h1> arranca en el píxel 100, pegado al menú. */
.abt-pagina { padding-top: 1.75rem; padding-bottom: 3rem; }

.abt-entrada { font-size: 1.0625rem; }

/* ============================== índice ============================== */

/* Los anclas #history y #philosophy estaban en el HTML desde 2023 sin que nada los
   enlazara. Esto es lo que faltaba. */
.abt-indice {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.25rem 0 0;
}
.abt-indice a {
    font-size: 13px;
    font-weight: 600;
    color: #6c7d8e;
    text-decoration: none;
    background: #fff;
    border: 1px solid #e4e7ea;
    border-radius: 999px;
    /* .45rem de alto por lado deja la pastilla en ~34 px: pulsable con el dedo. */
    padding: .45rem .9rem;
    transition: background .15s, border-color .15s, color .15s;
}
.abt-indice a:hover { background: #fdf2f5; border-color: #f2c2ce; color: #b3557a; }
.abt-indice a:focus-visible { outline: 2px solid #f2849e; outline-offset: 2px; }

/* ============================= secciones ============================= */

/* Las bandas grises a todo el ancho. Antes eran un .container-fluid con el color en
   un atributo `style`. */
.abt-banda {
    background: #eaf0f3;
    padding: 2.75rem 0;
    margin: 2.5rem 0;
}

.abt-seccion { padding: 1rem 0 2rem; }

/* La cabecera del sitio es fija: sin esto, saltar a #history deja el título DEBAJO del
   menú y parece que el ancla no funciona. 100 px de cabecera + aire. */
#history, #philosophy, #group { scroll-margin-top: 120px; }

.abt-h2 {
    color: #585858;
    font-weight: 700;
    margin: 0 0 1.25rem;
    /* La rayita de acento: identifica la sección sin gritar. */
    padding-left: .75rem;
    border-left: 4px solid #f2849e;
}

/* ⚠️ SIN `max-width`, y a propósito. Hubo una versión con la columna acotada a 54ch
   (~580 px) buscando una línea de lectura más corta; Eduardo la vio angosta y pidió
   volver. El texto ocupa el ancho del `.container`, que es lo que ocupaba antes. */
.abt-texto {
    line-height: 1.7;
    color: #3f4a55;
}
.abt-texto p { margin: 0 0 1rem; }
.abt-texto p:last-child { margin-bottom: 0; }

/* La frase de la «sacrifice zone» va en un <b> dentro del párrafo, como siempre; solo
   se le da el color del texto principal en vez del gris del cuerpo. */
.abt-texto b { color: #2f3a45; }

/* «Please contact ivan@… to join the conversation»: es la única acción de la página
   entera, así que al menos se despega del párrafo anterior. */
/* `.abt-texto p` es (0,1,1) y `.abt-contacto` a secas sería (0,1,0): perdería el
   margen. Se cualifica en vez de tirar de !important. */
.abt-texto .abt-contacto { margin-top: 1.25rem; font-weight: 600; }
.abt-contacto a { color: #b3557a; }
.abt-contacto a:hover { color: #f2849e; }

@media (max-width: 575px) {
    .abt-banda { padding: 2rem 0; margin: 2rem 0; }
}