/* =====================================================================
   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 lenguaje de bandas que Inicio, para que las dos páginas se lean
   como el mismo sitio:

     hero       foto oscura, con el filete verde de .g-hero
     quiénes    blanco      + trama
     obras      vidrio      + trama
     dónde      vidrio      + trama
     escribinos VERDE lleno + trama en blanco  ← la banda verde

   La trama (.g-plano) y la banda verde (.g-banda-verde) vienen completas
   de externo.css: son las mismas de Inicio. Una sola
   banda verde por página, y acá es el cierre: es donde la página deja
   de contar y empieza a pedir algo.
   ===================================================================== */

/* ── 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, a todo el ancho del contenedor.
   El primer párrafo entra un punto más grande para dar entrada. */
.about-intro-text {
    font-size: var(--fs-body);
    line-height: 1.4;
    color: var(--external-secondary);
    margin: 0 0 1.1rem;
    text-align: justify;
    /* Sin cortes, el justificado abre huecos grandes en teléfono. */
    hyphens: auto;
}

.about-intro-text:first-child {
    font-size: var(--fs-lead);
    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-verde-tinte);
    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);
}

/* Panel único: info y mapa son dos caras de la misma tarjeta, no dos
   bloques sueltos. En teléfono se apilan; el mapa entra con una altura
   fija, la justa para ubicar la fábrica, no para llenar la pantalla. */
.about-sede-panel {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--external-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.about-sede-info {
    padding: 1.5rem 1.35rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.about-sede-action {
    margin-top: 0.35rem;
}

.about-map {
    height: 220px;
    background: #e9ecef;
}

/* 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;
}

/* ── ESCRIBINOS ────────────────────────────────────────────────────── */
/* La banda verde de la página (.g-banda-verde pone el color). Era carbón,
   igual que "a medida" en Inicio, y con eso Nosotros no tenía ni una
   banda de color: se leía como otro sitio. El botón blanco (.g-btn--solid)
   funciona igual sobre verde que sobre carbón. */
.about-contacto {
    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;
    }

    /* Info y mapa lado a lado dentro del mismo panel, en vez de
       apilados: hay lugar de sobra a lo ancho y el mapa no necesita
       ser gigante para ubicar un solo punto. */
    .about-sede-panel {
        grid-template-columns: minmax(280px, 360px) 1fr;
        margin-bottom: 1.5rem;
    }

    .about-sede-info {
        padding: 2rem;
        border-bottom: none;
        border-right: 1px solid rgba(0, 0, 0, 0.08);
    }

    .about-map {
        height: 360px;
    }

    /* 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-sede-panel {
        grid-template-columns: 400px 1fr;
    }

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

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

    .about-rail-arrow {
        transition: none;
    }
}