/* =========================
   PALETA Y BASE DE TEMA
   ========================= */
:root{
  --bs-primary:#3fabcb;
  --bs-primary-rgb:63,171,203;
  --bs-success:#90b03f;
  --bs-success-rgb:144,176,63;

  /* Niveles */
  --tier-bronze:#cd7f32;
  --tier-silver:#c0c0c0;
  --tier-gold:#d4af37;
}

/* Botones y links */
.btn-primary{
  --bs-btn-color:#fff; --bs-btn-bg:#3fabcb; --bs-btn-border-color:#3fabcb;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#3899b7; --bs-btn-hover-border-color:#3591ac;
  --bs-btn-focus-shadow-rgb:63,171,203;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#3288a2; --bs-btn-active-border-color:#2f8199;
}
.btn-outline-primary{
  --bs-btn-color:#3fabcb; --bs-btn-border-color:#3fabcb;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#3fabcb; --bs-btn-hover-border-color:#3fabcb;
  --bs-btn-focus-shadow-rgb:63,171,203;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#3fabcb; --bs-btn-active-border-color:#3fabcb;
}
.btn-success{
  --bs-btn-color:#fff; --bs-btn-bg:#90b03f; --bs-btn-border-color:#90b03f;
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#829e39; --bs-btn-hover-border-color:#7a9535;
  --bs-btn-focus-shadow-rgb:144,176,63;
  --bs-btn-active-color:#fff; --bs-btn-active-bg:#738e33; --bs-btn-active-border-color:#6c8630;
}

