<?php 
    // 1. Incluir la conexión a la Base de Datos
    require_once 'Config/conexion.php';
    require_once 'Config/visitas.php';
    visitas_registrar($conexion, 'kotiza');

    // Script de actualización de tipos de cambio en vivo
    $page_js = 'assets/js/live-rates.js';

    // 2. Incluir el Header
    include_once 'views/header.php'; 

    // 3. Consultar las casas de cambio y sus relaciones con bancos y días
    try {
        $sql = "
            SELECT t.*, 
                   GROUP_CONCAT(DISTINCT b.codigo) AS bancos_codigos,
                   GROUP_CONCAT(DISTINCT d.codigo) AS dias_codigos
            FROM tipos_cambio_hoy t
            LEFT JOIN casa_cambio_bancos cb ON t.id = cb.casa_cambio_id
            LEFT JOIN bancos b ON cb.banco_id = b.id
            LEFT JOIN casa_cambio_dias cd ON t.id = cd.casa_cambio_id
            LEFT JOIN dias_operacion d ON cd.dia_id = d.id
            WHERE t.activo = 1
            GROUP BY t.id
            ORDER BY t.id ASC
        ";
        $stmt = $conexion->query($sql);
        $casas_cambio = $stmt->fetchAll();
    } catch (PDOException $e) {
        $casas_cambio = [];
    }

    // Función auxiliar para calcular tiempo transcurrido
    function calcularTiempoTranscurrido($fechaStr) {
        if (empty($fechaStr)) return '1 min';
        $timestamp = strtotime($fechaStr);
        $diferencia = max(0, time() - $timestamp);

        if ($diferencia < 60) {
            return '1 min';
        } elseif ($diferencia < 3600) {
            $min = floor($diferencia / 60);
            return $min . ' min';
        } elseif ($diferencia < 86400) {
            $hs = floor($diferencia / 3600);
            return $hs . ' hs';
        } else {
            $dias = floor($diferencia / 86400);
            return $dias . ' d';
        }
    }

    // Código de banco a partir del nombre mostrado en "Bancos"
    function codigoBanco(string $nombre): string {
        $nombre = strtolower(trim($nombre));
        $nombre = strtr($nombre, ['á' => 'a', 'é' => 'e', 'í' => 'i', 'ó' => 'o', 'ú' => 'u', 'ü' => 'u']);

        return match ($nombre) {
            'bcp' => 'bcp',
            'bbva' => 'bbva',
            'scotiabank' => 'scotiabank',
            'interbank' => 'interbank',
            'banbif' => 'banbif',
            'bancom' => 'bancom',
            'pichincha' => 'pichincha',
            'bn' => 'bn',
            default => '',
        };
    }

    // Dividir los resultados en 2 grupos para mostrarlos en 2 columnas
    $total = count($casas_cambio);
    $mitad = ceil($total / 2);
    $columna1 = array_slice($casas_cambio, 0, (int)$mitad);
    $columna2 = array_slice($casas_cambio, (int)$mitad);
?>

