/* ════════════════════════════════════════════════════════
   ENFOQUE + ARQUITECTURA — dos bloques editoriales apilados
   ════════════════════════════════════════════════════════ */
.enfoque-arquitectura {
    margin: 0;
}

/* ════════════════════════════════════════════════════════
   BLOQUE SUPERIOR: enfoque editorial
   ════════════════════════════════════════════════════════ */
.enfoque-arquitectura__enfoque {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
     margin:0; background: var(--bg-surface-soft); padding-block:var(--space-7);


}

.enfoque-arquitectura__columna-editorial {
    display: flex;
    flex-direction: column;
    align-items: flex-start;


}

.enfoque-arquitectura__linea {
    display: block;
    width: 32px;
    height: 2px;
    background-color: var(--bg-surface-accent);
    margin-bottom: var(--space-4);
}

.enfoque-arquitectura__columna-descripcion {
    padding-top: var(--space-0); 
        background-color: transparent;
        padding: 3rem;
        border: 1px solid var(--border-soft); 
        border-radius: var(--radius-2); 
        box-shadow:var(--box-shadow-triple);
        transition:var(--transition-cards);
 
    }

.enfoque-arquitectura__columna-descripcion:hover {
       transform: var(--translate-y-cards);
        box-shadow:var(--box-shadow-triple-hover);
    }










.enfoque-arquitectura__columna-descripcion p {
    margin: 0;
}

/* ─── Panel de iconos decorativos ─────────────── */
.enfoque-arquitectura__panel-iconos {
    display: flex;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.enfoque-arquitectura__icono {
    position: relative;
    width: 44px;
    height: 44px;
    background-color:var(--border-soft);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    flex-shrink: 0;
}

/* hover GPU-only: overlay con opacity en vez de animar background-color */
.enfoque-arquitectura__icono::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-color: var(--border-soft);
    opacity: 0;
    transition: opacity 150ms ease;
}

.enfoque-arquitectura__icono:hover::before {
    opacity: 1;
}

.enfoque-arquitectura__icono svg {
    position: relative; /* por encima del overlay */
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ════════════════════════════════════════════════════════
   BLOQUE INFERIOR: arquitectura
   ════════════════════════════════════════════════════════ */
.enfoque-arquitectura__arquitectura {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.enfoque-arquitectura__titulo-inferior { 
    max-width: 15ch;
    margin: 0;
    color:var(--text-accent);
    padding-top: var(--space-7);
}

/* ─── Rejilla de las tres celdas (párrafos) ───── */
.enfoque-arquitectura__columnas {
    display: grid;
    grid-template-columns: 1fr;       /* <768px: apiladas */
    gap: var(--space-2);
}

    .enfoque-arquitectura__columna-parrafo {
        background-color: transparent;
        padding: 3rem;
        border: 1px solid var(--border-soft); 
        border-radius: var(--radius-2); 
        box-shadow:var(--box-shadow-triple);
        transition:var(--transition-cards);
 
    }

    .enfoque-arquitectura__columna-parrafo:hover {
       transform: var(--translate-y-cards);
        box-shadow:var(--box-shadow-triple-hover);
    }

    .enfoque-arquitectura__columna-parrafo p {
       margin-top:var(--space-2);
    }


/* ─── Iconos sobre cada párrafo ───────────────── */
.enfoque-arquitectura__panel-iconos--parrafo {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 2rem;                 /* separación en móvil */
}

/* ════════════════════════════════════════════════════════
   768px+ : enfoque a 2 col · celdas en 2 + 1 (tarjeta)
   ════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
    .enfoque-arquitectura {

    }

    .enfoque-arquitectura__enfoque {
        grid-template-columns: 1.2fr 1fr;
        gap: var(--space-5);
    }

    .enfoque-arquitectura__arquitectura {
        gap: var(--space-4); margin:0; padding-top: var(--space-4);
    }

    .enfoque-arquitectura__columnas {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    /* la tercera celda ocupa todo el ancho, bajo las otras dos */
    .enfoque-arquitectura__columna-parrafo:last-child {
        grid-column: 1 / -1;
    }

    .enfoque-arquitectura__panel-iconos--parrafo {
        margin-top: 0;
    }
}

/* ════════════════════════════════════════════════════════
   1200px+ : gap mayor en el enfoque editorial
   ════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    .enfoque-arquitectura__enfoque {
        gap: var(--space-7);
    }
}

/* ════════════════════════════════════════════════════════
   1400px+ : las tres celdas en línea, sin tarjeta
   ════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
    .enfoque-arquitectura__columnas {
        grid-template-columns: repeat(3, 1fr);
        gap:var(--space-2);
    }




    .enfoque-arquitectura__columna-parrafo:last-child {
        grid-column: auto;
    }
}

/* ─── Foco accesible ──────────────────────────── */
.enfoque-arquitectura :focus-visible {
    outline: 2px solid var(--border-accent);
    outline-offset: 4px;
}

/* ─── Reduce motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .enfoque-arquitectura__icono::before {
        transition: none;
    }
}