/* =====================================================================
   NOSOTROS — Aberturas Giacomazzi
   Vista unificada: quiénes somos + dónde encontrarnos.
   Tokens y primitivas (.g-cota, .g-eyebrow, .g-title, .g-btn, .g-link)
   vienen de externo.css.

   Antes eran dos páginas flacas. Juntas cuentan una sola cosa: hay una
   fábrica real detrás y está en una dirección a la que se puede ir.
   Por eso el recorrido es:

     hero → quiénes somos → obras → dónde estamos → escribinos

   Mismo ritmo de bandas que Inicio (foto → claro → oscuro), para que
   las dos páginas se lean como el mismo sitio.
   ===================================================================== */

/* ── HERO ──────────────────────────────────────────────────────────── */
/* El hero de página interior se mudó a externo.css como componente
   compartido (.g-hero, con .about-hero de alias), porque ahora también
   lo usa el catálogo. Este archivo no cambió nada del markup. */

/* ── Head de sección ───────────────────────────────────────────────── */
/* Rótulo y título, nada más. La bajada al costado partía la lectura
   en dos y dejaba un texto colgando junto al título. */
.about-head {
    margin-bottom: 1.75rem;
}

/* ── QUIÉNES SOMOS ─────────────────────────────────────────────────── */
/* Sin border-top verde: esa banda ahora la trae .g-hero como
   border-bottom. Si se deja acá también, quedan 10px de verde. */
.about-intro {
    background: var(--external-white);
    padding: 3.5rem 0;
}

/* Una sola columna, de corrido y a un ancho cómodo de lectura.
   El primer párrafo entra un punto más grande para dar entrada. */
.about-intro-body {
    max-width: 74ch;
}

.about-intro-text {
    font-size: var(--fs-body);
    line-height: 1.7;
    color: var(--external-secondary);
    margin: 0 0 1.1rem;
}

.about-intro-text:first-child {
    font-size: var(--fs-lead);
    line-height: 1.6;
    font-weight: 500;
}

.about-intro-text:last-child {
    margin-bottom: 0;
}

/* ── OBRAS ─────────────────────────────────────────────────────────── */
.about-obras {
    background: var(--g-vidrio);
    padding: 3.5rem 0;
}

/* Mismo riel de scroll-snap que Inicio: manda el pulgar y las flechas
   son un extra de desktop. */
.about-rail-wrap {
    --rail-pad: 0.75rem;
}

.about-rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rail-pad);
    margin: 0 calc(var(--rail-pad) * -1);
    padding: 0.5rem var(--rail-pad) 0.75rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.about-rail::-webkit-scrollbar {
    display: none;
}

.about-rail-item {
    flex: 0 0 72%;
    scroll-snap-align: start;
}

.about-obra {
    display: block;
    border-radius: 3px;
    overflow: hidden;
    border-bottom: 3px solid var(--external-primary);
    background: var(--external-white);
}

.about-obra-thumb {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, var(--external-primary) 0%, var(--external-primary-soft) 100%);
}

.about-obra-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-obra-name {
    padding: 0.7rem 0.85rem;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--external-secondary);
}

.about-rail-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin-top: 1rem;
    min-height: 12px;
}

.about-rail-arrow {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--external-white);
    color: var(--external-primary);
    cursor: pointer;
    transition: color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.about-rail-arrow:hover:not(:disabled) {
    color: var(--external-primary-dark);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.12);
}

.about-rail-arrow:disabled {
    opacity: 0.32;
    cursor: default;
}

.about-rail-arrow[hidden] {
    display: none;
}

.about-rail-arrow svg {
    width: 1.15rem;
    height: 1.15rem;
}

.about-rail-dots {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.about-rail-dots[hidden] {
    display: none;
}

/* Los crea rail.js, así que se estilan acá igual que en Inicio */
.about-rail-dots .rail-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--external-secondary-soft);
    opacity: 0.5;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.about-rail-dots .rail-dot:hover {
    opacity: 0.85;
}

.about-rail-dots .rail-dot.is-active {
    background: var(--external-primary);
    opacity: 1;
    transform: scale(1.45);
}

.about-rail-arrow:focus-visible,
.about-rail-dots .rail-dot:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 3px;
}

/* ── DÓNDE ESTAMOS ─────────────────────────────────────────────────── */
.about-sedes {
    background: var(--g-vidrio);
    padding: 3.5rem 0;
}

/* Si Obras queda oculto (sin fotos cargadas), esta sección toma el
   corte contra el blanco de arriba para no pegarse. */
