/* ========================================
   PÁGINAS.CSS
   Estilos exclusivos de nosotros.html y contacto.html.
   Reutiliza los tokens y componentes de styles-unified.css
   (que se enlaza antes que este archivo) — no redefine nada
   de ese sistema, solo agrega piezas nuevas para estas 2 páginas.
   ======================================== */

/* Hero más bajo para páginas internas (el de la home es 100vh) */
.hero.hero-short {
    min-height: 62vh;
}

@media (max-width: 680px) {
    .hero.hero-short { min-height: 56vh; }
}

/* ========================================
   EL ORIGEN — historia de marca
   ======================================== */
.origin-section {
    padding: clamp(90px, 12vw, 160px) 0;
    background: var(--paper);
}

.origin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.origin-content .title { margin-bottom: 24px; }

.origin-description {
    font-size: 16px;
    line-height: 1.85;
    color: var(--text-muted);
    margin-bottom: 22px;
    max-width: 54ch;
}

.origin-description strong { color: var(--text); font-weight: 600; }

.origin-image .frame {
    aspect-ratio: 4 / 5;
    width: 100%;
}

.origin-image .frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 1080px) {
    .origin-grid { grid-template-columns: 1fr; gap: 44px; }
    .origin-image { order: -1; }
    .origin-image .frame { aspect-ratio: 16 / 10; }
}

/* ========================================
   CÓMO TRABAJAMOS — 3 pilares
   ======================================== */
.process-section {
    padding: clamp(90px, 12vw, 160px) 0;
    background: var(--stone);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    margin-top: 60px;
}

.process-item { position: relative; }

.process-item .category-index {
    position: static;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 32px;
    color: var(--gold);
    text-shadow: none;
    margin-bottom: 18px;
    display: block;
}

.process-item h3 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
}

.process-item p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-muted);
}

.process-item::before {
    content: '';
    display: block;
    width: 40px;
    height: 1.5px;
    background: var(--gold);
    margin-bottom: 22px;
}

@media (max-width: 900px) {
    .process-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ========================================
   FRANJA DE CREDENCIALES
   ======================================== */
.credentials-section {
    background: var(--ink);
    color: var(--text-on-ink);
    padding: clamp(70px, 9vw, 110px) 0;
}

.credentials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    text-align: center;
}

.credential-figure {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(36px, 4.5vw, 56px);
    color: var(--gold);
    line-height: 1;
    margin-bottom: 12px;
}

.credential-label {
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-on-ink-muted);
}

.credential-list {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-on-ink-muted);
}

@media (max-width: 680px) {
    .credentials-grid { grid-template-columns: 1fr; gap: 44px; }
}

/* ========================================
   GALERÍA DE MOMENTOS (nosotros)
   ======================================== */
.moments-section {
    padding: clamp(90px, 12vw, 160px) 0;
    background: var(--paper);
}

.moments-grid {
    columns: 3;
    column-gap: 28px;
    margin-top: 56px;
}

.moments-grid .frame {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 28px;
}

.moments-grid .frame img {
    width: 100%;
    height: auto;
    display: block;
}

/* franjas panorámicas de apertura y cierre */
.moments-grid .frame.moments-band {
    column-span: all;
}

.moments-grid .frame.moments-band img {
    aspect-ratio: 21 / 8;
    object-fit: cover;
}

@media (max-width: 1080px) {
    .moments-grid { columns: 2; column-gap: 20px; }
    .moments-grid .frame { margin-bottom: 20px; }
    .moments-grid .frame.moments-band img { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
    .moments-grid { columns: 1; }
    .moments-grid .frame.moments-band img { aspect-ratio: 4 / 3; }
}

/* ========================================
   INTRO DE PÁGINA (contacto)
   ======================================== */
.page-intro {
    padding: clamp(150px, 16vw, 210px) 0 40px;
    background: var(--paper);
    text-align: center;
}

.page-intro .eyebrow { justify-content: center; margin-bottom: 20px; }
.page-intro .title { max-width: none; }

/* ========================================
   MAPA EMBEBIDO
   ======================================== */
.map-section {
    padding: 0 0 clamp(90px, 12vw, 160px);
    background: var(--paper);
}

.map-embed {
    width: 100%;
    aspect-ratio: 16 / 6;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-rest);
    filter: grayscale(35%) contrast(1.05);
}

.map-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 900px) {
    .map-embed { aspect-ratio: 4 / 5; }
}