/* ============================================================ */
/* GC ARMADOR — CSS v7                                             */
/* Reemplaza v6 completo. Vuelta a la base de v1 (pedido por David): */
/* - .gc-context-card/.gc-context-title/.gc-context-sub: dadas de   */
/*   baja. Vuelve .gc-intro-card con el paso a paso original        */
/*   (.gc-steps-wrapper, .gc-step-item, .gc-step-number,            */
/*   .gc-step-desc, .gc-step-divider) — mismo copy que el HTML que  */
/*   David pegó al principio del proyecto, navy sólido (sin el      */
/*   gradiente que tenía el original, eso seguía siendo un bug).    */
/* - .gc-trustbar-mini: dado de baja. Nuevo: .gc-trust-cards /      */
/*   .gc-trust-card — vuelven a ser tarjetas visuales (pedido de    */
/*   David), pero de una sola línea cada una, no la versión con     */
/*   label+descripción de v3/v4 (esa lección de "menos texto" de    */
/*   la ronda pasada se mantiene).                                   */
/* ============================================================ */

.gc-armador-container {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    padding: 10px !important;
}

/* Tarjeta de instrucciones — navy sólido, sin gradiente (el original
   de David tenía dos definiciones en conflicto, una de ellas con
   gradiente diagonal; se resuelve acá con una sola, sólida). */
.gc-intro-card {
    background-color: #051230;
    border-radius: 12px;
    padding: 24px;
    margin: 0 auto 14px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
}
.gc-intro-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: -0.3px;
}
.gc-intro-text {
    margin: 0 0 15px 0;
    font-size: 15px;
    color: #ffffff;
}
.gc-intro-text strong {
    color: #02b8fc;
    font-weight: 700;
}

/* Paso a paso — caja blanca dentro de la tarjeta navy, igual que el
   original de David. */
.gc-steps-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #f1f5f9;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
}
.gc-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.gc-step-number {
    width: 36px;
    height: 36px;
    background-color: #051230;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(5, 18, 48, 0.25);
}
.gc-step-desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
    color: #334155;
}
.gc-step-desc strong {
    color: #051230;
    font-size: 15px;
}
.gc-step-divider {
    width: 30px;
    height: 2px;
    background-color: #cbd5e1;
    border-radius: 2px;
}

/* Contenedor de Marcas */
.gc-brands-container {
    display: flex;
    gap: 15px;
    justify-content: space-between;
    align-items: stretch;
    margin: 0;
}

.gc-brand-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    border: 2px solid transparent;
    background-color: #ffffff;
}
.gc-brand-card:focus-visible {
    outline: 3px solid #02b8fc;
    outline-offset: 2px;
}
.gc-img-wrapper {
    width: 100%;
    aspect-ratio: 748 / 456; /* medida real de logoamd.jpg / logointel.jpg */
    overflow: hidden;
    background-color: #111;
    pointer-events: none;
}
.gc-brand-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.gc-brand-card:hover .gc-brand-img {
    transform: scale(1.05);
}
.gc-btn-action {
    padding: 16px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: background-color 0.3s ease;
    pointer-events: none;
}
.gc-amd-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(255, 0, 44, 0.2);
    border-color: #ff002c;
}
.gc-btn-amd { background-color: #cc0023; }
.gc-amd-card:hover .gc-btn-amd { background-color: #ff002c; }
.gc-intel-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 25px rgba(37, 99, 236, 0.2);
    border-color: #2563ec;
}
.gc-btn-intel { background-color: #1d4ed8; }
.gc-intel-card:hover .gc-btn-intel { background-color: #2563ec; }

/* Tarjetas de confianza — 4 cards de una sola línea cada una. */
.gc-trust-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.gc-trust-card {
    flex: 1 1 22%;
    min-width: 140px;
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #051230;
}
.gc-trust-card::before {
    content: "\2713  ";
    color: #02b8fc;
}

/* ===================== BLOQUE 2 ===================== */

.gc-armador-block2 { margin-top: 20px; }

.gc-unsure-card {
    background-color: #ffffff;
    border: 1px solid #eaeaef;
    border-radius: 12px;
    padding: 18px 24px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}
.gc-unsure-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #051230;
}
.gc-btn-secondary {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #051230;
    border-radius: 8px;
    color: #051230;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.gc-btn-secondary:hover,
.gc-btn-secondary:focus-visible {
    background-color: #051230;
    color: #ffffff;
    outline: none;
}
.gc-btn-secondary:focus-visible {
    outline: 3px solid #02b8fc;
    outline-offset: 2px;
}

/* Responsive (celulares) */
@media (max-width: 768px) {
    /* Fix pedido por David: la navbar tapaba el primer bloque en mobile */
    .gc-intro-card {
        padding: 16px;
        margin-top: 30px;
    }
    .gc-intro-title { font-size: 17px; }
    .gc-steps-wrapper { flex-direction: column; gap: 10px; padding: 20px; }
    .gc-step-item { flex-direction: row; text-align: left; width: 100%; gap: 15px; }
    .gc-step-divider { width: 2px; height: 20px; margin: -5px 0; }
    .gc-brands-container { flex-direction: column; gap: 10px; }
    .gc-unsure-card { flex-direction: column; gap: 10px; }
}

/* ===================== Overrides nativos de la página ===================== */
/* Confirmar si estas reglas son específicas de esta landing o quedaron
   pegadas de otra hoja — si no aplican acá, se pueden borrar sin afectar
   lo de arriba. */

body.armador h1.titulo {
    text-align: center;
    font-size: 25px;
    height: 0;
    visibility: hidden;
}

.reseñasdegoogle {
    visibility: hidden;
    height: 0;
}

p.verdoc {
    visibility: hidden;
    height: 0;
    margin: 0 !important;
}

/* Bug de orden en el CSS original: la regla global (-55px) estaba
   declarada DESPUÉS de la de mobile (-30px), así que ganaba en todos
   los tamaños y la de mobile nunca se aplicaba. Reordenado — los
   valores son los que ya tenías, no los inventé; confirmalos. */
div#detalle {
    margin-top: -55px;
}
@media (max-width: 600px) {
    div#detalle {
        margin-top: -30px;
    }
}

h2.titulo {
    display: none;
}

h1.copete {
    display: none;
}

.container.general {
    margin-top: 2%;
}