.about-intro + .about-sedes {
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* Cada sede es una tarjeta suelta, no una fila dentro de un recuadro
   compartido con el mapa. Así en teléfono ocupa el ancho completo. */
.about-sede-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.about-sede {
    background: var(--external-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid transparent;
    border-radius: 3px;
    padding: 1.25rem 1.15rem;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Tres estados, y el fondo teñido es de uno solo: si el hover también
   pintaba la tarjeta (antes 0.04 contra 0.05, indistinguibles), pasar
   el mouse por arriba se veía igual que elegir. Acá el hover mueve el
   borde y nada más. */
.about-sede:hover {
    border-color: rgba(40, 116, 82, 0.35);
}

/* Arranque: la fábrica queda señalada con el filo en verde claro, sin
   fondo. Alcanza para decir "empezá por acá" sin afirmar que el mapa
   la está mostrando, que es lo que todavía no pasó. */
.about-sede.is-default {
    border-left-color: var(--external-primary-soft);
}

/* Elegida: la única con superficie verde y filo verde pleno. */
.about-sede.is-active {
    background: rgba(40, 116, 82, 0.05);
    border-color: rgba(40, 116, 82, 0.35);
    border-left-color: var(--external-primary);
}

.about-map {
    min-height: 300px;
    background: #e9ecef;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
}

/* Instagram: la única dirección de la sección que no está en el mapa.
   En un plano de taller la cota se dibuja debajo del dibujo y dice
   cuánto mide lo que se ve; acá se dibuja debajo del mapa y dice que
   el lugar sigue un poco más allá de lo que el mapa muestra.
   Por eso no hay tarjeta, ni recuadro, ni superficie propia: una
   tercera caja se leía como una tercera sucursal. La sección ya tiene
   con qué decirlo —la línea de cota, la firma de la marca— y esta es
   la clase de lugar elegido para el que se guarda. */
.about-online {
    margin-top: 2rem;
    text-align: center;
}

.about-online-cota {
    color: var(--external-primary);
    margin-bottom: 0.85rem;
}

/* Renglón único en Archivo, como los títulos: el arroba es el dato que
   importa, así que se queda con el verde y el peso; el resto de la
   frase lo acompaña en gris. */
.about-online-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    min-height: 44px;
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 700;
    line-height: 1.3;
    color: var(--external-secondary);
    text-decoration: none;
}

.about-online-link .bi {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--external-primary);
    transition: color 0.2s ease;
}

.about-online-link strong {
    font-weight: 800;
    color: var(--external-primary);
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}

.about-online-link:hover strong {
    color: var(--external-primary-dark);
    text-decoration: underline;
}

.about-online-link:hover .bi {
    color: var(--external-primary-dark);
}

.about-online-link:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 4px;
    border-radius: 3px;
}

/* La etiqueta es lo que distingue una sede de la otra, así que se
   queda con el lugar que antes ocupaba un ícono decorativo. */
.about-sede-tag {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--external-primary);
    margin-bottom: 0.3rem;
}

.about-sede-title {
    font-family: var(--font-display);
    font-size: var(--fs-sub);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--external-secondary);
    margin: 0 0 0.85rem;
}

.about-sede-meta {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.about-sede-row {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: var(--fs-small);
    line-height: 1.5;
    color: var(--external-secondary);
}

.about-sede-row svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    color: var(--external-primary);
}

.about-sede-row a {
    color: var(--external-primary);
    font-weight: 600;
    text-decoration: none;
}

.about-sede-row a:hover {
    text-decoration: underline;
}

.about-sede-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
}

.about-sede-action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 700;
    color: var(--external-primary);
    text-decoration: none;
    cursor: pointer;
    transition: gap 0.2s ease, color 0.2s ease;
}

.about-sede-action:hover {
    color: var(--external-primary-dark);
    gap: 0.55rem;
}

.about-sede-action svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.about-sede-action:focus-visible {
    outline: 2px solid var(--external-primary);
    outline-offset: 3px;
}

/* ── ESCRIBINOS ────────────────────────────────────────────────────── */
/* Franja oscura de cierre, igual que "a medida" en Inicio. */
.about-contacto {
    background: var(--g-carbon);
    color: var(--external-white);
    padding: 3.5rem 0;
}

.about-contacto-title {
    margin-bottom: 0.85rem;
    /* Reparte las líneas parejas en vez de dejar una palabra sola
       colgando al final, que es lo que afea un título centrado. */
    text-wrap: balance;
}

.about-contacto-text {
    font-size: var(--fs-body);
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    max-width: 52ch;
    margin: 0 0 1.75rem;
}

/* En fila y del ancho de su texto, igual que el hero de Inicio: dos
   botones estirados a todo el ancho pesan más que el propio título. */
.about-contacto-actions {
    display: flex;
    flex-flow: row wrap;
    gap: 0.55rem;
}

/* ── ≥576px ────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
    .about-rail-item {
        flex-basis: 46%;
    }
}

/* ── ≥768px ────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* El hero vive en externo.css; acá sólo las secciones de la página. */
    .about-intro,
    .about-obras,
    .about-sedes,
    .about-contacto {
        padding: 5rem 0;
    }

    .about-head {
        margin-bottom: 2.5rem;
    }

    /* Las dos sedes lado a lado; el mapa se queda con todo el ancho */
    .about-sede-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .about-map {
        min-height: 420px;
    }

    /* La cota se estira con el mapa: cuanto más ancho el dibujo, más
       larga la acotación. */
    .about-online {
        margin-top: 2.5rem;
    }

    /* Centrado y angosto, igual que el cierre de Inicio: alineado a la
       izquierda dejaba media banda vacía. */
    .about-contacto-inner {
        max-width: 72ch;
        margin-inline: auto;
        text-align: center;
    }

    .about-contacto-inner .g-eyebrow,
    .about-contacto-actions {
        justify-content: center;
    }

    /* Título y bajada usan todo el ancho de la banda: apretados partían
       en renglones desparejos y dejaban una palabra sola al final.
       El balance del título hace el resto. */
    .about-contacto-title,
    .about-contacto-text {
        max-width: none;
    }

    .about-rail-item {
        flex-basis: 31.5%;
    }

    .about-rail-arrow {
        display: inline-flex;
    }
}

/* ── ≥992px ────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
    .about-map {
        min-height: 480px;
    }

    .about-sede {
        padding: 1.5rem 1.6rem;
    }

    .about-rail-item {
        flex-basis: 23.7%;
    }
}

/* ── Movimiento reducido ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .about-rail {
        scroll-behavior: auto;
    }

    .about-sede,
    .about-sede-action,
    .about-rail-arrow {
        transition: none;
    }
}