<!-- CARRUSEL DE BANNERS DINÁMICOS -->
<section id="bannerCarousel" class="carousel slide" data-bs-ride="carousel" data-bs-interval="6000">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#bannerCarousel" data-bs-slide-to="0" class="active" aria-current="true"></button>
        <button type="button" data-bs-target="#bannerCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#bannerCarousel" data-bs-slide-to="2"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active" data-bs-interval="6000">
            <div class="banner-slide d-flex align-items-center justify-content-center text-white" style="background: linear-gradient(rgba(0,84,129,0.7), rgba(0,84,129,0.7)), url('assets/img/banner1.png?v=<?= @filemtime(__DIR__ . '/assets/img/banner1.png') ?: time() ?>') center/cover no-repeat;">
                <div class="text-center px-3">
                    <h1 class="display-5 fw-bold text-warning">Kotiza los mejores tipos de cambio</h1>
                    <p class="fs-4">Elije el mejor tipo de cambio USD/PEN en tiempo real</p>
                </div>
            </div>
        </div>
        <div class="carousel-item" data-bs-interval="6000">
            <div class="banner-slide d-flex align-items-center justify-content-center text-white" style="background: linear-gradient(rgba(0,193,215,0.7), rgba(0,84,129,0.7)), url('assets/img/banner2.png?v=<?= @filemtime(__DIR__ . '/assets/img/banner2.png') ?: time() ?>') center/cover no-repeat;">
                <div class="text-center px-3">
                    <h1 class="display-5 fw-bold text-white">Ahorra en cada transacción</h1>
                    <p class="fs-4">Compara entre más de 10 casas de cambio digitales registradas</p>
                </div>
            </div>
        </div>
        <div class="carousel-item" data-bs-interval="6000">
            <div class="banner-slide d-flex align-items-center justify-content-center text-white" style="background: linear-gradient(rgba(0,84,129,0.8), rgba(0,193,215,0.8)), url('assets/img/banner3.png?v=<?= @filemtime(__DIR__ . '/assets/img/banner3.png') ?: time() ?>') center/cover no-repeat;">
                <div class="text-center px-3">
                    <h1 class="display-5 fw-bold text-warning">Selecciona de acuerdo a tus necesidades</h1>
                    <p class="fs-4">Información actualizada en cada momento</p>
                </div>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#bannerCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#bannerCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</section>

<?php publicidad_render($conexion, 1, 'kotiza', 'pub-home-top'); ?>
<?php publicidad_laterales($conexion, 'kotiza', 'ambos'); ?>

