/**
 * Widget "Quiénes somos" — CSS propio y autocontenido. No depende del
 * theme para ninguna propiedad visual (tipografía, color, espaciado):
 * el theme "Senseben" es deliberadamente un cascarón en blanco, toda la
 * maquetación real es responsabilidad del widget.
 */
.roger-editor-nosotros {
    --nosotros-marca: #6f759c;
    --nosotros-plum: #333333;
    --nosotros-rose-soft: color-mix(in srgb, #91adba 18%, white);
    --nosotros-fondo: #f8f9fc;
    --nosotros-texto-principal: #333333;
    --nosotros-texto-secundario: #8d8d8d;
    --nosotros-borde: #e6e8f0;

    font-family: 'Montserrat', sans-serif;
    color: var(--nosotros-texto-principal);
}

.roger-editor-nosotros h1,
.roger-editor-nosotros h2 {
    font-family: 'Poppins', sans-serif;
    margin: 0;
}

.roger-editor-nosotros p {
    line-height: 1.6;
    color: var(--nosotros-texto-principal);
}

.roger-editor-nosotros .container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ---------- Franja superior (imagen) ----------
   Antes esta franja llevaba encima el texto de cabecera sobre un degradado
   oscuro; ahora es puramente visual y muestra la imagen que se elige desde
   el panel del widget. El degradado queda como fondo de respaldo: es lo que
   se ve mientras no haya imagen cargada. */
.roger-editor-nosotros-hero {
    position: relative;
    background: linear-gradient(155deg, var(--nosotros-plum), var(--nosotros-marca) 70%);
    min-height: 320px;
    overflow: hidden;
}

.roger-editor-nosotros-hero-img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* La franja es más ancha que alta: "cover" recorta lo que sobra en vez
       de deformar la foto. */
    object-fit: cover;
}

/* ---------- Franja CON imagen cargada ----------
   Acá la imagen manda: la franja toma el alto que le corresponde a la foto a
   ancho completo, en vez de recortarla contra un alto fijo. Es lo correcto
   para un banner con texto/íconos adentro — con "cover" se le comía parte del
   contenido (se veía cortado arriba y a los costados). */
.roger-editor-nosotros-hero--con-imagen {
    min-height: 0;
}

.roger-editor-nosotros-hero--con-imagen .roger-editor-nosotros-hero-img {
    position: static;
    width: 100%;
    height: auto;
    /* Tope de seguridad: una imagen cuadrada o vertical, a ancho completo,
       daría una franja de miles de píxeles que empuja toda la página fuera de
       la pantalla. Con el tope, "contain" la encaja entera dentro del alto
       máximo (deja el degradado a los costados) en vez de recortarla o
       deformarla. En una foto apaisada normal el tope no llega a actuar. */
    max-height: 70vh;
    object-fit: contain;
}

/* ---------- Cabecera de la página (debajo de la franja) ----------
   Va sobre fondo claro, así que todo el texto es oscuro (cuando vivía
   dentro de la franja era blanco sobre el degradado). */
.roger-editor-nosotros-encabezado {
    padding: 40px 0 8px;
}

.roger-editor-nosotros-encabezado .roger-editor-breadcrumb {
    display: block;
    font-size: 13px;
    color: var(--nosotros-texto-secundario);
    margin-bottom: 0;
}

.roger-editor-nosotros-encabezado .roger-editor-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.roger-editor-nosotros-encabezado .roger-editor-breadcrumb a:hover {
    color: var(--nosotros-marca);
}

/* Eyebrow, título y bajada van centrados; la ruta (breadcrumb) se queda
   alineada a la izquierda, como es habitual en una miga de pan. */
.roger-editor-nosotros-encabezado .roger-editor-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--nosotros-marca);
    margin-top: 20px;
    margin-bottom: 8px;
    text-align: center;
}

.roger-editor-nosotros-encabezado h1 {
    font-size: 38px;
    font-weight: 600;
    color: var(--nosotros-texto-principal);
    margin-bottom: 14px;
    text-align: center;
}

.roger-editor-nosotros-encabezado p {
    font-size: 15px;
    color: var(--nosotros-texto-secundario);
    line-height: 1.7;
    /* El max-width evita renglones larguísimos; con margin auto ese bloque
       angosto queda centrado en vez de pegado a la izquierda. */
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
}

/* ---------- Contenido (introducción, visión/misión, diferenciales) ---------- */
.roger-editor-nosotros .roger-editor-nosotros-contenido {
    max-width: 800px;
    padding-top: 48px;
    padding-bottom: 64px;
}

/* ---------- Introducción (párrafos libres) ---------- */
.roger-editor-nosotros-intro {
    max-width: 800px;
    margin-bottom: 48px;
}

.roger-editor-nosotros-intro p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--nosotros-texto-secundario);
    margin: 0 0 16px;
}

.roger-editor-nosotros-intro p:last-child {
    margin-bottom: 0;
}

/* ---------- Visión / Misión ---------- */
.roger-editor-nosotros-vm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 56px;
}

.roger-editor-nosotros-vm-card {
    background: #fff;
    border: 1px solid var(--nosotros-borde);
    border-radius: 14px;
    padding: 32px;
    box-shadow: 0 2px 14px rgba(51, 51, 51, .08);
}

.roger-editor-nosotros-vm-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--nosotros-rose-soft);
    color: var(--nosotros-marca);
}

.roger-editor-nosotros-vm-icono svg,
.roger-editor-nosotros-vm-icono img {
    width: 24px;
    height: 24px;
}

.roger-editor-nosotros-vm-card h2 {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--nosotros-texto-principal);
}

.roger-editor-nosotros-vm-card p {
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--nosotros-texto-secundario);
    margin: 0;
}

/* ---------- Diferenciales / features ---------- */
.roger-editor-nosotros-features-head {
    text-align: center;
    margin-bottom: 32px;
}

.roger-editor-eyebrow-sm {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--nosotros-marca);
    margin-bottom: 16px;
}

.roger-editor-nosotros-features-head h2 {
    font-size: 28px;
    font-weight: 600;
    margin-top: 6px;
    color: var(--nosotros-texto-principal);
}

.roger-editor-nosotros-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.roger-editor-nosotros-feature {
    background: var(--nosotros-fondo);
    border-radius: 12px;
    padding: 26px 22px;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

.roger-editor-nosotros-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(111, 117, 156, .16);
}

.roger-editor-nosotros-feature-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: #fff;
    color: var(--nosotros-marca);
}

.roger-editor-nosotros-feature-icono svg,
.roger-editor-nosotros-feature-icono img {
    width: 22px;
    height: 22px;
}

.roger-editor-nosotros-feature p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--nosotros-texto-principal);
}

@media (max-width: 900px) {
    .roger-editor-nosotros-vm-grid {
        grid-template-columns: 1fr;
    }
    .roger-editor-nosotros-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .roger-editor-nosotros-encabezado h1 {
        font-size: 28px;
    }
    .roger-editor-nosotros-hero {
        min-height: 200px;
    }
    /* Con imagen no hay alto mínimo que valga: si el banner es más bajo que
       ese mínimo, sobraría una franja de degradado debajo de la foto. */
    .roger-editor-nosotros-hero--con-imagen {
        min-height: 0;
    }
    .roger-editor-nosotros-features-grid {
        grid-template-columns: 1fr;
    }
}