:root {
    --f:#ff00a8; --n:#ff4dff;
    --g:linear-gradient(135deg,#ff00a8,#ff69b4);
    --glow:0 0 15px #ff4dff,0 0 30px #ff00a8;
}

/* FONDO Y TIPOGRAFÍA */
body {
    background: url('<?php echo $imgs[1]['archivo']??"https://via.placeholder.com/1200x600" ?>') center/cover no-repeat fixed;
    color: #fff;
    font-family: Segoe UI, sans-serif;
}

/* NAV Y MENÚ MOVIL */
.navbar,.offcanvas { background: rgba(0,0,0,.45); backdrop-filter: blur(8px); } 
.nav-link { color:#fff!important; }
.nav-link.active { color:var(--n)!important; text-shadow:var(--glow); font-weight:600; }

/* CARDS */
.card {
    border-radius:15px;
    overflow:hidden;
    background:linear-gradient(135deg,#4b0082,#7b3fbf,#ff4dff);
    color:#fff;
    transition: all 0.3s ease;
}
.card:hover {
    transform:translateY(-6px) scale(1.02);
    box-shadow:0 12px 30px rgba(255,77,255,0.6);
}
.card-title {
    background:var(--g);
    padding:5px;
    border-radius:10px;
    text-align:center;
    font-size:.85rem;
    color:#000;
}
.card-text { color:#000; font-size:.75rem; }
.card img { object-fit:cover; cursor:pointer; }

/* VISITAS */
.visitas-paises img { width:22px; height:14px; border-radius:2px; }

/* MODAL */
.modal-img,.modal-iframe { width:100%; height:100%; border:none; border-radius:10px; }

/* CARDS PEQUEÑAS (MÓVIL) */
.card-title { font-size:0.75rem; margin-bottom:0.25rem; }
.card-text { font-size:0.65rem; line-height:1.1; margin-bottom:0.25rem; }
.card .btn { font-size:0.65rem; padding:2px 4px; }
.card-body { padding:0.25rem; }
.card-img-top { max-height:120px; object-fit:cover; }

/* RESPONSIVE MÓVIL */
@media (max-width:576px){
  #contador .d-flex.justify-content-around.flex-wrap {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }
  #contador .cube {
    width: 40px;
    height: 40px;
  }
  #contador small {
    font-size: 0.65rem;
    display: block;
    text-align: center;
  }
}

/* CUBOS 3D COUNTDOWN */
.cube {
  width: 50px; height: 50px; perspective: 100px; display:inline-block; margin:0 5px; position: relative;
}
.cube .face {
  width:100%; height:100%; position:absolute; background: linear-gradient(135deg, rgba(128,0,128,0.8), #ff00a8);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.5rem; border-radius:5px; backface-visibility:hidden; transform:rotateX(0deg);
}
.cube .back { transform: rotateX(180deg); }
.cube.flip .front { transform: rotateX(-180deg); transition: transform 0.5s ease-in-out; }
.cube.flip .back { transform: rotateX(0deg); transition: transform 0.5s ease-in-out; }

/* MODAL FULLSCREEN */
.modal-fullscreen .modal-body {
  padding: 0;
  height: 100vh;
  width: 100vw;
}
.modal-fullscreen .modal-iframe,
.modal-fullscreen .modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ESCRITORIO (PC) */
@media (min-width:992px){
  /* Ajustar cards */
  #cards .row { gap: 1.5rem; justify-content: flex-start; }
  #cards .col-12.col-sm-6.col-lg-4 { flex: 1 1 30%; }
  .card { min-height: 400px; }
  .card-img-top {
    max-height: 260px;   /* imágenes un poco más grandes */
    height: auto;
    object-fit: cover;
  }

  /* Contador */
  #contador .cube { width: 80px; height: 80px; }
  #contador small { font-size: 1rem; }

  /* Imagen del countdown */
  #imgCountdown { height: 250px; width:auto; object-fit: cover; }

  /* Visitas */
  #contador .visitas-paises div { font-size: 1rem; margin: 0 5px; }
}