/* ============================================================
   InmoPanama — Hub evergreen "Buying Property in Panama as a
   Foreigner" (F13.1C — estructura visual, sin contenido editorial
   definitivo todavía).

   Prefijo exclusivo .ibg- (ninguna regla aquí toca selectores
   globales como h1/h2/p/section/a sin estar anidada bajo .ibg-*) —
   no afecta Home, Blog, Propiedades, Torres, Calculadoras, Header
   ni Footer. Reutiliza las variables de marca ya definidas en
   ib-overrides.css (--ib-amarillo, --ib-negro-principal, etc.) en
   vez de redefinir colores nuevos.

   Cargada ÚNICAMENTE en start/buying_guide_foreigners.php, vía
   $ib_extra_head_html (mecanismo ya usado por start/mortgage.php
   para su CSS de noUiSlider) — ib_head.php no fue modificado.
   ============================================================ */

/* ── 1. Página / layout general ── */
.ibg-page {
    padding: 32px 0 48px;
}

.ibg-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 16px;
}

/* ── 2. Hero editorial ── */
.ibg-hero {
    text-align: center;
    padding: 8px 16px 24px;
}

.ibg-hero__h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--ib-negro-principal, #0B0B0B);
    line-height: 1.25;
    margin: 0 0 14px;
}

.ibg-hero__intro {
    max-width: 680px;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ib-texto-oscuro, #222);
}

/* CTA principal del hero (F13.1E-B) — apariencia de botón, enlace real.
   F13.6O.2.1: el hover usaba solo "opacity", sin fijar "color" — Bootstrap
   define globalmente a:hover { color: var(--bs-link-hover-color) } (azul
   #0a58ca, bootstrap.min.css), y por ser <a>:hover (especificidad 0,1,1)
   compite con nuestra regla de clase simple; al no declarar color aquí,
   el texto heredaba ese azul en hover. Se fija explícitamente fondo
   negro + texto amarillo de marca (--ib-amarillo-hover, ya usado en
   otros hover de este mismo archivo) — mayor especificidad que a:hover
   (0,2,0 vs 0,1,1), sin necesitar !important. */
