/* ============================================================
   ESTANDARTE — page-nosotros.css
   Estilos de la página "Nosotros" (plantilla template-nosotros.php).
   ============================================================ */

/* ----------------------------------------------------------
   1. Portada / hero
   ---------------------------------------------------------- */
.page-hero {
    position: relative;
    min-height: 500px;
    background: #fff;
    overflow: hidden;
}
.page-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

/* ----------------------------------------------------------
   2. Sobre nosotros (imagen + texto)
   ---------------------------------------------------------- */
.nos-about { background: var(--color-bg-alt2); }
.nos-about__container {
    padding-top: 80px;
    padding-bottom: 100px;
}
/* Bloque superior: miga de pan + título de la página */
.nos-about__head { margin-bottom: 60px; }
.nos-about__crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    color: var(--color-blue);
    font-size: var(--fs-18);
    text-transform: uppercase;
}
.nos-about__crumb a { color: var(--color-blue); }
.nos-about__crumb a:hover { color: #0e1946; }
.nos-about__page-title {
    margin: 0;
    color: #0e1946;
    font-weight: var(--fw-heavy);
    font-size: var(--fs-64);
    line-height: 1;
    text-transform: uppercase;
}
.nos-about__inner {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}
.nos-about__media {
    position: relative;
    flex: 0 1 800px;
    width: 800px;
    max-width: 800px;
    height: 496px;
    border-radius: var(--radius);
    overflow: hidden;
}
.nos-about__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nos-about__body {
    flex: 0 1 560px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Título amarillo "SOBRE NOSOTROS": siempre en dos líneas, ajustado al texto */
.nos-about__title { width: min-content; color: #0e1946; }
.nos-about__copy { color: #0e1946; font-size: var(--fs-20); }
.nos-about__copy p { margin: 0; }
.nos-about__copy p + p { margin-top: 1em; }

/* ----------------------------------------------------------
   3. Frase institucional
   ---------------------------------------------------------- */
.nos-quote { position: relative; overflow: hidden; background: var(--color-blue); }
.nos-quote__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    min-height: 622px;
    padding-block: 100px;
    text-align: center;
}
/* Bloque de la cita: ancho del texto (4 líneas); las comillas se anclan a sus esquinas */
.nos-quote__quote {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
}
.nos-quote__text {
    margin: 0;
    color: var(--color-white);
    font-weight: var(--fw-black);
    font-size: var(--fs-36);
    line-height: 1.67; /* 60px sobre 36px (Figma) */
    text-transform: uppercase;
}
.nos-quote__hl {
    background: var(--color-yellow);
    color: #0e1946;
    padding: 0 6px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
/* El botón de la frase abraza su texto (no ocupa todo el ancho en móvil) */
.nos-quote__inner .btn { width: auto; }
.nos-quote__mark {
    position: absolute;
    line-height: 0;
    pointer-events: none;
}
.nos-quote__mark svg { width: 127px; height: 73px; display: block; }
/* Comilla de apertura: pegada a la primera línea (arriba-izquierda) */
.nos-quote__mark--tl { top: -46px; left: -18px; }
/* Comilla de cierre: pegada a la última línea (abajo-derecha) */
.nos-quote__mark--br { bottom: -46px; right: -18px; transform: rotate(180deg); }

/* ----------------------------------------------------------
   4. Nuestra Filosofía (3 tarjetas)
   ---------------------------------------------------------- */
.nos-phil { padding-block: var(--space-3xl); }
.nos-phil__title {
    margin: 0 0 var(--space-2xl);
    color: var(--color-blue);
    font-weight: var(--fw-heavy);
    font-size: var(--fs-48);
    text-align: center;
    text-transform: uppercase;
}
.nos-phil__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 42px;
}
.nos-phil__card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px;
    min-height: 263px;
    background: var(--color-blue);
    border-radius: var(--radius);
    box-shadow: 0 20px 12.5px rgba(0, 0, 0, 0.1), 0 8px 5px rgba(0, 0, 0, 0.1);
}
/* Resplandor difuso detrás de la tarjeta (Figma) */
.nos-phil__card::before {
    content: "";
    position: absolute;
    inset: -2px;
    z-index: -1;
    border-radius: 16px;
    background: linear-gradient(90deg, #0072ce, #7dc5ff);
    opacity: 0.3;
    filter: blur(8px);
}
.nos-phil__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    background: var(--color-white);
    border-radius: var(--radius);
}
.nos-phil__icon svg { width: 32px; height: 32px; }
.nos-phil__card-body { display: flex; flex-direction: column; }
.nos-phil__card-title {
    margin: 0 0 16px;
    color: var(--color-yellow);
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
}
.nos-phil__card-copy { margin: 0; color: var(--color-white); font-size: 19px; }

/* ----------------------------------------------------------
   5. Banner de contacto (imagen + contenido)
   ---------------------------------------------------------- */
.nos-cta { background: var(--color-bg-alt2); }
.nos-cta__inner {
    display: flex;
    gap: 40px;
    align-items: center;
}
.nos-cta__media {
    position: relative;
    flex: 0 1 686px;
    max-width: 686px;
    min-height: 650px;
    overflow: hidden;
}
.nos-cta__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nos-cta__body {
    flex: 0 1 640px;
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.nos-cta__tag { margin: 0; color: var(--color-blue); font-weight: var(--fw-heavy); font-size: var(--fs-24); }
.nos-cta__title { width: 100%; color: #0e1946; line-height: 1.3; } /* caja amarilla a todo el ancho */
.nos-cta__copy { margin: 0; width: 589px; max-width: 100%; color: #0e1946; font-size: var(--fs-20); }
.nos-cta__body .btn { align-self: flex-start; }

/* ----------------------------------------------------------
   6. Responsive
   ---------------------------------------------------------- */
@media (max-width: 992px) {
    .page-hero { min-height: 320px; }

    .nos-about__inner,
    .nos-cta__inner { flex-direction: column; align-items: stretch; }
    .nos-about__container { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
    .nos-about__head { margin-bottom: var(--space-lg); }
    .nos-about__page-title { font-size: var(--fs-48); }
    .nos-about__media { flex: none; width: auto; max-width: none; height: auto; min-height: 360px; }
    .nos-about__body { flex: none; max-width: none; }
    .nos-cta__inner { padding-block: var(--space-xl); } /* separación del footer en móvil */
    .nos-cta__media { flex: none; max-width: none; min-height: 300px; }
    .nos-cta__body { flex: none; max-width: none; }

    .nos-phil__grid { grid-template-columns: 1fr; }

    .nos-quote__inner { min-height: 0; padding-block: var(--space-2xl); gap: 32px; }
    .nos-quote__mark svg { width: 56px; height: 32px; }
    .nos-quote__mark--tl { top: -24px; left: -4px; }
    .nos-quote__mark--br { bottom: -24px; right: -4px; }
}

@media (max-width: 768px) {
    .page-hero { min-height: 240px; }

    .nos-about__page-title { font-size: var(--fs-36); }
    /* "SOBRE NOSOTROS" en una sola línea en móvil */
    .nos-about__title { font-size: 32px; width: auto; white-space: nowrap; }
    .nos-about__title br { display: none; }
    .nos-about__copy,
    .nos-cta__copy,
    .nos-phil__card-copy { font-size: 17px; }
    .nos-about__media { min-height: 300px; }
    .nos-phil__title { font-size: var(--fs-36); }

    /* Frase: más compacta, con espacio para las comillas */
    .nos-quote__inner { padding-block: var(--space-xl); gap: 28px; }
    .nos-quote__quote { padding-block: 42px; }
    .nos-quote__text { font-size: var(--fs-20); line-height: 1.45; }
    .nos-quote__mark svg { width: 48px; height: 28px; }
    .nos-quote__mark--tl { top: 0; left: -2px; }
    .nos-quote__mark--br { bottom: 0; right: -2px; }

    .nos-cta__title { font-size: 32px; }
    .nos-cta__media { min-height: 260px; }

    /* Filosofía: icono a la izquierda, centrado con el contenido */
    .nos-phil__card { flex-direction: row; align-items: center; gap: 20px; min-height: 0; }
    .nos-phil__icon { margin-bottom: 0; flex-shrink: 0; }
    .nos-phil__card-body { flex: 1; min-width: 0; }
}

@media (max-width: 480px) {
    .page-hero { min-height: 190px; }

    .nos-about__crumb { font-size: var(--fs-16); }
    .nos-about__page-title { font-size: 28px; }
    .nos-about__title,
    .nos-cta__title { font-size: 24px; }
    .nos-about__copy,
    .nos-cta__copy,
    .nos-phil__card-copy { font-size: 16px; }
    .nos-about__media { min-height: 240px; }
    .nos-phil__title { font-size: var(--fs-32); }

    .nos-quote__inner { padding-block: var(--space-lg); }
    .nos-quote__text { font-size: 18px; line-height: 1.4; }
    .nos-quote__mark svg { width: 40px; height: 23px; }
}