<!-- SECCIÓN DE FILTROS Y TABLA DE TIPOS DE CAMBIO -->
<main class="container my-5">

    <!-- BARRA DE FILTROS SUPERIOR -->
    <div class="card filter-card p-3 mb-4">
        <div class="row g-3 align-items-center">
            <!-- Filtro 1: Bancos Inmediatos -->
            <div class="col-12 col-md-6 col-xl-4">
                <span class="filter-group-title mb-2"><i class="bi bi-bank text-primary"></i> Bancos inmediatos:</span>
                <div class="dropdown">
                    <button class="btn dropdown-toggle bank-filter-toggle w-100 d-flex align-items-center justify-content-between" type="button" id="filtroBancoBtn" data-bs-toggle="dropdown" aria-expanded="false">
                        <span id="filtroBancoLabel" class="d-inline-flex align-items-center gap-2">
                            <i class="bi bi-grid text-secondary"></i> Todos los bancos
                        </span>
                    </button>
                    <ul class="dropdown-menu w-100 bank-filter-menu" id="filtroBancoMenu" aria-labelledby="filtroBancoBtn">
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option active" data-banco="todos">
                                <i class="bi bi-grid text-secondary"></i> Todos los bancos
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option" data-banco="bcp">
                                <img src="assets/img/bancos/bcp.svg" alt="BCP" class="bank-filter-icon"> BCP
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option" data-banco="bbva">
                                <img src="assets/img/bancos/bbva.svg" alt="BBVA" class="bank-filter-icon"> BBVA
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option" data-banco="scotiabank">
                                <img src="assets/img/bancos/scotiabank.svg" alt="Scotiabank" class="bank-filter-icon"> Scotiabank
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option" data-banco="interbank">
                                <img src="assets/img/bancos/interbank.svg" alt="Interbank" class="bank-filter-icon"> Interbank
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option" data-banco="banbif">
                                <img src="assets/img/bancos/banbif.svg" alt="BanBif" class="bank-filter-icon"> BanBif
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option" data-banco="bancom">
                                <img src="assets/img/bancos/bancom.svg" alt="Bancom" class="bank-filter-icon"> Bancom
                            </button>
                        </li>
                        <li>
                            <button type="button" class="dropdown-item bank-filter-option" data-banco="pichincha">
                                <img src="assets/img/bancos/pichincha.svg" alt="Pichincha" class="bank-filter-icon"> Pichincha
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Filtro 2: Monto mínimo de operación -->
            <div class="col-12 col-md-6 col-xl-3">
                <label for="filtroMonto" class="filter-group-title mb-2"><i class="bi bi-cash-stack text-success"></i> Monto mínimo por operación:</label>
                <select id="filtroMonto" class="form-select form-select-sm" aria-label="Filtrar por monto mínimo de operación">
                    <option value="0">Todos los montos</option>
                    <option value="1">De 1 USD a más</option>
                    <option value="100">De 100 USD a más</option>
                    <option value="500">De 500 USD a más</option>
                    <option value="1000">De 1000 USD a más</option>
                </select>
            </div>

            <!-- Filtro 3: Horarios -->
            <div class="col-12 col-xl-5">
                <div class="d-flex align-items-center flex-wrap gap-2 justify-content-xl-end">
                    <span class="filter-group-title me-2"><i class="bi bi-clock-history text-primary"></i> Horario:</span>
                    <button type="button" class="filter-btn filter-btn-dia active" data-dia="todos">Todos</button>
                    <button type="button" class="filter-btn filter-btn-dia" data-dia="lun_vie">
                        <i class="bi bi-calendar-week text-primary"></i> Lunes a Viernes
                    </button>
                    <button type="button" class="filter-btn filter-btn-dia" data-dia="sabado">
                        <i class="bi bi-cup-hot text-warning"></i> Sábado
                    </button>
                    <button type="button" class="filter-btn filter-btn-dia" data-dia="domingo">
                        <i class="bi bi-sun text-danger"></i> Domingo
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-4 comparador-row">
        
        <!-- Función Auxiliar PHP para Renderizar Filas -->
        <?php 
        function renderizarFilas($listaCasas) {
            foreach ($listaCasas as $casa) {
                // Cálculo dinámico de diferencias
                $diff_compra = (float)$casa['compra_actual'] - (float)$casa['compra_anterior'];
                $diff_venta  = (float)$casa['venta_actual'] - (float)$casa['venta_anterior'];

                // Formato de texto y clase CSS para compra (>0 Verde, <0 Rojo, =0 Ceniza)
                if ($diff_compra > 0.00001) {
                    $txt_diff_compra = '+' . number_format($diff_compra, 3);
                    $class_compra_badge = 'badge-spread-up';
                    $class_compra_val = 'rate-green';
                } elseif ($diff_compra < -0.00001) {
                    $txt_diff_compra = '-' . number_format(abs($diff_compra), 3);
                    $class_compra_badge = 'badge-spread-down';
                    $class_compra_val = 'rate-red';
                } else {
                    $txt_diff_compra = '= 0.000';
                    $class_compra_badge = 'badge-spread-equal';
                    $class_compra_val = 'rate-gray';
                }

                // Formato de texto y clase CSS para venta (>0 Verde, <0 Rojo, =0 Ceniza)
                if ($diff_venta > 0.00001) {
                    $txt_diff_venta = '+' . number_format($diff_venta, 3);
                    $class_venta_badge = 'badge-spread-up';
                    $class_venta_val = 'rate-green';
                } elseif ($diff_venta < -0.00001) {
                    $txt_diff_venta = '-' . number_format(abs($diff_venta), 3);
                    $class_venta_badge = 'badge-spread-down';
                    $class_venta_val = 'rate-red';
                } else {
                    $txt_diff_venta = '= 0.000';
                    $class_venta_badge = 'badge-spread-equal';
                    $class_venta_val = 'rate-gray';
                }

                // Tiempo transcurrido
                $tiempo_transcurrido = calcularTiempoTranscurrido($casa['fecha_actualizacion']);

                $bancos_codigos = [];
                foreach (explode(',', (string)($casa['bancos_acepta'] ?? '')) as $banco_nombre) {
                    $codigo = codigoBanco($banco_nombre);
                    if ($codigo !== '' && !in_array($codigo, $bancos_codigos, true)) {
                        $bancos_codigos[] = $codigo;
                    }
                }
                if (empty($bancos_codigos)) {
                    $bancos_codigos = array_filter(array_map('trim', explode(',', (string)($casa['bancos_codigos'] ?? ''))));
                }

                $bancos_data = htmlspecialchars(implode(',', $bancos_codigos));
                $dias_data   = htmlspecialchars($casa['dias_codigos'] ?? '');
                ?>
                <div class="list-group-item casa-item py-3" 
                     data-id="<?= $casa['id'] ?>" 
                     data-bancos="<?= $bancos_data ?>" 
                     data-dias="<?= $dias_data ?>"
                     data-monto="<?= (float)($casa['monto_minimo'] ?: 0) ?>">
                    
                    <div class="casa-row d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <!-- Logotipo -->
                        <div class="d-flex align-items-center casa-logo-col">
                            <img src="assets/img/<?= htmlspecialchars($casa['logo_svg']) ?>" 
                                 alt="<?= htmlspecialchars($casa['casa_cambio']) ?>" 
                                 class="img-fluid" 
                                 style="max-height: 38px;" 
                                 onerror="this.onerror=null; this.src='data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'35\'><rect width=\'100%\' height=\'100%\' fill=\'%23005481\'/><text x=\'50%\' y=\'50%\' fill=\'%23FFFFFF\' font-size=\'12\' text-anchor=\'middle\' dominant-baseline=\'middle\'><?= urlencode($casa['casa_cambio']) ?></text></svg>';">
                        </div>
                        
                        <!-- Botón Expandir / Contraer (en el medio entre logo y cambiar) -->
                        <button class="btn btn-toggle-details" 
                                type="button" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#collapse-details-<?= $casa['id'] ?>" 
                                aria-expanded="false" 
                                aria-controls="collapse-details-<?= $casa['id'] ?>"
                                title="Ver información de la casa de cambio">
                            <i class="bi bi-chevron-down"></i>
                        </button>

                        <!-- Botón Cambiar -->
                        <div class="casa-cambiar-wrap">
                            <a href="<?= htmlspecialchars($casa['url_web']) ?>" target="_blank" data-track-evento="cambiar" data-casa-id="<?= (int)$casa['id'] ?>" class="btn btn-primary btn-sm rounded-pill px-3 fw-bold" style="background-color: #00C1D7; border: none;">CAMBIAR</a>
                        </div>
                        
                        <!-- Bloque de Cotizaciones (Compra y Venta) -->
                        <div class="d-flex align-items-start gap-3 text-end casa-rates">
                            <!-- Compra -->
                            <div class="rate-column-compra" data-actual="<?= (float)$casa['compra_actual'] ?>" data-anterior="<?= (float)($casa['compra_anterior'] ?: $casa['compra_actual']) ?>">
                                <span class="rate-val <?= $class_compra_val ?> d-block fw-bold fs-5" style="line-height: 1.1;"><?= number_format((float)$casa['compra_actual'], 3) ?></span>
                                <span class="badge-spread rate-diff <?= $class_compra_badge ?> mt-1"><?= $txt_diff_compra ?></span>
                            </div>
                            
                            <!-- Venta -->
                            <div class="rate-column-venta" data-actual="<?= (float)$casa['venta_actual'] ?>" data-anterior="<?= (float)($casa['venta_anterior'] ?: $casa['venta_actual']) ?>">
                                <span class="rate-val <?= $class_venta_val ?> d-block fw-bold fs-5" style="line-height: 1.1;"><?= number_format((float)$casa['venta_actual'], 3) ?></span>
                                <span class="badge-spread rate-diff <?= $class_venta_badge ?> mt-1"><?= $txt_diff_venta ?></span>
                            </div>
                        </div>
                    </div>

                    <!-- Tiempo Transcurrido (debajo de las variaciones) -->
                    <div class="d-flex justify-content-end pe-1 mt-1">
                        <div class="time-elapsed text-muted">
                            <i class="bi bi-arrow-repeat me-1"></i><?= $tiempo_transcurrido ?>
                        </div>
                    </div>

                    <!-- Panel Desplegable (Monto mínimo, Bancos y Horario de operación) -->
                    <div class="collapse w-100 mt-2" id="collapse-details-<?= $casa['id'] ?>">
                        <div class="casa-details-box d-flex justify-content-between align-items-center flex-wrap gap-2">
                            <div>
                                <div class="mb-1"><i class="bi bi-bank text-primary me-1"></i><strong>Bancos:</strong> <?= htmlspecialchars($casa['bancos_acepta'] ?: 'BCP, Interbank, BBVA') ?></div>
                                <div><i class="bi bi-cash-stack text-success me-1"></i><strong>Cambio mínimo:</strong> USD <?= number_format((float)($casa['monto_minimo'] ?: 1.00), 2) ?></div>
                                <?php $tc_preferencia = trim((string)($casa['aplica_tc_preferencia'] ?? '')); ?>
                                <?php if ($tc_preferencia !== ''): ?>
                                    <div class="mt-1"><i class="bi bi-star-fill text-warning me-1"></i><strong>Aplica TC preferencial:</strong> <?= htmlspecialchars($tc_preferencia) ?></div>
                                <?php endif; ?>
                            </div>
                            <div class="text-md-end">
                                <div><i class="bi bi-clock-history text-warning me-1"></i><strong>Horario de Operación:</strong></div>
                                <div class="fw-semibold text-secondary"><?= htmlspecialchars($casa['horario_operacion'] ?: 'L-V 9 am - 7 pm') ?></div>
                            </div>
                        </div>
                    </div>

                </div>
                <?php
            }
        }
        ?>

        <!-- Columna Izquierda -->
        <div class="col-lg-6 comparador-col">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                    <span class="fw-bold text-secondary fs-6 ms-2">Casas de Cambio</span>
                    <div class="d-flex gap-3 pe-1" style="color: #005481; font-weight: 700; font-size: 1.1rem;">
                        <span style="width: 75px; text-align: center;">Compra</span>
                        <span style="width: 75px; text-align: center;">Venta</span>
                    </div>
                </div>
                <div class="list-group list-group-flush casa-list-container">
                    <?php renderizarFilas($columna1); ?>
                </div>
            </div>
        </div>

        <!-- Columna Derecha -->
        <div class="col-lg-6 comparador-col">
            <div class="card shadow-sm border-0">
                <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center">
                    <span class="fw-bold text-secondary fs-6 ms-2">Casas de Cambio</span>
                    <div class="d-flex gap-3 pe-1" style="color: #005481; font-weight: 700; font-size: 1.1rem;">
                        <span style="width: 75px; text-align: center;">Compra</span>
                        <span style="width: 75px; text-align: center;">Venta</span>
                    </div>
                </div>
                <div class="list-group list-group-flush casa-list-container">
                    <?php renderizarFilas($columna2); ?>
                </div>
            </div>
        </div>

    </div>
