/* ======================================================================
   THEME UNIFICADO – limpio, comentado y sin duplicados
   Paleta base: blanco + acentos esmeralda
   ====================================================================== */

/* ----------------------------------------------------------------------
   0) VARIABLES & BASE / helpers globales
   ---------------------------------------------------------------------- */
:root{
  /* Colores base */
  --bg: #aaa9a91a;            /* fondo página */
  --surface: #f1ebe9e7;       /* tarjetas / superficies */
  --ink: #0f172a;             /* texto principal */
  --muted: #1d2229;           /* texto secundario */

  /* Marca (acento verde profesional) */
  --brand: #f10707;            /* principal */
  --brand-2: #f36249ee;        /* apoyo (gradiente / foco) */

  /* Dimensiones & motion */
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 8px 24px rgba(15,23,42,.06);
  --shadow-md: 0 18px 40px rgba(15,23,42,.12);
  --t-fast: 180ms;
  --t-med: 320ms;

  /* Tipografía y layout */
  --maxw: 1200px;
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset mínimo y accesibilidad */
*,*::before,*::after{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-sans); line-height:1.45;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }                /* imágenes fluidas */
a{ color:var(--brand-2); text-decoration:none; transition:color var(--t-fast); }
a:hover,a:focus{ text-decoration:none; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 18px; }/* contenedor */

:focus{ outline:3px solid rgba(14,165,233,.20); outline-offset:3px; border-radius:6px; } /* foco visible */

/* Utilidades pequeñas */
.center{ display:flex; align-items:center; justify-content:center; }
.mt-1{ margin-top:.6rem; } .mb-1{ margin-bottom:.6rem; }

/* ----------------------------------------------------------------------
   1) HEADER / NAV – sticky claro con sombra al hacer scroll
   ---------------------------------------------------------------------- */
.header_section{
  position:sticky; top:0; z-index:1400;
  background:#e20a0ac2; border-bottom:1px solid rgba(15,23,42,.06);
  box-shadow:0 6px 18px rgba(2,6,23,.03); transition:box-shadow var(--t-fast);
}
.header_section.is-scrolled{ box-shadow:0 10px 24px rgba(2,6,23,.10); } /* aplica tu JS */

.header_section .custom_nav-container{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  align-items:center; justify-items:center;
  max-width:var(--maxw); margin:0 auto; padding:12px 1px;
}

/* Marca izquierda */
.header_section .navbar-brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink); font-weight:800; font-size:1.2rem; text-decoration:none;
}
.header_section .navbar-brand img{ height:46px; object-fit:contain; }