.ibg-hero__cta {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 28px;
    background: var(--ib-amarillo, #F5C400);
    color: var(--ib-negro-principal, #0B0B0B);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity .15s, background-color .15s, color .15s;
}

.ibg-hero__cta:hover {
    background: var(--ib-negro-principal, #0B0B0B);
    color: var(--ib-amarillo-hover, #E0B000);
}

.ibg-hero__cta:focus-visible {
    outline: 2px solid var(--ib-negro-principal, #0B0B0B);
    outline-offset: 2px;
}

/* ── Imagen principal (F13.4E) — entre el hero y el TOC. Proporción
   real de la foto (1672×941) preservada vía width/height en el <img>
   + height:auto aquí; nunca se fuerza un aspect-ratio distinto. ── */
.ibg-feature-image {
    max-width: 1000px;
    margin: 0 auto 28px;
    padding: 0 16px;
    text-align: center;
}

.ibg-feature-image__img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
}

/* ── 3. Contenedor de lectura ── */
.ibg-reading {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ib-texto-oscuro, #222);
}

.ibg-reading p {
    margin: 0 0 16px;
}

/* ── 4. Secciones H2/H3 ── */
/* scroll-margin-top (F13.1D): evita que el header fijo tape el inicio
   de la sección al navegar por ancla. Valores reutilizados tal cual de
   los comentarios ya documentados en start/mortgage.php y
   start/sale_tax.php ("padding-top reserva espacio para el header
   fijo: ≥992px desktop (sticky ~135px) → 140px; <992px mobile (siempre
   fixed ~82px) → 90px") — mismo criterio, sin inventar un valor nuevo.
   El quiebre a 90px vive en el bloque @media (max-width: 992px) más
   abajo, junto a los demás ajustes de ese mismo breakpoint. */
.ibg-section {
    padding: 28px 0;
    border-bottom: 1px solid var(--ib-gris-borde, #D9D9D9);
    scroll-margin-top: 140px;
}

.ibg-section:last-of-type {
    border-bottom: none;
}

.ibg-section__title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ib-negro-principal, #0B0B0B);
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--ib-amarillo, #F5C400);
}

.ibg-subsection {
    margin: 20px 0 0;
}

.ibg-subsection__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ib-negro-principal, #0B0B0B);
    margin: 0 0 8px;
}

/* ── 8. Índice de contenidos (TOC) — F13.1D ──
   Navegación 100% HTML nativa (anclas + scroll-margin-top en
   .ibg-section): sin JS, sin scroll-spy, sin librerías. */
.ibg-toc {
    background: var(--ib-gris-fondo, #F5F5F5);
    border: 1px solid var(--ib-gris-borde, #D9D9D9);
    border-radius: 10px;
    padding: 16px 20px 18px;
    margin: 0 0 28px;
}

.ibg-toc__title {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ib-texto-oscuro, #222);
    opacity: 0.7;
}

.ibg-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 24px;
}

.ibg-toc__item {
    min-width: 0; /* permite que el texto largo se ajuste en vez de desbordar */
}

.ibg-toc__link {
    display: block;
    padding: 6px 2px;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ib-texto-oscuro, #222);
    text-decoration: none;
    border-radius: 4px;
    overflow-wrap: break-word;
}

.ibg-toc__link:hover {
    color: var(--ib-negro-principal, #0B0B0B);
    text-decoration: underline;
}

/* Foco visible por teclado — obligatorio para accesibilidad,
   nunca se quita el outline sin un sustituto igual de visible. */
.ibg-toc__link:focus-visible {
    outline: 2px solid var(--ib-amarillo, #F5C400);
    outline-offset: 2px;
}

/* ── 9. Enlace contextual (F13.1E-B) — ej. guía bancaria del blog.
   Selector `a` SIEMPRE anidado bajo .ibg-contextual-link, nunca global. */
.ibg-contextual-link {
    margin: 4px 0 0;
}

.ibg-contextual-link a {
    color: var(--ib-negro-principal, #0B0B0B);
    font-weight: 700;
    text-decoration: underline;
}

.ibg-contextual-link a:hover {
    color: var(--ib-amarillo-hover, #E0B000);
}

.ibg-contextual-link a:focus-visible {
    outline: 2px solid var(--ib-amarillo, #F5C400);
    outline-offset: 2px;
}

/* ── 10. Tarjetas de herramientas — sección "Tools to Help You Decide"
   (F13.1E-B). 3 columnas en desktop (ajustado en el bloque responsive). */
.ibg-tools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 16px 0 0;
}

.ibg-tool-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px;
    background: var(--ib-gris-fondo, #F5F5F5);
    border: 1.5px solid var(--ib-gris-borde, #D9D9D9);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.ibg-tool-card:hover {
    border-color: var(--ib-amarillo, #F5C400);
    background: #fffbea;
}

.ibg-tool-card:focus-visible {
    outline: 2px solid var(--ib-amarillo, #F5C400);
    outline-offset: 2px;
}

.ibg-tool-card__title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ib-negro-principal, #0B0B0B);
}

.ibg-tool-card__desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--ib-texto-oscuro, #222);
    opacity: 0.75;
}

/* ── 11. CTA final — sección "Start Your Search" (F13.1E-B). */
.ibg-final-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0 0;
}

/* F13.6O.2.1: misma causa y misma corrección que .ibg-hero__cta arriba —
   a:hover global de Bootstrap (azul) competía con estas reglas de clase
   porque ninguna fijaba "color" en :hover. Ver comentario completo en
   .ibg-hero__cta. */
.ibg-final-cta__primary,
.ibg-final-cta__secondary {
    display: inline-block;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: 8px;
    transition: opacity .15s, background-color .15s, color .15s, border-color .15s;
}

.ibg-final-cta__primary {
    background: var(--ib-amarillo, #F5C400);
    color: var(--ib-negro-principal, #0B0B0B);
}

.ibg-final-cta__primary:hover {
    background: var(--ib-negro-principal, #0B0B0B);
    color: var(--ib-amarillo-hover, #E0B000);
}

.ibg-final-cta__secondary {
    background: transparent;
    color: var(--ib-negro-principal, #0B0B0B);
    border: 1.5px solid var(--ib-gris-borde, #D9D9D9);
}

/* "Contactar a InmoPanama": SIGUE transparente (no se convierte en botón
   de fondo amarillo) — solo el texto cambia a amarillo de marca en hover,
   el fondo y el borde permanecen exactamente iguales al estado normal. */
.ibg-final-cta__secondary:hover {
    border-color: var(--ib-negro-principal, #0B0B0B);
    color: var(--ib-amarillo-hover, #E0B000);
}

.ibg-final-cta__primary:focus-visible,
.ibg-final-cta__secondary:focus-visible {
    outline: 2px solid var(--ib-negro-principal, #0B0B0B);
    outline-offset: 2px;
}

/* ── 12. Zonas — sección "Best Areas for Foreign Buyers" (F13.1E-C.2).
   2 columnas en desktop/tablet ancho, 1 columna en móvil (ver bloque
   responsive). Mismo lenguaje visual que .ibg-tool-card, para
   consistencia entre las distintas tarjetas de enlace del hub. */
.ibg-zones-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 16px 0 0;
}

.ibg-zone-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--ib-gris-fondo, #F5F5F5);
    border: 1.5px solid var(--ib-gris-borde, #D9D9D9);
    border-radius: 10px;
    text-decoration: none;
    transition: border-color .15s, background .15s;
}

.ibg-zone-card:hover {
    border-color: var(--ib-amarillo, #F5C400);
    background: #fffbea;
}

.ibg-zone-card:focus-visible {
    outline: 2px solid var(--ib-amarillo, #F5C400);
    outline-offset: 2px;
}

.ibg-zone-card__name {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ib-negro-principal, #0B0B0B);
}

.ibg-zone-card__cta {
    font-size: 0.8125rem;
    color: var(--ib-texto-oscuro, #222);
    opacity: 0.7;
    text-align: right;
    white-space: nowrap;
}

/* ── 13. FAQ — sección "Frequently Asked Questions" (F13.1F).
   details/summary nativos: sin JS, sin librería de acordeón. El
   indicador de apertura (+/−) se dibuja en CSS, nunca se oculta sin
   un reemplazo visible. */
.ibg-faq {
    margin-top: 16px;
}

.ibg-faq__item {
    border-bottom: 1px solid var(--ib-gris-borde, #D9D9D9);
}

.ibg-faq__item:last-child {
    border-bottom: none;
}

.ibg-faq__question {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 14px 32px 14px 4px;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--ib-negro-principal, #0B0B0B);
}

/* Oculta el triángulo nativo (Chrome/Safari) — reemplazado por el
   indicador +/− de abajo, nunca se queda sin ningún indicador. */
.ibg-faq__question::-webkit-details-marker {
    display: none;
}

.ibg-faq__question::after {
    content: '+';
    position: absolute;
    right: 4px;
    top: 12px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ib-amarillo-hover, #E0B000);
}

/* Estado abierto — diferenciado visualmente: indicador cambia a "−"
   y la pregunta toma el color de marca. */
.ibg-faq__item[open] .ibg-faq__question {
    color: var(--ib-amarillo-hover, #E0B000);
}

.ibg-faq__item[open] .ibg-faq__question::after {
    content: '−';
}

.ibg-faq__question:focus-visible {
    outline: 2px solid var(--ib-amarillo, #F5C400);
    outline-offset: 2px;
}

.ibg-faq__answer {
    padding: 0 4px 16px;
    font-style: italic;
    color: #888;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* ── 14. Responsive ──
   Unidades relativas (%, rem, clamp()) ya cubren razonablemente
   1440/1200px (desktop) sin reglas propias — .ibg-content con
   max-width fijo centra el contenido sin desbordar. Los 2 quiebres
   siguientes ajustan tablet y móvil, mismo criterio de "un quiebre
   razonable" ya usado en .mortg-page/.saletax-page.

   F13.6O.2: se RETIRARON aquí los padding-top de .ibg-page agregados en
   F13.6M (90px mobile/tablet) y F13.6M.2 (148px desktop, dentro de un
   @media (min-width: 993px) que ya no existe en este archivo) — ambos
   compensaban manualmente la superposición del header porque todavía
   no existía ningún banner superior. Ahora el banner
   .hero-inner-section-area-sidebar (reutilizado de ib_agent_list.php)
   aporta su propio padding-top para ese mismo propósito — mantener
   ambas compensaciones habría dejado una franja vacía de ~90-148px
   extra después del banner. .ibg-page vuelve a su padding original
   (32px / 48px, sin padding-top especial). */
@media (max-width: 992px) {
    .ibg-content {
        padding: 0 20px;
    }
    /* Header pasa a fixed ~82px (mobile/tablet) en este mismo quiebre —
       mismo criterio ya documentado en mortgage.php/sale_tax.php. */
    .ibg-section {
        scroll-margin-top: 90px;
    }
    /* Una sola columna: evita enlaces apretados/truncados en tablet. */
    .ibg-toc__list {
        grid-template-columns: 1fr;
    }
    /* Tarjetas de herramientas: 3 → 2 columnas en tablet. */
    .ibg-tools-grid {
        grid-template-columns: 1fr 1fr;
    }
    /* Tarjetas de zona: en tablet, nombre y CTA pasan a columna dentro
       de cada tarjeta — evita que "Casco Antiguo" + "View properties
       for sale" se aprieten en una sola fila a este ancho (requisito
       "adaptar sin cortar textos"). La rejilla sigue en 2 columnas. */
    .ibg-zone-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .ibg-zone-card__cta {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .ibg-page {
        padding: 20px 0 32px;
    }
    .ibg-content {
        padding: 0 16px;
    }
    .ibg-section {
        padding: 22px 0;
    }
    .ibg-section__title {
        font-size: 1.1875rem;
    }
    /* Tarjetas de herramientas: 2 → 1 columna en móvil — apiladas, sin
       desbordamiento horizontal incluso a 320px. */
    .ibg-tools-grid {
        grid-template-columns: 1fr;
    }
    /* CTA final: botones en columna, ancho completo — evita texto
       cortado con "Search Properties in Panama" / "Contact InmoPanama"
       en anchos muy estrechos. */
    .ibg-final-cta {
        flex-direction: column;
    }
    .ibg-final-cta__primary,
    .ibg-final-cta__secondary {
        text-align: center;
        width: 100%;
    }
    /* CTA del hero: ancho completo en móvil, mismo criterio. */
    .ibg-hero__cta {
        width: 100%;
    }
    /* Tarjetas de zona: 2 → 1 columna en móvil, mismo criterio que
       .ibg-tools-grid — sin desbordamiento horizontal a 320px. */
    .ibg-zones-grid {
        grid-template-columns: 1fr;
    }
    /* FAQ: preguntas largas ("Are there restrictions on coastal or
       border property?") siguen envolviendo en varias líneas sin
       solapar el indicador +/−, gracias al padding-right ya reservado
       en .ibg-faq__question — solo se reduce el tamaño de fuente para
       coherencia con .ibg-section__title a este ancho. */
    .ibg-faq__question {
        font-size: 0.875rem;
    }
}