/* =========================================================
   ANDAMIO CODE · GARANTÍAS + PREGUNTAS FRECUENTES (INICIO)
   Solo las cards de garantías y las preguntas (css/faq-andamio.css), sin
   títulos (versión PC, en index.html dentro de .sec-highlights,
   arriba de las cards "Frontend Interactivo", etc.). La versión de
   celular está en css/app/app-garantias-faq.css. Colores de css/paleta.css.
   ========================================================= */
.ag-block { width: 100%; text-align: left; }

/* PC: mismo ancho que las cards de rubros (.btp → min(1600px, 92%) de la
   pantalla); sale del tope de 1200px que styles.css le pone a <section>. */
@media (min-width: 768px) {
    .sec-highlights .ag-block {
        width: min(1600px, 92vw);
        margin-left: calc(50% - min(800px, 46vw));
    }
}

/* ---------- garantías ---------- */
.ag-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ag-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(28px, 2.4vw, 40px);
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: 20px;
    transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s, box-shadow .35s;
}

.ag-card:hover { transform: translateY(-6px); border-color: var(--color-accent); box-shadow: 0 24px 60px -24px var(--shadow-color); }

.ag-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    color: var(--color-accent-text);
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent-soft);
}

.ag-icon svg { width: 24px; height: 24px; }

.ag-block .ag-card h3 {
    margin: 0 0 10px;
    font-family: 'Copperplate', 'Copperplate Gothic Light', 'Copperplate Gothic Bold', serif;
    font-weight: 700;
    font-size: clamp(20px, 1.45vw, 25px);
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.ag-card p {
    margin: 0;
    font-size: clamp(15px, 1.05vw, 17px);
    line-height: 1.55;
    color: var(--color-text-muted);
}

/* Las preguntas frecuentes (dentro del andamio) están en css/faq-andamio.css */

@media (prefers-reduced-motion: reduce) {
    .ag-card { transition: none; }
}

/* Igual que .btp__grid: una columna por debajo de 900px */
@media (max-width: 900px) {
    .ag-grid { grid-template-columns: 1fr; gap: 16px; }
}

.ag-more { margin-top: 36px; }