/* Menú centro */
.header_section .navbar-collapse{ display:flex !important; justify-content:center; width:100%; }
.header_section .navbar-nav{
  display:flex !important; gap:22px; align-items:center; list-style:none; margin:0; padding:0;
}
.header_section .navbar-nav .nav-link{
  padding:10px 14px; color:#374151; font-weight:600; border-radius:8px; font-size:1rem;
  transition:background var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.header_section .navbar-nav .nav-link:hover,
.header_section .navbar-nav .nav-item.active .nav-link{
  background:rgba(14,165,233,.10); color:var(--brand-2); transform:translateY(-2px);
}

/* Área de usuario / carrito derecha */
.header_section .user_option{ display:flex; align-items:center; gap:14px; }
.header_section .user_option a{
  color:#374151; font-weight:700; padding:8px 10px; border-radius:8px; text-decoration:none; font-size:.95rem;
}
.header_section .user_option a:hover{ background:rgba(14,165,233,.10); color:var(--brand-2); }

/* Badge de carrito */
.header_section .user_option a.cart-link{ position:relative; padding-right:24px; }
.header_section .user_option a.cart-link::after{
  content:attr(data-count);
  position:absolute; top:-6px; right:-10px;
  min-width:18px; height:18px; padding:0 6px;
  background:#f97316; color:#fff; font-size:.72rem; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(249,115,22,.12);
}
/* Responsive header */
@media (max-width:820px){
  .header_section .custom_nav-container{ grid-template-columns:1fr auto; }
  .header_section .navbar-brand{ justify-self:start; }
  .header_section .user_option{ justify-self:end; }
  .header_section .navbar-nav{ gap:10px; flex-wrap:wrap; justify-content:center; }
}
/* ----------------------------------------------------------------------
   2) HERO / SLIDER – banner con tarjeta y visual
   ---------------------------------------------------------------------- */
.slider_section{
  padding:56px 20px;
  background: linear-gradient(180deg,#ffffff, #f4faf4);
}
.slider_section .banner-box{
  display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:center;
  max-width:var(--maxw); margin:0 auto;
}
@media (max-width:980px){ .slider_section .banner-box{ grid-template-columns:1fr; } }

/* Caja de texto del hero (aislada por selector de contexto) */
.slider_section .detail-box{
  background:var(--surface); border-radius:12px; padding:28px;
  box-shadow:var(--shadow-sm); border:1px solid rgba(12,20,15,.06);
}
.slider_section .detail-box h1{
  font-size:clamp(1.8rem,4.2vw,3rem); line-height:1.04; margin:8px 0 14px; font-weight:800; color:var(--ink);
}
.slider_section .detail-box p{ color:var(--muted); margin-bottom:14px; }
.slider_section .detail-box .btn{
  display:inline-block; padding:10px 18px; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b0b0b; border-radius:999px; font-weight:800; text-decoration:none; box-shadow:0 10px 30px rgba(14,165,233,.18);
}
.slider_section .detail-box .btn:hover{ transform:translateY(-3px); }

/* Caja de imagen del hero */
.slider_section .img-box{
  background:linear-gradient(180deg,#fff,#fbfff9); border-radius:12px; padding:12px;
  box-shadow:var(--shadow-sm); display:flex; justify-content:center;
}
.slider_section .img-box img{ border-radius:10px; max-width:100%; height:auto; }

/* ----------------------------------------------------------------------
   3) FEATURES – fila de beneficios rápidos
   ---------------------------------------------------------------------- */
.features-row{ display:flex; gap:16px; margin-top:20px; flex-wrap:wrap; }
.feature-item{
  flex:1 1 220px; background:var(--surface); border-radius:10px; padding:12px;
  display:flex; gap:12px; align-items:flex-start; border:1px solid rgba(12,20,15,.06); box-shadow:0 6px 18px rgba(2,6,23,.03);
}
.feature-item i{ color:var(--brand-2); font-size:20px; margin-top:3px; }
.feature-item .txt{ color:var(--muted); }

/* ----------------------------------------------------------------------
   4) SHOP / PRODUCTS – rejilla y tarjeta unificada (compat mapeada)
   ---------------------------------------------------------------------- */
.shop_section{ padding:44px 0 72px; background:transparent; }
.shop_section .section-header{ text-align:left; max-width:var(--maxw); margin:0 auto 18px; padding:0 18px; }
.shop_section .section-header h2{ font-size:1.8rem; font-weight:800; color:var(--ink); margin:0 0 6px; }
.shop_section .section-header p{ color:var(--muted); }

/* Grilla responsive */
.shop_section .products-grid,
.shop_section .product-list,
.shop_section ul.products,
.shop_section .row.products{
  display:grid; gap:18px; grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  max-width:var(--maxw); margin:0 auto; padding:0 18px;
}

/* Tarjeta de producto (mapea clases comunes del tema) */
.shop_section .box,
.shop_section .product-card,
.shop_section .card.product,
.shop_section .product-item,
.shop_section .product-list-item{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid rgba(15,23,42,.10);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform var(--t-med), box-shadow var(--t-med), border-color var(--t-fast);
}
.shop_section .box:hover,
.shop_section .product-card:hover,
.shop_section .card.product:hover,
.shop_section .product-item:hover,
.shop_section .product-list-item:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(14,165,233,.35);
}

/* Imagen de producto */
.shop_section .img-box,
.shop_section .product-card .img-box,
.shop_section .card.product .img-box,
.shop_section .product-item .img,
.shop_section .product-list-item .img{
  display:grid; place-items:center; padding:12px; aspect-ratio:4/3;
  background:linear-gradient(180deg,#f6fbff,#ffffff);
}
.shop_section .img-box img{ max-width:92%; max-height:92%; object-fit:contain; border-radius:8px; transition:transform .45s cubic-bezier(.2,.9,.3,1); }
.shop_section .box:hover .img-box img{ transform:scale(1.06) translateY(-4px); }

/* Contenido */
.shop_section .detail-box,
.shop_section .product-card .product-info,
.shop_section .card.product .card-body,
.shop_section .product-item .meta{
  background:transparent; border:0; box-shadow:none;
  padding:12px 14px 14px; display:flex; flex-direction:column; gap:8px; flex:1;
}

/* Título y precio */
.shop_section .title,
.shop_section .product-title,
.shop_section .detail-box h6{ font-weight:800; color:var(--ink); font-size:1.02rem; margin:2px 0 6px; }

.shop_section .price,
.shop_section .product-price,
.shop_section .detail-box h6 + h6{ color:#0b6a3f; font-weight:800; font-size:1.05rem; }

.shop_section .price-old{ color:var(--muted); text-decoration:line-through; font-size:.92rem; }

/* Badges */
.shop_section .new,
.shop_section .badge-new,
.shop_section .discount-badge,
.shop_section .badge-sale{
  position:absolute; top:10px; left:10px; z-index:2;
  padding:.34rem .6rem; border-radius:999px; font-weight:800; font-size:.75rem;
  background:linear-gradient(135deg, var(--brand-2), var(--brand)); color:#0b0b0b;
  box-shadow:0 10px 22px rgba(14,165,233,.25);
}

/* Acciones (cantidad + botón) */
.shop_section .actions, .shop_section .btn-row{ display:flex; gap:10px; margin-top:auto; padding:0 14px 14px; }
.shop_section .qty, .shop_section input[type="number"]{
  width:92px; padding:10px 12px; border-radius:12px; border:1px solid rgba(15,23,42,.18);
  background:#fff; color:var(--ink); font-weight:700;
}
.shop_section .add, .shop_section .btn-add, .shop_section .add-cart-btn, .shop_section .btn.btn-primary{
  margin-left:auto; padding:10px 14px; border-radius:12px; border:0; font-weight:800;
  color:#0b0b0b; background:linear-gradient(135deg,var(--brand),var(--brand-2));
}

/* Selectores de Filtro bonitos (si existen) */
#shop_section select,
#shop_section .form-select,
#shop_section .filter select,
#shop_section .nice-select,
#shop_section .filter-list select{
  appearance:none; background:linear-gradient(180deg,#ffffff,#f7f8f9);
  border:1px solid rgba(15,23,42,.18); color:var(--ink);
  padding:.6rem .9rem; border-radius:12px; min-width:220px; box-shadow:var(--shadow-sm);
}
#shop_section select{
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 4px), calc(100% - 14px) calc(50% - 4px);
  background-size:7px 7px, 7px 7px; background-repeat:no-repeat; padding-right:42px;
}
#shop_section select:focus{ border-color:rgba(14,165,233,.6); box-shadow:0 0 0 3px rgba(14,165,233,.22); }

/* ----------------------------------------------------------------------
   5) CONTACTO – tarjeta, formulario y (si usas) mapa
   ---------------------------------------------------------------------- */
.contact_section{ padding:44px 0 64px; background:transparent; }
.contact_section .container-bg{
  max-width:var(--maxw); margin:0 auto; padding:24px; border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),#fff);
  border:1px solid rgba(15,23,42,.10); box-shadow:var(--shadow-sm);
}

/* Grid con mapa opcional */
.contact_container{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 420px; gap:22px; align-items:start;
}
@media (max-width:980px){ .contact_container{ grid-template-columns:1fr; } }

.map_container{ border-radius:12px; overflow:hidden; border:1px solid rgba(12,20,15,.06); box-shadow:0 8px 24px rgba(2,6,23,.04); }
.map-responsive{ width:100%; height:360px; }

/* Controles del formulario */
.contact_section form input,
.contact_section form textarea{
  width:100%; background:#fff; color:var(--ink);
  border:1px solid rgba(15,23,42,.18); border-radius:12px;
  padding:12px 14px; margin-bottom:12px;
}
.contact_section form .message-box{ min-height:120px; resize:vertical; }
.contact_section form button{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#0b0b0b; font-weight:800; border:none; border-radius:12px; padding:10px 18px;
  box-shadow:0 10px 24px rgba(14,165,233,.18); transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.contact_section form button:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* ----------------------------------------------------------------------
   6) TESTIMONIOS / PARTNERS – tarjetas simples
   ---------------------------------------------------------------------- */
.testimonial_section{ padding:36px 18px; }
.testimonial-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .testimonial-cards{ grid-template-columns:1fr; } }
.testimonial-card{
  background:var(--surface); padding:16px; border-radius:12px; box-shadow:var(--shadow-sm);
  border:1px solid rgba(12,20,15,.06);
}
.partner-row{ display:flex; gap:24px; align-items:center; justify-content:center; flex-wrap:wrap; padding:24px 0; }