.link-primary{ color:#3fabcb!important; }
.link-primary:hover,.link-primary:focus{ color:#3591ac!important; }
.link-success{ color:#90b03f!important; }
.link-success:hover,.link-success:focus{ color:#829e39!important; }

/* Navbar: sólo hover verde */
.navbar .nav-link{ color:#212529; transition: color .15s ease; }
.navbar .nav-link:hover, .navbar .nav-link:focus{ color:var(--bs-success)!important; }
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{ color:#fff; background-color:var(--bs-success); }

/* Utilidades */
.object-fit-cover{ object-fit:cover; }
html, body{ overflow-x:hidden; }

/* =========================
   HERO
   ========================= */
.thermo-hero{
  position: relative;
  background: center/cover no-repeat var(--hero-img);
  min-height: clamp(520px, 70vh, 840px);
  padding-block: clamp(56px, 10vh, 96px);
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.thermo-hero::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.35)); z-index:0;
}
.thermo-hero > .container{ position:relative; z-index:1; max-width:980px; }
.hero-title{ font-size: clamp(2rem, 6vw, 3.25rem); }
.hero-sub{
  font-size: clamp(.95rem, 2.1vw, 1.05rem);
  line-height:1.35; max-width:980px;
  background: rgba(0,0,0,.35);
  border-radius:.65rem; padding:.6rem .9rem; margin-top:.75rem;
}

/* Entradilla */
.lead-quote{
  font-style: italic; color:#333; max-width:980px; line-height:1.5;
  margin-left:auto; margin-right:auto;
}

/* =========================
   PACKS
   ========================= */
.pack-card{
  position: relative;
  background:#f8f9fa;
  border:2px solid var(--bs-success);
  border-radius:.65rem;
  padding:1rem 1.1rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pack-card::before{
  content:""; position:absolute; left:0; right:0; top:0; height:6px;
  border-radius:.65rem .65rem 0 0; background:transparent;
}
.tier-bronze::before{ background: linear-gradient(90deg, var(--tier-bronze), color-mix(in srgb, var(--tier-bronze) 70%, #fff 30%)); }
.tier-silver::before{ background: linear-gradient(90deg, var(--tier-silver), color-mix(in srgb, var(--tier-silver) 70%, #fff 30%)); }
.tier-gold::before{   background: linear-gradient(90deg, var(--tier-gold),   color-mix(in srgb, var(--tier-gold)   70%, #fff 30%)); }

.tier-bronze{ border-color: var(--tier-bronze); }
.tier-silver{ border-color: var(--tier-silver); }
.tier-gold{   border-color: var(--tier-gold); }

.pack-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.06);
}

/* Eyebrow con nombre del pack */
.pack-eyebrow{
  font-size:.8rem; font-weight:800; letter-spacing:.12rem;
  text-transform:uppercase; color:#1f2937; opacity:.9;
}

/* Títulos por nivel */
.pack-title{ font-size: clamp(1rem, 2.2vw, 1.05rem); font-weight:800; letter-spacing:.2px; }
.title-bronze{ color: var(--tier-bronze); }
.title-silver{ color: #6b7280; }
.title-gold{   color: var(--tier-gold); }

.pack-tagline{ font-size:.95rem; color:#374151; }

/* Miniatura con aro VERDE */
.pack-thumb{
  width: clamp(92px, 16vw, 128px);
  height: clamp(92px, 16vw, 128px);
  border-radius:50%;
  border:3px solid var(--bs-success);
  overflow:hidden; background:#eaf6fb;
}
.pack-thumb img{ width:100%; height:100%; object-fit:cover; object-position:center; }

/* Chip de nivel */
.tier-chip{
  position:absolute; right:.75rem; top:.65rem;
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.25rem .55rem; border-radius:9999px;
  font-size:.75rem; font-weight:700; letter-spacing:.4px; color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.1);
}
.tier-chip.bronze{ background: var(--tier-bronze); }
.tier-chip.silver{ background: var(--tier-silver); color:#222; }
.tier-chip.gold{   background: var(--tier-gold); }

.pack-hit{ position:absolute; inset:0; opacity:0; border:0; padding:0; margin:0; }

.pack-details{
  border-top:1px dashed rgba(0,0,0,.15);
  margin-top:.75rem; padding-top:.75rem; color:#222;
}
.pack-details p{ margin:0; }

/* =========================
   CTA + formulario
   ========================= */
.cta-hero{ position:relative; background-position:center; background-size:cover; background-repeat:no-repeat; }
@media (min-width:992px){
  .cta-hero{ min-height:clamp(360px,38vw,560px); display:flex; align-items:center; }
}
@media (max-width:991.98px){ .cta-hero{ padding:2rem 0 2.5rem; } }
.cta-card{
  border:2px solid var(--bs-success);
  background:rgba(248,249,250,.88);
  backdrop-filter:saturate(110%) blur(2px);
  border-radius:.5rem;
}

/* =========================
   FOOTER — hover gris elegante
   ========================= */
footer.bg-success a.link-dark.text-decoration-none{
  color: rgba(0,0,0,.82) !important;
  padding: .15rem .4rem; border-radius: .35rem;
  transition: color .15s ease, background-color .15s ease;
}
footer.bg-success a.link-dark.text-decoration-none:hover,
footer.bg-success a.link-dark.text-decoration-none:focus{
  color: rgba(0,0,0,.98) !important; background-color: rgba(0,0,0,.06);
}
footer.bg-success .btn-outline-dark{
  transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease;
}
footer.bg-success .btn-outline-dark:hover,
footer.bg-success .btn-outline-dark:focus{
  background-color: rgba(0,0,0,.08); border-color: rgba(0,0,0,.55); color:#000; transform: translateY(-1px);
}
footer.bg-success a:focus-visible{
  outline: 2px solid rgba(0,0,0,.45); outline-offset: 2px; border-radius: .35rem;
}

/* ======== COMPARATIVA PACKS ======== */
.text-bronze{ color: var(--tier-bronze); }
.text-silver{ color: #6b7280; }
.text-gold{   color: var(--tier-gold); }

.comp-head h3{ font-weight:800; }
.comp-head p{ color:#374151; }

/* ===== Tabla (desktop + móvil comparten base) ===== */
.comp-table-wrap{
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem;
  overflow:hidden;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transform: scale(var(--tbl-scale, 1));
  transform-origin: left center;
  will-change: transform;
}
.comp-row .comp-table-wrap.comp-shift-right{
  margin-left: clamp(12px, 2vw, 28px);
}

.comp-table{ border-collapse:separate; border-spacing:0; font-size:.95rem; }
.comp-table thead th{
  background:#fff; position:sticky; top:0; z-index:2;
  padding:1rem; font-weight:700; border-bottom:1px solid rgba(0,0,0,.12);
  white-space: normal; line-height:1.15;
}
.comp-th-first{ left:0; position:sticky; z-index:3; }

.comp-table tbody tr.alt{ background:#f8f9fa; }
.comp-table td{ padding:.9rem 1rem; border-bottom:1px solid rgba(0,0,0,.08); text-align:center; }
.comp-table td.comp-sticky{ text-align:left; position:sticky; left:0; z-index:1; background:inherit; }

.comp-table td.yes i, .comp-table td.no i{
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
}
.comp-table td.yes i{
  background:rgba(var(--bs-success-rgb), .15); color:rgba(var(--bs-success-rgb), .95);
  box-shadow:inset 0 0 0 1px rgba(var(--bs-success-rgb), .35);
}
.comp-table td.no i{
  background:rgba(0,0,0,.08); color:#6b7280; box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}

/* ===== Cabeceras iguales en todos los tiers ===== */
.th-stack{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  line-height:1.1; gap:.15rem; min-height:3.25rem;
  font-size: calc(1rem * var(--th-scale, 1));
}
.th-pack{ font-weight:600; }
.th-tier{ letter-spacing:.02em; }

/* ===== Tabla móvil desplazable (corrección de superposición) ===== */
.comp-table-mobile-wrap{
  overflow-x:auto; -webkit-overflow-scrolling: touch;
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem; background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
}
.comp-table-mobile{ min-width: 720px; font-size:.95rem; }
.comp-table-mobile thead th{ padding:.85rem; }
.comp-table-mobile td{ padding:.7rem .85rem; }

/* ⚠️ En móvil: desactivamos la columna pegajosa para evitar solapes */
@media (max-width: 991.98px){
  .comp-table-mobile .comp-sticky{
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    background: transparent !important;
    text-align: left;
    white-space: normal;
  }
}

/* ===== Ciervo (desktop con scroll-sync) ===== */
.deer-stage{
  position:relative;
  max-width:560px;
  margin:0 auto 1rem;
}
.deer-stage img{
  width:100%; height:auto; display:block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.14));
  opacity: var(--op, 0);
  transform: translateX(var(--dx, -16%)) rotate(var(--rot, -6deg));
  clip-path: circle(var(--clip, 0%) at 0% 50%);
}

/* Hotspot invisible sobre el icono ya impreso en la imagen (desktop) */
.ig-hotspot{
  position:absolute;
  --ig-x: 50%;
  --ig-y: 12%;
  --ig-w: 22%;
  --ig-h: 22%;
  left: var(--ig-x); top: var(--ig-y);
  width: var(--ig-w); height: var(--ig-h);
  transform: translate(-50%,-50%);
  display:block; background: transparent;
}
.ig-hotspot:focus-visible{
  outline: 3px dashed rgba(255,255,255,.9);
  outline-offset: 3px; border-radius: 999px;
}

/* Texto bajo el ciervo (desktop) */
.deer-caption{
  margin-top:.6rem; text-align:center; font-weight:700; color:#374151;
}
.deer-caption .deer-ig{
  display:inline-block; padding:.15rem .55rem; border-radius:9999px; font-weight:800;
  text-decoration:none; color:#fff !important; box-shadow:0 6px 16px rgba(0,0,0,.12);
  background:
    radial-gradient(30% 30% at 30% 30%, #ffd776 0 60%, transparent 60%),
    radial-gradient(45% 45% at 70% 30%, #ff4f8b 0 60%, transparent 60%),
    linear-gradient(135deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

/* ===== IG móvil (minimal, sin “colorines”) ===== */
.ig-mobile .ig-logo-link{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; color:#111; text-decoration:none;
  border:2px solid rgba(0,0,0,.12);
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ig-mobile .ig-logo-link:hover,
.ig-mobile .ig-logo-link:focus{
  transform: translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.22);
}
.ig-mobile .ig-logo-link i{ font-size:28px; line-height:1; }
.ig-mobile-caption{ font-weight:700; color:#374151; }
.ig-mobile .deer-ig{
  color: var(--bs-success) !important;
  font-weight:800; text-decoration:none;
  padding:0; background:none; box-shadow:none; border-radius:0;
}

/* Oculta el ciervo desktop en móvil */
@media (max-width: 991.98px){
  #deerStage{ display:none; }
}
/* Enlace IG en desktop con el mismo estilo verde minimal que móvil */
.deer-caption .deer-ig{
  color: var(--bs-success) !important;
  font-weight: 800;
  text-decoration: none;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.deer-caption .deer-ig:hover,
.deer-caption .deer-ig:focus{
  text-decoration: underline;
  color: #829e39 !important; /* tono success hover */
  outline: none;
}
/* === FIX hueco entre sección con foto y footer === */
.thermo-hero,
.cta-hero{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden; /* evita margin-collapsing del último hijo */
}

/* anula márgenes finales de los últimos hijos dentro de la sección */
.thermo-hero > .container:last-child,
.cta-hero   > .container:last-child{
  margin-bottom: 0 !important;
}
.thermo-hero > .container:last-child > *:last-child,
.cta-hero   > .container:last-child > *:last-child{
  margin-bottom: 0 !important;
}

/* por si el footer trae separación extra */
footer.bg-success{
  margin-top: 0 !important;
}
/* HERO: sustituye la imagen de fondo según viewport */
@media (min-width: 768px){
  .thermo-hero{
    --hero-img: url('../../Img/CensosCinegeticos/CiervoPortada-1600.webp') !important;
  }
}
@media (min-width: 1200px){
  .thermo-hero{
    --hero-img: url('../../Img/CensosCinegeticos/CiervoPortada-2000.webp') !important;
  }
}
@media (min-width: 1600px){
  .thermo-hero{
    --hero-img: url('../../Img/CensosCinegeticos/CiervoPortada-2400.webp') !important;
  }
}

/* CTA: fondo responsive */
@media (min-width: 768px){
  .cta-hero{
    background-image: url('../../Img/CensosCinegeticos/deers-1600.webp') !important;
  }
}
@media (min-width: 1200px){
  .cta-hero{
    background-image: url('../../Img/CensosCinegeticos/deers-2000.webp') !important;
  }
}
@media (min-width: 1600px){
  .cta-hero{
    background-image: url('../../Img/CensosCinegeticos/deers-2400.webp') !important;
  }
}
/* ===== Lista móvil de características (sustituye a la tabla deslizable) ===== */
.feat-list-wrap{
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  overflow:hidden;
}
.feat-list{
  list-style:none; margin:0; padding:0;
}
.feat-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  padding:.9rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.feat-item:last-child{ border-bottom:0; }
.feat-item.alt{ background:#f8f9fa; }
.feat-name{
  flex:1 1 auto;
  font-size: .98rem;
  color:#1f2937;
}
.tier-icons{
  flex:0 0 auto; display:flex; align-items:center; gap:.35rem;
}

/* Insignias de nivel (círculo relleno con borde suave) */
.tier-badge{
  width:22px; height:22px; border-radius:50%;
  display:inline-block;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
}
.tier-badge.bronze{ background: var(--tier-bronze); }
.tier-badge.silver{ background: var(--tier-silver); }
.tier-badge.gold{   background: var(--tier-gold); }

/* leyenda compacta */
.feat-legend{
  display:flex; gap:1rem; align-items:center;
  padding:.6rem .9rem; font-size:.9rem; color:#374151;
}
.feat-legend .legend-item{ display:inline-flex; align-items:center; gap:.4rem; }
/* Contenedor lista móvil */
.feat-list-wrap{
  border:1px solid rgba(0,0,0,.12);
  border-radius:.75rem;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.05);
  overflow:hidden;
}

/* Ítems */
.feat-list{ list-style:none; margin:0; padding:0; }
.feat-item{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; padding:.9rem 1rem;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.feat-item:last-child{ border-bottom:0; }
.feat-item.alt{ background:#f8f9fa; }
.feat-name{ flex:1 1 auto; font-size:.98rem; color:#1f2937; }
.tier-icons{ flex:0 0 auto; display:flex; align-items:center; gap:.35rem; }

/* Insignias */
.tier-badge{
  width:22px; height:22px; border-radius:50%;
  display:inline-block; box-shadow:inset 0 0 0 2px rgba(0,0,0,.06);
}
.tier-badge.bronze{ background: var(--tier-bronze); }
.tier-badge.silver{ background: var(--tier-silver); }
.tier-badge.gold{   background: var(--tier-gold); }

/* Leyenda separada */
.feat-legend{
  margin-top:.75rem;    /* separación respecto a la caja */
  padding:.25rem .2rem; /* compacta */
  display:flex; gap:1rem; align-items:center;
  font-size:.9rem; color:#374151;
}
.feat-legend .legend-item{
  display:inline-flex; align-items:center; gap:.4rem;
}