</main>

<?php publicidad_render($conexion, 3, 'kotiza', 'pub-home-middle'); ?>
<?php publicidad_render($conexion, 1, 'kotiza', 'pub-home-bottom'); ?>

<!-- SECCIÓN DE NOTICIAS -->
<?php
// Últimos 4 artículos publicados en el blog
$ultimos_articulos = [];
try {
    $stmt_not = $conexion->query("
        SELECT id, slug, imagen, titulo, fecha_publicacion
        FROM articulos_blog
        WHERE estado = 1
        ORDER BY fecha_publicacion DESC, id DESC
        LIMIT 4
    ");
    $ultimos_articulos = $stmt_not->fetchAll();
} catch (PDOException $e) {
    $ultimos_articulos = [];
}

$fallback_img = 'data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'600\' height=\'400\'><rect width=\'100%\' height=\'100%\' fill=\'%23005481\'/><text x=\'50%\' y=\'50%\' fill=\'%23FFFFFF\' font-size=\'20\' text-anchor=\'middle\' dominant-baseline=\'middle\'>Kotiza</text></svg>';
?>
<section class="news-section py-5" style="background-color: #FFC700;">
    <div class="container">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="d-flex align-items-center">
                <h2 class="fw-bold me-3 text-dark mb-0">KotiNoticias</h2>
                <span class="badge bg-dark text-white p-2">Las noticias que mueven la economía peruana</span>
            </div>
            <a href="blog.php" class="btn btn-outline-dark rounded-pill fw-bold">VER TODO</a>
        </div>

        <?php if (empty($ultimos_articulos)): ?>
            <div class="text-center text-dark py-4 fw-semibold">
                <i class="bi bi-journal-x me-1"></i> Aún no hay publicaciones.
            </div>
        <?php else: ?>
            <?php
            $a0 = $ultimos_articulos[0] ?? null;
            $a1 = $ultimos_articulos[1] ?? null;
            $a2 = $ultimos_articulos[2] ?? null;
            $a3 = $ultimos_articulos[3] ?? null;
            ?>
            <div class="row g-3">
                <!-- Artículo principal -->
                <div class="col-lg-6">
                    <?php if ($a0): ?>
                        <div class="card news-card h-100 border-0 text-white overflow-hidden shadow">
                            <img src="<?= htmlspecialchars($a0['imagen']) ?>" class="card-img h-100" alt="<?= htmlspecialchars($a0['titulo']) ?>" style="object-fit: cover;" onerror="this.onerror=null; this.src='<?= $fallback_img ?>';">
                            <div class="card-img-overlay d-flex align-items-end p-4 gradient-overlay">
                                <h4 class="card-title fw-bold mb-0">
                                    <a class="news-title-link" href="articulo.php?<?= htmlspecialchars($a0['slug']) ?>"><?= htmlspecialchars($a0['titulo']) ?></a>
                                </h4>
                            </div>
                        </div>
                    <?php endif; ?>
                </div>

                <!-- Secundarios -->
                <div class="col-lg-6">
                    <div class="row g-3">
                        <?php if ($a1): ?>
                            <div class="col-12">
                                <div class="card news-card border-0 text-white overflow-hidden shadow" style="height: 180px;">
                                    <img src="<?= htmlspecialchars($a1['imagen']) ?>" class="card-img h-100" alt="<?= htmlspecialchars($a1['titulo']) ?>" style="object-fit: cover;" onerror="this.onerror=null; this.src='<?= $fallback_img ?>';">
                                    <div class="card-img-overlay d-flex align-items-end p-3 gradient-overlay">
                                        <h5 class="card-title fw-bold fs-6 mb-0">
                                            <a class="news-title-link" href="articulo.php?<?= htmlspecialchars($a1['slug']) ?>"><?= htmlspecialchars($a1['titulo']) ?></a>
                                        </h5>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                        <?php if ($a2): ?>
                            <div class="col-6">
                                <div class="card news-card border-0 text-white overflow-hidden shadow" style="height: 150px;">
                                    <img src="<?= htmlspecialchars($a2['imagen']) ?>" class="card-img h-100" alt="<?= htmlspecialchars($a2['titulo']) ?>" style="object-fit: cover;" onerror="this.onerror=null; this.src='<?= $fallback_img ?>';">
                                    <div class="card-img-overlay d-flex align-items-end p-2 gradient-overlay">
                                        <p class="card-title fw-bold mb-0 style-small-text">
                                            <a class="news-title-link" href="articulo.php?<?= htmlspecialchars($a2['slug']) ?>"><?= htmlspecialchars($a2['titulo']) ?></a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>

                        <?php if ($a3): ?>
                            <div class="col-6">
                                <div class="card news-card border-0 text-white overflow-hidden shadow" style="height: 150px;">
                                    <img src="<?= htmlspecialchars($a3['imagen']) ?>" class="card-img h-100" alt="<?= htmlspecialchars($a3['titulo']) ?>" style="object-fit: cover;" onerror="this.onerror=null; this.src='<?= $fallback_img ?>';">
                                    <div class="card-img-overlay d-flex align-items-end p-2 gradient-overlay">
                                        <p class="card-title fw-bold mb-0 style-small-text">
                                            <a class="news-title-link" href="articulo.php?<?= htmlspecialchars($a3['slug']) ?>"><?= htmlspecialchars($a3['titulo']) ?></a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </div>
</section>

<?php 
    // Incluir footer
    include_once 'views/footer.php'; 
?>