/* ----------------------------------------------------------------------
   7) INFO & FOOTER – bloque inferior con newsletter y redes
   ---------------------------------------------------------------------- */
.info_section{
  padding:60px 18px 20px; background:#f0fdf4; color:#1f2937; border-top:1px solid rgba(0,0,0,.05);
  font-size:.95rem;
}
.info_container .row > div h6{
  font-weight:800; font-size:1.1rem; margin-bottom:12px; color:#111827;
}
.info_container .row > div p{ color:#4b5563; font-size:.93rem; line-height:1.6; }

/* Links */
.info_links a, .info_link-box a{
  color:#4b5563; text-decoration:none; display:flex; align-items:center; gap:6px; margin-bottom:8px;
  transition:color .2s; font-weight:600;
}
.info_links a:hover, .info_link-box a:hover{ color:var(--brand); }

/* Newsletter */
.info_form form{ display:flex; gap:6px; flex-wrap:wrap; }
.info_form input[type="email"]{
  flex:1 1 auto; padding:10px 12px; border-radius:8px; border:1px solid #d1d5db; font-size:.95rem; outline:none;
}
.info_form button{
  background:var(--brand); color:#fff; padding:10px 16px; border-radius:8px; border:none; font-weight:700;
  cursor:pointer; transition:transform .18s, box-shadow .2s;
}
.info_form button:hover{ transform:translateY(-2px); box-shadow:0 8px 18px rgba(16,185,129,.25); }

/* Redes */
.social_container{ display:flex; justify-content:center; margin-bottom:24px; gap:16px; }
.social_container a{
  display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
  background:var(--brand); color:#fff; border-radius:50%; font-size:1.2rem; transition:transform .18s, box-shadow .2s, background .2s;
}
.social_container a:hover{ background:#0b6a3f; transform:translateY(-2px); box-shadow:0 6px 18px rgba(16,185,129,.25); }

/* Footer final */
.footer_section{
  margin-top:24px; padding:18px; text-align:center;
  background:var(--brand); color:#fff; border-top:1px solid rgba(0,0,0,.05); font-size:.9rem;
}
.footer_section a{ color:#fff; font-weight:700; }
.footer_section a:hover{ text-decoration:underline; }

/* ----------------------------------------------------------------------
   8) PRODUCT DETAIL – bloque aislado (.pd-compact) sin tocar Bootstrap
   ---------------------------------------------------------------------- */
.pd-compact{ color:#111; background:#f5f5f5; }
.pd-compact .wrap{ width:min(980px,92vw); margin:28px auto; }
.pd-compact .alert-cart{
  border:1px solid #0b6a3f; background:#10b981; color:white; border-radius:6px; padding:12px 16px; margin-bottom:16px;
}
.pd-compact .breadcrumbs{ font-size:1rem; color:#555; margin-bottom:16px; display:flex; gap:.5rem; align-items:center; }
.pd-compact .sep{ opacity:.6; }

/* Card de detalle (scoped) */
.pd-compact .card{
  display:grid; grid-template-columns:1fr 1.2fr; gap:30px;
  background:#fff; border:1px solid #ddd; border-radius:20px; box-shadow:0 10px 30px rgba(0,0,0,.12);
  padding:24px;
}
@media (max-width:900px){ .pd-compact .card{ grid-template-columns:1fr; gap:20px; } }

.pd-compact .media{ position:relative; border-radius:16px; overflow:hidden; background:#f0f0f0; display:flex; align-items:center; justify-content:center; }
.pd-compact .media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:1/1; display:block; transition:transform .3s ease; border-radius:16px; }
.pd-compact .media:hover img{ transform:scale(1.05); }
.pd-compact .tag-new{
  position:absolute; top:14px; left:14px; background:#ef4444; color:#fff; font-weight:700; padding:6px 12px; border-radius:999px; font-size:.9rem; box-shadow:0 4px 12px rgba(0,0,0,.25);
}

.pd-compact .body{ display:grid; gap:16px; align-content:start; color:#111; }
.pd-compact .title{ margin:0; font-size:clamp(2rem,3vw,2.6rem); line-height:1.2; font-weight:800; color:#111; }
.pd-compact .desc{ font-size:1rem; line-height:1.7; color:#333; }

.pd-compact .price{ display:flex; align-items:baseline; gap:14px; margin-top:6px; }
.pd-compact .price .current{ font-weight:900; font-size:clamp(1.8rem,2.5vw,2.4rem); color:var(--brand); }
.pd-compact .price .old{ color:#999; text-decoration:line-through; font-size:1.15rem; }

.pd-compact .actions{ display:flex; gap:12px; margin-top:14px; align-items:center; flex-wrap:wrap; }
.pd-compact .qty-label{ color:#111; font-weight:700; margin-right:8px; font-size:1.05rem; }
.pd-compact .qty{ width:110px; padding:12px 14px; border-radius:14px; border:1px solid #ccc; background:#fff; color:#111; font-size:1.05rem; font-weight:600; }
.pd-compact .qty:focus{ outline:none; box-shadow:0 0 0 3px rgba(16,185,129,.35); border-color:var(--brand); }
.pd-compact .btn{
  padding:14px 20px; border:0; border-radius:14px; cursor:pointer; font-weight:800;
  background:var(--brand); color:white; box-shadow:0 14px 36px rgba(16,185,129,.25); font-size:1.05rem;
  transition:transform .18s, box-shadow .2s;
}
.pd-compact .btn:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(16,185,129,.35); }

/* ----------------------------------------------------------------------
   9) MISC – botones y utilidades varias
   ---------------------------------------------------------------------- */
.btn-box{ text-align:center; margin-top:24px; }
.btn-box a{
  display:inline-block; padding:10px 20px; background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#0b0b0b; border-radius:999px; font-weight:700; text-decoration:none; transition:transform var(--t-fast), box-shadow var(--t-fast);
}
.btn-box a:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }

/* =====================================================================
   IGUALAR ALTURA DE TARJETAS DE PRODUCTO
   - Hace que cada card estire al alto de su fila
   - La imagen ocupa un alto consistente (aspect-ratio)
   - El contenido crece con flex y el precio/botón quedan alineados abajo
   ===================================================================== */

/* 1) La grilla estira los ítems verticalmente */
.shop_section .products-grid{
  /* ya tienes repeat(auto-fit,minmax(...)) – lo mantenemos */
  align-items: stretch;            /* estira el track al alto de la fila */
}

/* Soporte si usas listas/rows del tema */
.shop_section .product-list,
.shop_section ul.products,
.shop_section .row.products{
  align-items: stretch;
}

/* 2) Los wrappers directos dentro de la grilla/lista ocupan 100% de alto */
.shop_section .products-grid > *,
.shop_section .product-list > *,
.shop_section ul.products > *,
.shop_section .row.products > *{
  height: 100%;
}

/* 3) La tarjeta en sí misma se estira y organiza en columna */
.shop_section .box,
.shop_section .product-card,
.shop_section .card.product,
.shop_section .product-item,
.shop_section .product-list-item{
  height: 100%;                    /* clave para igualar alturas */
  display: flex;
  flex-direction: column;
}

/* 4) Imagen con alto consistente (sin deformar) */
.shop_section .img-box,
.shop_section .product-card .img-box,
.shop_section .card.product .img-box,
.shop_section .product-item .img,
.shop_section .product-list-item .img{
  aspect-ratio: 4 / 3;             /* todas las vistas con el mismo alto relativo */
  padding: 12px;
  display: grid;
  place-items: center;
}
.shop_section .img-box img{
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
}

/* 5) El cuerpo de la card crece para rellenar; precio/acciones abajo */
.shop_section .detail-box,
.shop_section .product-card .product-info,
.shop_section .card.product .card-body,
.shop_section .product-item .meta{
  flex: 1;                          /* ocupa el espacio disponible */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 6) Título con 2 líneas máximas para evitar desbordes que “rompan” alturas */
.shop_section .title,
.shop_section .product-title,
.shop_section .detail-box h6{
  min-height: 2.6em;                /* 2 líneas aprox. (1.3em * 2) */
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;            /* recorta a 2 líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 7) Empuja precio/botón al fondo para que todas queden alineadas */
.shop_section .price,
.shop_section .product-price{
  margin-top: auto;                 /* pega el bloque de precio abajo */
}
.shop_section .actions,
.shop_section .btn-row{
  margin-top: 8px;
}
 .contact_section {
  display: flex;
  flex-direction: column;
  align-items: center;    /* Centra horizontalmente */
  padding: 50px 20px;
  text-align: center;
}

.contact_section h2 {
  margin-bottom: 25px;
  font-size: 28px;
  font-weight: bold;
  color: #111827;
}

.contact_form {
  width: 100%;
  max-width: 500px;       /* ← controla el ancho máximo */
  margin: 0 auto;         /* ← centra en la página */
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.contact_form input,
.contact_form textarea {
  width: 100%;
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border 0.3s ease;
}

.contact_form input:focus,
.contact_form textarea:focus {
  border-color: #ef4444;
}

.contact_form button {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 8px;
  padding: 12px 25px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.3s ease;
}

.contact_form button:hover {
  transform: scale(1.05);
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}

/* Layout del header tipo grid, alineado y responsive */
.header_section .custom_nav-container{
  display:grid; grid-template-columns:auto 1fr auto; gap:12px;
  align-items:center;
  max-width:1200px; margin:0 auto; padding:14px 18px;
}
.header_section{
  position:sticky; top:0; z-index:1400; background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.2) blur(6px);
  box-shadow:0 6px 18px rgba(2,6,23,.06);
}

/* Navbar */
.navbar-light .navbar-nav .nav-link{ color:#111; font-weight:500; padding:.5rem .9rem; }
.navbar-light .navbar-nav .nav-link:hover{ color:#0b74ff; }

/* User actions */
.user_option{ gap:14px; }
.u-link{ margin:0 .25rem; color:#111; font-weight:500; }
.u-link:hover{ color:#0b74ff; text-decoration:none; }
.u-icon{ display:inline-flex; align-items:center; justify-content:center; margin-left:.5rem; position:relative; }
.u-icon img{ width:20px; height:20px; }
.cart-count{
  position:absolute; top:-6px; right:-10px; font-size:11px; line-height:1; padding:.2rem .35rem;
  background:#ff3b30; color:#fff; border-radius:999px; min-width:18px; text-align:center;
}

/* Banner / carrusel */
.banner_section{ padding:24px 0 12px; }
.banner_taital .banner_text{ font-size:36px; margin-bottom:.25rem; }
.banner_taital .mens_text{ font-size:22px; color:#0b74ff; margin-bottom:.5rem; }
.banner_taital .lorem_text{ color:#555; max-width:520px; }
.buy_bt, .more_bt{
  display:inline-block; margin:.5rem .4rem 0 0; padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid #0b74ff; background:#0b74ff; color:#fff; font-weight:600;
}
.more_bt{ background:#fff; color:#0b74ff; }
.more_bt:hover{ background:#0b74ff; color:#fff; }
.shoes_img img{ width:100%; height:auto; display:block; }

/* Indicadores más visibles */
.carousel-indicators li{
  width:10px; height:10px; border-radius:50%; background:#cbd5e1;
}
.carousel-indicators .active{ background:#0b74ff; }

/* Ajustes responsive */
@media (max-width: 991.98px){
  .header_section .custom_nav-container{ grid-template-columns:1fr auto; }
  .navbar-nav{ margin-top:10px; }
}