/*────────────────────────────  1. VARIABLES Y FUENTES  ───────────────────────────*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&family=Lato:wght@400;700&display=swap');

:root{
  --primary-color:#0d6efd;
  --secondary-color:#6c757d;
  --success-color:#198754;
  --light-gray:#f8f9fa;
  --border-color:#dee2e6;
  --dark-text:#212529;
  --font-header:'Poppins',sans-serif;
  --font-body:'Lato',sans-serif;
}

body{
  background:var(--light-gray);
  font-family:var(--font-body);
  scroll-behavior:smooth;
}

/*────────────────────────────  2. TIENDA / TARJETAS  ───────────────────────────*/

/* contenedor bootstrap */
.container{padding:2rem 0;}
@media(max-width:767px){.col{margin-bottom:1rem;}}
.row-cols-1>.col,
.row-cols-md-2>.col,
.row-cols-lg-3>.col{padding:15px;}

button:disabled{opacity:.6;cursor:not-allowed}

/* tarjeta */
.card{
  border-radius:.75rem;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
  height:100%;
  transition:transform .25s,box-shadow .25s;
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 1rem 2rem rgba(0,0,0,.15);
}



/* texto & precios */
.card-title{font:700 1.2rem var(--font-header);}
.card-text {font-size:.95rem;color:#746868}
.precios-container{
  border-top:1px solid var(--border-color);
  padding-top:.75rem;margin-top:.75rem;
}
.precio-text{color:var(--success-color);font-weight:600;margin:.15rem 0}

/* botones CTA */
.btn-cta{
  background:linear-gradient(135deg,#06b6d4 0%,#3b82f6 100%);
  color:#fff;border:none;border-radius:50px;
  font-weight:600;padding:.45rem 1.5rem;
}
.btn-cta:hover{filter:brightness(1.08)}

/* paginador fijo en desktop */
@media(min-width:992px){
  #paginador{position:sticky;top:1rem;z-index:1}
}

/*────────────────────────────  3. WIZARD DE COTIZACIÓN  ───────────────────────────*/

/* Copiado íntegro de tu bloque original */
.wizard-container{
  background:#fff;border-radius:12px;
  box-shadow:0 6px 25px rgba(0,0,0,.08);
  padding:2rem 2.5rem;margin-top:2rem;
}

.wizard-progress-bar{
  display:flex;justify-content:space-between;
  margin-bottom:2.5rem;position:relative;
}
.wizard-progress-bar::before{
  content:'';position:absolute;top:50%;left:0;width:100%;height:2px;
  background:var(--border-color);transform:translateY(-50%);z-index:1;
}
.wizard-progress-bar .step{
  z-index:2;background:#fff;padding:0 15px;
  color:var(--secondary-color);font-family:var(--font-header);
  transition:color .3s;
}
.wizard-progress-bar .step.active{color:var(--primary-color);}
.wizard-progress-bar .step.active strong{
  background:var(--primary-color);color:#fff;border-radius:50%;
  display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;
  margin-right:8px;
}
.wizard-progress-bar .step strong{
  background:var(--border-color);color:var(--secondary-color);border-radius:50%;
  display:inline-block;width:28px;height:28px;line-height:28px;text-align:center;
  margin-right:8px;transition:.3s;
}

.wizard-step{display:none;}
.wizard-step.active{display:block;animation:fadeIn .5s ease-in-out;}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px);}
                  to  {opacity:1;transform:translateY(0);} }

.step-title   {font-family:var(--font-header);color:var(--dark-text);font-weight:700;}
.step-subtitle{color:var(--secondary-color);margin:-5px 0 2rem;}

.service-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.5rem;
}
.service-card{
  border:2px solid var(--border-color);border-radius:8px;
  padding:1.5rem;text-align:center;cursor:pointer;
  transition:.2s;
}
.service-card:hover{
  transform:translateY(-5px);
  box-shadow:0 8px 20px rgba(0,0,0,.1);
  border-color:var(--primary-color);
}
.service-card.selected{
  border-color:var(--primary-color);
  box-shadow:0 0 0 3px rgba(13,110,253,.25);
  background:#f7faff;
}
.service-card i{font-size:2.8rem;color:var(--primary-color);margin-bottom:1rem;}
.service-card h5{
  font-family:var(--font-header);font-size:1.1rem;
  color:var(--dark-text);margin:0;
}
#service-feedback{color:#dc3545;margin-top:1rem;display:none;}

.summary-box{
  background:var(--light-gray);border-left:5px solid var(--primary-color);
  padding:1.5rem;border-radius:8px;margin-bottom:2rem;
}

.wizard-navigation{
  display:flex;justify-content:space-between;margin-top:3rem;
  border-top:1px solid var(--border-color);padding-top:1.5rem;
}

/* Miniaturas compactas */
.card-img-top{
  height: 160px;         /* antes 200-220 */
  object-fit: cover;
}

@media (min-width:992px){ /* desktop */
  .card-img-top{height:180px;}
}
.card{
  padding: .75rem 1rem;     /* antes 1.25-1.5 rem */
}

.card-title{
  font-size: 1rem;          /* antes 1.2 rem */
}

.card-text{
  font-size: .9rem;         /* opcional, igual que Bootstrap body-sm */
}
.card-img-top {
    /* 1. Trata la imagen como un bloque para poder centrarla */
    display: block;

    /* 2. Los márgenes automáticos a los lados la centran horizontalmente */
    margin-left: auto;
    margin-right: auto;

    /* 3. Limita el ancho al 75% de la tarjeta para que no toque los bordes (ajusta si quieres) */
    width: 80%;

    /* 4. La altura se ajusta sola para no deformar la imagen */
    height: auto;
  }
.cursor-pointer{cursor:pointer;}

.actions-buttons{display:flex;gap:10px;justify-content:center;}
/*────────────────────────  FIN STYLE.CSS ────────────────────────*/

/* Estilos FORZADOS para un encabezado más compacto */
nav.navbar-compacto {
    min-height: auto !important;
}

nav.navbar-compacto .navbar-brand {
    padding-top: 0.1rem !important;
    padding-bottom: 0.1rem !important;
}

nav.navbar-compacto .nav-link {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    font-size: 1rem !important; /* <-- LÍNEA AÑADIDA PARA REDUCIR LA FUENTE */
}


/* Desktop: que "Registrarse" se vea como botón */
@media (min-width: 768px) {
  .navbar .nav-link.register-btn {
    background-color: #0d6efd;
    color: #fff !important;
    border-radius: .25rem;
    padding: .25rem .75rem;
    margin-left: .5rem;
  }


/* Móvil: que se vea como link normal, alineado como los demás */
@media (max-width: 767.98px) {
  .navbar .nav-link.register-btn {
    background: none !important;
    color: var(--bs-nav-link-color, #adb5bd) !important;
    padding: .5rem 1rem;       /* igual que otros nav-link en el collapse */
    border-radius: 0;
    display: block;            /* asegura misma anchura y alineación */
    margin-left: 0;
  }