:root {
  --azul-noche:#061A33;
  --azul-mar:#0B2C4A;
  --dorado:#D9A441;
  --dorado-suave:#F3D27A;
  --madera:#8B4E2F;
  --crema:#FFF4DD;
  --harina:#FFFDF8;
  --verde-sur:#2F5D50;
  --rojo:#9B2F2F;
  --texto:#2A241E;
  --muted:#766A5B;
  --shadow:0 20px 55px rgba(6,26,51,.13);
  --radius:26px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Montserrat,Arial,sans-serif;color:var(--texto);background:linear-gradient(180deg,#fffdf8 0%,#fff4dd 100%)}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.container{width:min(1180px,92%);margin:auto}.topbar{background:var(--azul-noche);color:var(--dorado-suave);display:flex;justify-content:center;gap:40px;padding:9px 18px;font-size:13px;font-weight:700;letter-spacing:.4px}.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.92);backdrop-filter:blur(14px);border-bottom:1px solid rgba(217,164,65,.25)}.navbar{height:86px;display:flex;align-items:center;justify-content:space-between}.brand img{width:130px;height:68px;object-fit:cover;border-radius:16px;box-shadow:0 12px 30px rgba(6,26,51,.16)}.nav-links{display:flex;align-items:center;gap:24px;font-weight:800}.nav-links a{color:var(--azul-noche);padding:10px 0;position:relative}.nav-links a.active,.nav-links a:hover{color:var(--dorado)}.nav-cart{background:var(--azul-noche);color:white!important;padding:12px 16px!important;border-radius:999px;display:flex;gap:8px;align-items:center}.cart-count{background:var(--dorado);color:var(--azul-noche);min-width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px}.menu-toggle{display:none;background:var(--azul-noche);color:#fff;border:0;border-radius:12px;padding:10px 13px;font-size:22px}.hero{background:radial-gradient(circle at 80% 15%,rgba(217,164,65,.18),transparent 32%),linear-gradient(135deg,var(--azul-noche),var(--azul-mar));color:#fff;overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;min-height:620px;padding:70px 0}.eyebrow{text-transform:uppercase;letter-spacing:2px;color:var(--dorado-suave);font-weight:900;font-size:12px}.eyebrow.dark{color:var(--dorado)}h1,h2,h3{font-family:'Playfair Display',serif;margin:0;color:inherit}h1{font-size:clamp(42px,6vw,78px);line-height:.96}h2{font-size:clamp(30px,4vw,48px)}p{line-height:1.75;color:inherit}.hero-copy p{font-size:18px;max-width:690px;color:#f9ead0}.hero-actions,.hero-badges{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.btn{border:0;border-radius:999px;padding:15px 24px;font-weight:900;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;transition:.2s ease}.btn.primary{background:linear-gradient(135deg,var(--dorado),var(--dorado-suave));color:var(--azul-noche);box-shadow:0 15px 35px rgba(217,164,65,.28)}.btn.secondary{border:1px solid rgba(243,210,122,.5);color:#fff}.btn.ghost{background:#fff;border:1px solid rgba(6,26,51,.14);color:var(--azul-noche)}.btn.mercado{background:#009ee3;color:white}.btn.full{width:100%;margin-top:14px}.hero-badges span{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);padding:10px 14px;border-radius:999px;color:#fff}.hero-card{background:rgba(255,255,255,.09);border:1px solid rgba(243,210,122,.28);border-radius:34px;padding:28px;box-shadow:0 25px 80px rgba(0,0,0,.25)}.hero-card img{border-radius:28px;width:100%;aspect-ratio:1/1;object-fit:cover}.hero-card p{text-align:center;color:var(--dorado-suave);font-weight:900;letter-spacing:2px;text-transform:uppercase}.section{padding:80px 0}.section-title{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}.section-title span{color:var(--dorado);font-weight:900;text-transform:uppercase;letter-spacing:2px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.product-card{background:#fff;border:1px solid rgba(139,78,47,.11);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.22s ease}.product-card:hover{transform:translateY(-5px)}.product-card img{width:100%;aspect-ratio:1/1;object-fit:cover;background:white}.product-body{padding:22px}.product-body span{font-size:12px;text-transform:uppercase;color:var(--dorado);font-weight:900;letter-spacing:1px}.product-body h3{font-size:24px;color:var(--azul-noche);margin:8px 0}.product-body p{color:var(--muted);font-size:14px}.product-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px}.product-footer strong,.detail-price{font-size:24px;color:var(--madera);font-weight:900}.mini-btn{background:var(--azul-noche);color:white;padding:10px 14px;border-radius:999px;font-size:13px;font-weight:900}.story{background:linear-gradient(135deg,#fff,#fff4dd)}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.story h2{color:var(--azul-noche)}.story p{color:var(--muted)}.story-list{display:grid;gap:16px}.story-list div{background:#fff;border-left:6px solid var(--dorado);border-radius:20px;padding:22px;box-shadow:var(--shadow);display:flex;justify-content:space-between;gap:18px}.story-list strong{font-size:26px;color:var(--azul-noche)}.page-hero{background:linear-gradient(135deg,var(--azul-noche),var(--azul-mar));color:white}.page-hero.compact .container{padding:72px 0}.page-hero h1{font-size:clamp(38px,5vw,64px)}.page-hero p{color:#f8e6c5;max-width:780px}.catalog-filter{display:flex;gap:15px;margin-bottom:25px}.catalog-filter input,.catalog-filter select,input,select,textarea{width:100%;border:1px solid rgba(6,26,51,.15);border-radius:16px;padding:15px;background:#fff;font:inherit;outline:none}.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:45px;align-items:start}.detail-image{background:#fff;border-radius:34px;box-shadow:var(--shadow);padding:20px}.detail-image img{border-radius:24px}.detail-info{background:#fff;border-radius:34px;box-shadow:var(--shadow);padding:36px}.detail-info h1{font-size:clamp(36px,5vw,60px);color:var(--azul-noche)}.detail-info p{color:var(--muted)}.add-cart-form label,.checkout-form label{display:block;font-weight:900;color:var(--azul-noche);margin-top:18px}.qty-control{display:flex;align-items:center;max-width:190px;border:1px solid rgba(6,26,51,.13);border-radius:999px;overflow:hidden;margin:12px 0 10px;background:#fff}.qty-control button{width:54px;height:50px;border:0;background:var(--crema);font-size:25px;font-weight:900;color:var(--azul-noche);cursor:pointer}.qty-control input{text-align:center;border:0;border-left:1px solid rgba(6,26,51,.1);border-right:1px solid rgba(6,26,51,.1);border-radius:0;padding:10px}.delivery-box{display:grid;gap:12px;margin-top:24px}.delivery-box div{background:var(--crema);padding:16px;border-radius:18px}.delivery-box strong{display:block;color:var(--azul-noche)}.delivery-box span{color:var(--muted);font-size:14px}.cart-layout,.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:28px;align-items:start}.cart-row{display:grid;grid-template-columns:100px 1fr auto auto auto;gap:16px;align-items:center;background:#fff;border-radius:24px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow)}.cart-row img{width:100px;height:100px;object-fit:cover;border-radius:18px}.cart-info h3{color:var(--azul-noche);font-size:21px}.cart-info span{color:var(--muted);font-weight:700}.cart-actions{display:flex;align-items:center;gap:10px;background:var(--crema);border-radius:999px;padding:6px}.cart-actions button{width:34px;height:34px;border:0;border-radius:50%;background:var(--azul-noche);color:white;font-weight:900;cursor:pointer}.remove-btn{border:0;background:transparent;color:var(--rojo);font-weight:900;cursor:pointer}.cart-summary{background:#fff;border-radius:26px;padding:26px;box-shadow:var(--shadow);position:relative}.cart-summary.sticky{position:sticky;top:110px}.cart-summary h2{font-size:31px;color:var(--azul-noche);margin-bottom:18px}.cart-summary div{display:flex;justify-content:space-between;margin:14px 0;color:var(--muted);font-weight:800}.cart-summary .summary-total{border-top:1px solid rgba(6,26,51,.12);padding-top:18px;color:var(--azul-noche);font-size:22px}.empty-cart{background:#fff;border-radius:26px;padding:40px;box-shadow:var(--shadow)}.checkout-form{background:#fff;border-radius:30px;padding:30px;box-shadow:var(--shadow)}.checkout-form h2{color:var(--azul-noche)}.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.contact-card,.legal-page{background:#fff;border-radius:26px;padding:28px;box-shadow:var(--shadow)}.contact-card h2,.legal-page h1,.legal-page h2{color:var(--azul-noche)}.legal-page{margin-top:70px;margin-bottom:70px}.legal-page p{color:var(--muted)}.prefooter{background:var(--azul-noche);color:white;padding:55px 0}.prefooter-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:22px;align-items:center}.prefooter h2{color:var(--dorado-suave)}.prefooter p,.prefooter span{color:#f4e6cc}.prefooter-card{border:1px solid rgba(243,210,122,.25);border-radius:20px;padding:20px;background:rgba(255,255,255,.06)}.prefooter-card strong{display:block;color:var(--dorado-suave);margin-bottom:8px}.footer{background:#031224;color:#fff;padding-top:55px}.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}.footer-logo{width:120px;border-radius:16px;margin-bottom:14px}.footer h3{color:var(--dorado-suave);font-size:22px}.footer a{display:block;color:#f2e1c7;margin:9px 0}.footer p{color:#d8c6aa}.credits{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding:18px;margin-top:30px;color:#d8c6aa}.credits a{color:var(--dorado-suave);font-weight:900;display:inline}.whatsapp-link{color:#7fffad!important;font-weight:900}.chat-launcher{position:fixed;right:22px;bottom:22px;width:62px;height:62px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--dorado),var(--dorado-suave));color:var(--azul-noche);font-size:26px;box-shadow:0 15px 40px rgba(0,0,0,.25);cursor:pointer;z-index:80}.chatbot{position:fixed;right:22px;bottom:98px;width:min(360px,92vw);background:#fff;border-radius:24px;box-shadow:0 25px 80px rgba(0,0,0,.3);overflow:hidden;display:none;z-index:90}.chatbot.open{display:block}.chatbot-header{background:var(--azul-noche);color:var(--dorado-suave);padding:16px 18px;display:flex;justify-content:space-between;align-items:center}.chat-close{background:transparent;border:0;color:white;font-size:26px;cursor:pointer}.chatbot-body{height:280px;overflow:auto;padding:16px;background:#fffdf8}.bot-msg,.user-msg{padding:12px 14px;border-radius:18px;margin-bottom:10px;line-height:1.45;font-size:14px}.bot-msg{background:var(--crema);color:var(--texto)}.user-msg{background:var(--azul-mar);color:white;margin-left:30px}.bot-msg a{color:var(--verde-sur);font-weight:900;text-decoration:underline}.chatbot-form{display:flex;gap:8px;padding:12px;border-top:1px solid rgba(6,26,51,.1)}.chatbot-form input{border-radius:999px}.chatbot-form button{border:0;background:var(--dorado);color:var(--azul-noche);font-weight:900;border-radius:999px;padding:0 16px;cursor:pointer}.success{background:linear-gradient(135deg,var(--verde-sur),var(--azul-noche))}
@media(max-width:900px){.topbar{flex-direction:column;gap:4px;text-align:center}.menu-toggle{display:block}.nav-links{display:none;position:absolute;left:4%;right:4%;top:92px;background:white;padding:20px;border-radius:24px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.hero-grid,.story-grid,.product-detail,.cart-layout,.checkout-grid,.prefooter-grid,.footer-grid{grid-template-columns:1fr}.product-grid,.contact-grid{grid-template-columns:repeat(2,1fr)}.cart-row{grid-template-columns:90px 1fr;gap:12px}.cart-actions,.cart-total-line,.remove-btn{grid-column:2}.catalog-filter{flex-direction:column}.section-title{align-items:flex-start;flex-direction:column}.hero-grid{min-height:auto}.hero-card{display:none}}
@media(max-width:600px){.product-grid,.contact-grid{grid-template-columns:1fr}.navbar{height:76px}.brand img{width:108px;height:58px}.section{padding:55px 0}.hero-grid{padding:56px 0}h1{font-size:42px}.cart-row{grid-template-columns:1fr}.cart-row img{width:100%;height:200px}.cart-actions,.cart-total-line,.remove-btn{grid-column:auto}.footer-grid{gap:10px}}

/* =========================================================
   GARPER - Ajustes catálogo compacto + AJAX carrito
   - 4 columnas web
   - 3 columnas tablet
   - 2 columnas móvil
   - tarjetas del mismo alto
   - textos controlados
   ========================================================= */

.catalog-section{
  padding-top:60px;
}

.catalog-grid.product-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:20px;
  align-items:stretch;
}

.catalog-card.product-card{
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:22px;
}

.catalog-card:hover{
  transform:translateY(-3px);
}

.catalog-card-image{
  display:block;
  background:#fff;
}

.catalog-card.product-card img{
  aspect-ratio:1/1;
  object-fit:cover;
}

.catalog-card-body.product-body{
  padding:18px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.catalog-card-body h3{
  font-size:21px;
  min-height:54px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.catalog-card-body p{
  min-height:60px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.catalog-card-bottom{
  margin-top:auto;
}

.catalog-product-footer.product-footer{
  margin-top:14px;
  align-items:center;
}

.catalog-product-footer strong{
  font-size:21px;
}

.catalog-product-footer .mini-btn{
  white-space:nowrap;
  padding:9px 12px;
  font-size:12px;
}

.catalog-add-form{
  margin-top:14px;
  display:grid;
  gap:10px;
}

.catalog-add-form .catalog-qty{
  max-width:100%;
  width:100%;
  margin:0;
}

.catalog-add-form .qty-control{
  height:44px;
}

.catalog-add-form .qty-control button{
  height:44px;
  width:44px;
  min-width:44px;
}

.catalog-add-form .qty-control input{
  height:44px;
  min-width:42px;
  padding:8px;
}

.catalog-action-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.catalog-cart-btn,
.catalog-buy-btn{
  width:100%;
  min-height:44px;
  padding:11px 12px;
  font-size:13px;
  border:none;
}

.catalog-buy-btn{
  background:var(--azul-noche);
  color:#fff;
  box-shadow:0 12px 26px rgba(6,26,51,.18);
}

.catalog-buy-btn:hover{
  background:var(--azul-mar);
}

.catalog-add-msg{
  min-height:18px;
  font-size:12px;
  font-weight:900;
  color:var(--verde-sur);
  text-align:center;
}

.catalog-add-msg.error{
  color:var(--rojo);
}

.catalog-toast{
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%) translateY(20px);
  background:var(--azul-noche);
  color:#fff;
  padding:13px 18px;
  border-radius:999px;
  font-weight:900;
  box-shadow:0 18px 45px rgba(0,0,0,.25);
  z-index:20000;
  opacity:0;
  pointer-events:none;
  transition:.25s ease;
}

.catalog-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

@media(max-width:1100px){
  .catalog-grid.product-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:700px){
  .catalog-grid.product-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px;
  }

  .catalog-section{
    width:min(100% - 18px, 1180px);
  }

  .catalog-card-body.product-body{
    padding:13px;
  }

  .catalog-card-body span{
    font-size:10px;
  }

  .catalog-card-body h3{
    font-size:17px;
    min-height:44px;
    margin:6px 0;
  }

  .catalog-card-body p{
    font-size:12px;
    min-height:50px;
    -webkit-line-clamp:3;
  }

  .catalog-product-footer.product-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }

  .catalog-product-footer strong{
    font-size:18px;
  }

  .catalog-product-footer .mini-btn{
    width:100%;
    display:flex;
    justify-content:center;
    text-align:center;
  }

  .catalog-action-buttons{
    grid-template-columns:1fr;
  }

  .catalog-cart-btn,
  .catalog-buy-btn{
    min-height:42px;
    font-size:12px;
    padding:10px 8px;
  }

  .catalog-add-form .qty-control{
    height:40px;
  }

  .catalog-add-form .qty-control button{
    height:40px;
    width:40px;
    min-width:40px;
    font-size:20px;
  }

  .catalog-add-form .qty-control input{
    height:40px;
  }
}

@media(max-width:380px){
  .catalog-grid.product-grid{
    gap:10px;
  }

  .catalog-card-body.product-body{
    padding:11px;
  }

  .catalog-card-body h3{
    font-size:16px;
  }
}
/* =========================================================
   FIX HOME MOVIL - Mostrar logo original en el hero
   ========================================================= */

@media(max-width:900px){
  .hero-card{
    display:block !important;
    margin:24px auto 0 !important;
    max-width:340px;
    padding:18px;
  }

  .hero-card img{
    display:block !important;
    width:100% !important;
    max-width:280px !important;
    height:auto !important;
    margin:0 auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    background:transparent !important;
  }

  .hero-card p{
    display:block !important;
    font-size:12px;
    margin-top:12px;
  }
}

@media(max-width:600px){
  .hero-card{
    max-width:300px;
    padding:16px;
  }

  .hero-card img{
    max-width:240px !important;
  }
}
/* =========================================================
   FIX HOME MOVIL - Hero/historia + logo original
   Mejora separación, orden visual y tamaño en teléfono
   ========================================================= */

@media(max-width:900px){

  .hero-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:26px !important;
    padding:46px 0 38px !important;
    min-height:auto !important;
    text-align:center;
  }

  .hero-copy{
    order:1;
  }

  .hero-card{
    order:2;
    display:block !important;
    width:100%;
    max-width:300px;
    margin:0 auto !important;
    padding:16px;
    border-radius:26px;
    background:rgba(255,255,255,.08);
  }

  .hero-card img{
    display:block !important;
    width:100% !important;
    max-width:230px !important;
    height:auto !important;
    margin:0 auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
    border-radius:20px;
    background:transparent !important;
  }

  .hero-card p{
    display:block !important;
    margin:10px 0 0 !important;
    font-size:11px;
    letter-spacing:1.2px;
    line-height:1.4;
  }

  .hero-copy h1{
    font-size:clamp(36px, 10vw, 48px);
    line-height:1;
  }

  .hero-copy p{
    font-size:15px;
    line-height:1.65;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .hero-actions,
  .hero-badges{
    justify-content:center;
  }
}

@media(max-width:600px){

  .hero-grid{
    gap:20px !important;
    padding:38px 0 32px !important;
  }

  .hero-card{
    max-width:260px;
    padding:14px;
  }

  .hero-card img{
    max-width:205px !important;
  }

  .hero-copy p{
    font-size:14px;
  }

  .hero-actions .btn{
    width:100%;
  }
}
/* =========================================================
   LOGO ORIGINAL ENTRE TITULO Y TEXTO EN HOME MOVIL
   ========================================================= */

.hero-logo-mobile{
  display:none;
}

@media(max-width:900px){

  .hero-logo-mobile{
    display:block;
    width:100%;
    max-width:245px;
    margin:22px auto 18px;
    padding:14px;
    border-radius:24px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(243,210,122,.28);
    box-shadow:0 18px 45px rgba(0,0,0,.22);
  }

  .hero-logo-mobile img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    border-radius:18px;
  }

  .hero-card{
    display:none !important;
  }

  .hero-copy p{
    margin-top:0;
  }
}

@media(max-width:600px){

  .hero-logo-mobile{
    max-width:220px;
    margin:18px auto 16px;
    padding:12px;
  }
}
/* =========================================================
   GARPER - NUEVA IDENTIDAD VISUAL PANADERIA SUR DE CHILE
   Paleta calida, artesanal, familiar y mas apetecible
   ========================================================= */

:root{
  --azul-noche:#061A33;
  --azul-mar:#14324A;

  --dorado:#D9A441;
  --dorado-suave:#F3D27A;

  --crema:#FFF4DD;
  --harina:#FFFDF8;

  --pan-claro:#F7D99B;
  --pan-dorado:#DFA64B;
  --caramelo:#B86B32;
  --madera:#7A4328;
  --chocolate:#3A2117;

  --verde-sur:#3F6F5B;
  --verde-musgo:#6F8A5F;

  --texto:#2D2118;
  --muted:#7A6757;

  --shadow:0 18px 45px rgba(87,50,26,.14);
  --radius:24px;
}

/* Fondo general mas calido */
body{
  color:var(--texto);
  background:
    radial-gradient(circle at top left, rgba(247,217,155,.45), transparent 32%),
    linear-gradient(180deg,#fffaf1 0%,#fff3dc 45%,#f8e3bd 100%);
}

/* Top bar menos fria */
.garper-topbar-final{
  background:linear-gradient(90deg,#3A2117,#7A4328);
  color:#FFE7A8;
}

/* Navbar mas panaderia / madera clara */
.garper-header-final{
  background:rgba(255,250,241,.96);
  border-bottom:1px solid rgba(184,107,50,.18);
  box-shadow:0 10px 28px rgba(122,67,40,.10);
}

.garper-nav-links-final a{
  color:var(--chocolate);
}

.garper-nav-links-final a:hover,
.garper-nav-links-final a.active{
  color:var(--caramelo);
}

/* Admin se mantiene visible pero menos corporativo */
.garper-admin-final{
  background:linear-gradient(135deg,#DFA64B,#F7D99B);
  color:#3A2117 !important;
  box-shadow:0 10px 22px rgba(184,107,50,.22);
}

/* Carrito oscuro, pero mas cafe/petroleo */
.garper-cart-final{
  background:linear-gradient(135deg,#3A2117,#14324A);
  color:#fff !important;
}

.garper-cart-final strong{
  background:#F3D27A;
  color:#3A2117;
}

/* Hero principal: menos frio, mas sur calido */
.hero{
  background:
    radial-gradient(circle at 82% 18%, rgba(243,210,122,.34), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(111,138,95,.22), transparent 32%),
    linear-gradient(135deg,#3A2117 0%,#6D3E24 42%,#14324A 100%);
  color:#fffaf1;
}

/* Texto destacado */
.eyebrow{
  color:#FFE7A8;
}

.hero-copy p{
  color:#FFEED0;
}

/* Boton comprar: pan dorado */
.btn.primary{
  background:linear-gradient(135deg,#DFA64B,#F7D99B);
  color:#321E13;
  box-shadow:0 15px 35px rgba(184,107,50,.26);
}

.btn.primary:hover{
  transform:translateY(-2px);
  filter:saturate(1.05);
}

/* Boton secundario mas natural */
.btn.secondary{
  border:1px solid rgba(255,231,168,.55);
  color:#FFF4DD;
  background:rgba(255,255,255,.06);
}

/* Badges del hero */
.hero-badges span{
  background:rgba(255,244,221,.10);
  border:1px solid rgba(255,231,168,.30);
  color:#FFF4DD;
}

/* Tarjeta del logo: menos marco azul, mas vitrina artesanal */
.hero-card{
  background:rgba(255,250,241,.10);
  border:1px solid rgba(255,231,168,.28);
  box-shadow:0 26px 80px rgba(58,33,23,.32);
}

.hero-card p{
  color:#FFE7A8;
}

/* Titulos */
h1,h2,h3{
  color:inherit;
}

.section-title span,
.product-body span{
  color:var(--caramelo);
}

/* Tarjetas productos mas calidas */
.product-card{
  background:#fffaf1;
  border:1px solid rgba(184,107,50,.13);
  box-shadow:0 16px 38px rgba(122,67,40,.12);
}

.product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 55px rgba(122,67,40,.18);
}

.product-body h3{
  color:#3A2117;
}

.product-body p{
  color:var(--muted);
}

.product-footer strong,
.detail-price{
  color:var(--caramelo);
}

/* Boton ver producto */
.mini-btn{
  background:linear-gradient(135deg,#3A2117,#7A4328);
  color:#fff;
}

/* Boton comprar directo del catalogo */
.catalog-buy-btn{
  background:linear-gradient(135deg,#3F6F5B,#6F8A5F);
  color:#fff;
  box-shadow:0 12px 26px rgba(63,111,91,.20);
}

.catalog-buy-btn:hover{
  background:linear-gradient(135deg,#315746,#5F7A50);
}

/* Cantidad + - */
.qty-control{
  background:#fffaf1;
  border:1px solid rgba(184,107,50,.18);
}

.qty-control button{
  background:#FFF0CF;
  color:#3A2117;
}

.qty-control button:hover{
  background:#F7D99B;
}

/* Story / historia */
.story{
  background:
    radial-gradient(circle at 20% 20%, rgba(247,217,155,.35), transparent 30%),
    linear-gradient(135deg,#fffaf1,#f9e6c2);
}

.story h2,
.contact-card h2,
.legal-page h1,
.legal-page h2{
  color:#3A2117;
}

.story p,
.legal-page p{
  color:var(--muted);
}

.story-list div{
  background:#fffaf1;
  border-left:6px solid var(--pan-dorado);
  box-shadow:0 16px 40px rgba(122,67,40,.12);
}

.story-list strong{
  color:#7A4328;
}

/* Page hero internos */
.page-hero{
  background:
    radial-gradient(circle at 85% 20%, rgba(243,210,122,.28), transparent 30%),
    linear-gradient(135deg,#3A2117,#7A4328 48%,#14324A);
}

.page-hero p{
  color:#FFEED0;
}

/* Formularios */
.catalog-filter input,
.catalog-filter select,
input,
select,
textarea{
  border:1px solid rgba(122,67,40,.18);
  background:#fffaf1;
  color:#2D2118;
}

.catalog-filter input:focus,
.catalog-filter select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:#DFA64B;
  box-shadow:0 0 0 4px rgba(223,166,75,.16);
}

/* Carrito / checkout */
.cart-summary,
.checkout-form,
.empty-cart,
.contact-card,
.legal-page{
  background:#fffaf1;
  box-shadow:0 18px 45px rgba(122,67,40,.13);
}

.cart-summary h2,
.checkout-form h2,
.cart-info h3{
  color:#3A2117;
}

.cart-actions{
  background:#FFF0CF;
}

.cart-actions button{
  background:#7A4328;
}

.remove-btn{
  color:#9B2F2F;
}

/* Prefooter mas sureño */
.prefooter{
  background:
    radial-gradient(circle at 15% 10%, rgba(243,210,122,.13), transparent 28%),
    linear-gradient(135deg,#3A2117,#14324A);
}

.prefooter h2,
.prefooter-card strong{
  color:#FFE7A8;
}

/* Footer mas madera/chocolate */
.footer{
  background:linear-gradient(180deg,#2A1710,#120A07);
}

.footer h3{
  color:#F3D27A;
}

.footer a{
  color:#F5DEC0;
}

.footer p,
.credits{
  color:#D8C0A0;
}

.credits a{
  color:#F3D27A;
}

/* Chat ayuda más visible, pero armónico */
.garper-help-button{
  background:linear-gradient(135deg,#3F6F5B,#25D366);
  box-shadow:0 18px 42px rgba(63,111,91,.32);
}

.garper-help-header{
  background:linear-gradient(135deg,#3A2117,#7A4328);
}

.garper-help-question:hover{
  background:#F7D99B;
}

/* Toast catalogo */
.catalog-toast{
  background:linear-gradient(135deg,#3A2117,#7A4328);
}

/* Ajuste mobile para que se sienta más cálido */
@media(max-width:900px){
  .hero{
    background:
      radial-gradient(circle at 70% 20%, rgba(243,210,122,.26), transparent 34%),
      linear-gradient(160deg,#3A2117 0%,#7A4328 58%,#14324A 100%);
  }

  .hero-copy h1{
    color:#fffaf1;
  }

  .hero-logo-mobile,
  .hero-card{
    background:rgba(255,250,241,.10);
    border:1px solid rgba(255,231,168,.28);
  }
}
/* =========================================================
   FIX ESPACIADO PREFOOTER / FOOTER
   Evita que la sección quede pegada al contenido anterior
   ========================================================= */

.prefooter{
  margin-top:70px;
  padding:70px 0;
}

.prefooter-grid{
  align-items:center;
  gap:34px;
}

.prefooter h2{
  margin-bottom:18px;
}

.prefooter p{
  max-width:520px;
}

.prefooter-card{
  min-height:118px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Separación inferior visual antes del footer */
.footer{
  padding-top:70px;
}

/* Móvil */
@media(max-width:900px){
  .prefooter{
    margin-top:48px;
    padding:52px 0;
  }

  .prefooter-grid{
    gap:18px;
  }

  .prefooter h2{
    font-size:34px;
    margin-bottom:14px;
  }

  .prefooter p{
    font-size:15px;
  }

  .prefooter-card{
    min-height:auto;
    padding:22px;
  }

  .footer{
    padding-top:52px;
  }
}

@media(max-width:600px){
  .prefooter{
    margin-top:40px;
    padding:46px 0;
  }

  .prefooter h2{
    font-size:30px;
  }
}
/* =========================================================
   BOTONES VOLVER EN PAGINA PRODUCTO
   ========================================================= */

.product-back-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.product-back-btn{
  flex:1;
  min-width:180px;
}

.btn.secondary-catalog{
  background:var(--azul-noche);
  color:#fff;
  border:1px solid rgba(6,26,51,.14);
}

.btn.secondary-catalog:hover{
  background:var(--azul-mar);
}

@media(max-width:600px){
  .product-back-actions{
    flex-direction:column;
  }

  .product-back-btn{
    width:100%;
    min-width:100%;
  }
}
/* GARPER - Ajuste comercial, categorias y logo navbar */

.garper-brand-image-final{
  display:flex;
  align-items:center;
}

.garper-logo-crop-final{
  width:154px;
  height:72px;
  display:block;
  overflow:hidden;
  border-radius:16px;
  background:#061A33;
  box-shadow:0 12px 30px rgba(6,26,51,.16);
  position:relative;
}

.garper-logo-crop-final img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  transform:scale(1.18);
  transform-origin:center 30%;
}

.garper-commercial-hero{
  background:
    radial-gradient(circle at 80% 20%, rgba(243,210,122,.26), transparent 30%),
    linear-gradient(135deg,#3A2117,#7A4328 48%,#14324A);
}

.commercial-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:34px;
  align-items:start;
}

.commercial-copy h2{
  color:#3A2117;
  font-size:clamp(32px,4vw,48px);
  margin:8px 0 16px;
}

.commercial-copy p{
  color:var(--muted);
  max-width:640px;
}

.commercial-benefits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:24px;
}

.commercial-benefits div{
  background:#fffaf1;
  border-left:5px solid var(--dorado);
  border-radius:18px;
  padding:18px;
  box-shadow:0 14px 34px rgba(122,67,40,.10);
}

.commercial-benefits strong{
  display:block;
  color:#3A2117;
  margin-bottom:6px;
}

.commercial-benefits span{
  color:var(--muted);
  font-size:14px;
}

.commercial-form-card{
  background:#fffaf1;
  border:1px solid rgba(184,107,50,.14);
  border-radius:28px;
  padding:28px;
  box-shadow:0 18px 45px rgba(122,67,40,.13);
}

.client-request-form{
  display:grid;
  gap:12px;
}

.client-request-form label{
  font-weight:900;
  color:#3A2117;
}

.form-alert{
  padding:14px 16px;
  border-radius:16px;
  font-weight:800;
  margin-bottom:18px;
}

.success-alert{
  background:#e9f8ed;
  color:#235c36;
}

.error-alert{
  background:#ffe8e8;
  color:#9B2F2F;
}

.garper-nav-links-final{
  gap:20px;
}

@media(max-width:900px){
  .garper-logo-crop-final{
    width:126px;
    height:60px;
  }

  .commercial-layout{
    grid-template-columns:1fr;
  }

  .commercial-benefits{
    grid-template-columns:1fr;
  }

  .commercial-form-card{
    padding:22px;
  }
}
/* =========================================================
   GARPER - Contacto mejorado
   Pegar al final de /assets/css/styles.css o cargar como CSS extra.
   ========================================================= */

.contact-hero-new{
  background:
    radial-gradient(circle at 82% 18%, rgba(243,210,122,.28), transparent 30%),
    linear-gradient(135deg,#3A2117,#7A4328 48%,#14324A);
}

.contact-hero-new .container{
  padding-top:86px !important;
  padding-bottom:86px !important;
}

.contact-hero-new h1{
  max-width:860px;
}

.contact-hero-new p{
  max-width:780px;
  color:#FFEED0;
}

.contact-new-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:34px;
  align-items:stretch;
  padding-bottom:30px;
}

.contact-new-main,
.contact-new-card,
.contact-service-card,
.delivery-note-box{
  background:#fffaf1;
  border:1px solid rgba(184,107,50,.14);
  box-shadow:0 18px 45px rgba(122,67,40,.12);
}

.contact-new-main{
  border-radius:32px;
  padding:36px;
}

.contact-new-main h2{
  color:#3A2117;
  font-size:clamp(34px,4vw,52px);
  margin:8px 0 16px;
}

.contact-new-main p{
  color:var(--muted);
  max-width:760px;
}

.contact-highlight{
  margin-top:24px;
  background:linear-gradient(135deg,#FFF0CF,#fffaf1);
  border-left:6px solid var(--dorado);
  border-radius:20px;
  padding:18px 20px;
}

.contact-highlight strong{
  display:block;
  color:#3A2117;
  font-size:18px;
  margin-bottom:4px;
}

.contact-highlight span{
  color:var(--muted);
  font-weight:700;
}

.contact-action-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:26px;
}

.contact-secondary-btn{
  background:#3A2117;
  color:#fff;
}

.contact-secondary-btn:hover{
  background:#7A4328;
}

.contact-new-card{
  border-radius:32px;
  padding:32px;
}

.contact-new-card h3{
  color:#3A2117;
  font-size:34px;
  margin-bottom:20px;
}

.contact-info-line{
  padding:17px 0;
  border-bottom:1px solid rgba(122,67,40,.12);
}

.contact-info-line:last-child{
  border-bottom:0;
}

.contact-info-line strong{
  display:block;
  color:#7A4328;
  font-size:16px;
  margin-bottom:5px;
}

.contact-info-line span{
  color:var(--muted);
  line-height:1.55;
}

.contact-service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  padding-top:30px;
}

.contact-service-card{
  border-radius:30px;
  padding:30px;
  min-height:260px;
  display:flex;
  flex-direction:column;
}

.contact-service-card.featured{
  background:
    radial-gradient(circle at top right, rgba(243,210,122,.28), transparent 34%),
    #fffaf1;
  border-color:rgba(217,164,65,.35);
}

.contact-icon{
  width:56px;
  height:56px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:#FFF0CF;
  font-size:27px;
  margin-bottom:18px;
}

.contact-service-card h2{
  color:#3A2117;
  font-size:34px;
  margin-bottom:10px;
}

.contact-service-card p{
  color:var(--muted);
  margin-bottom:22px;
}

.contact-service-card .btn{
  margin-top:auto;
  width:max-content;
}

.delivery-note-box{
  border-radius:32px;
  padding:34px 38px;
  margin-top:10px;
  margin-bottom:75px;
  display:flex;
  justify-content:space-between;
  gap:28px;
  align-items:center;
  background:
    radial-gradient(circle at top left, rgba(247,217,155,.42), transparent 32%),
    #fffaf1;
}

.delivery-note-box h2{
  color:#3A2117;
  font-size:clamp(30px,3vw,42px);
  margin:8px 0 10px;
}

.delivery-note-box p{
  color:var(--muted);
  max-width:760px;
  margin:0;
}

.delivery-note-box .btn{
  white-space:nowrap;
}

@media(max-width:900px){
  .contact-hero-new .container{
    padding-top:58px !important;
    padding-bottom:58px !important;
  }

  .contact-new-layout,
  .contact-service-grid{
    grid-template-columns:1fr;
  }

  .contact-new-main,
  .contact-new-card,
  .contact-service-card{
    padding:24px;
    border-radius:24px;
  }

  .contact-action-row{
    flex-direction:column;
  }

  .contact-action-row .btn{
    width:100%;
  }

  .contact-service-card{
    min-height:auto;
  }

  .contact-service-card .btn{
    width:100%;
  }

  .delivery-note-box{
    flex-direction:column;
    align-items:flex-start;
    padding:26px;
    border-radius:24px;
    margin-bottom:52px;
  }

  .delivery-note-box .btn{
    width:100%;
  }
}

@media(max-width:600px){
  .contact-new-main h2{
    font-size:31px;
  }

  .contact-new-card h3,
  .contact-service-card h2{
    font-size:29px;
  }
}
/* =========================================================
   GARPER - Logo navbar mejorado + enfoque comercial + popup
   Pegar al final de /assets/css/styles.css o cargar como CSS extra.
   ========================================================= */

/* Logo navbar: se reconstruye visualmente para no cortar estrellas */
.garper-logo-real-final{
  text-decoration:none;
  display:flex;
  align-items:center;
}

.garper-logo-mark-final{
  width:154px;
  height:72px;
  border-radius:16px;
  background:
    radial-gradient(circle at 30% 18%, rgba(243,210,122,.09), transparent 30%),
    linear-gradient(135deg,#061A33,#071A30);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(6,26,51,.18), inset 0 0 0 1px rgba(243,210,122,.24);
}

.garper-logo-word-final{
  font-family:Georgia,'Times New Roman',serif;
  color:#F3D27A;
  font-size:31px;
  letter-spacing:-1.5px;
  line-height:1;
  text-shadow:0 2px 8px rgba(0,0,0,.38);
  margin-top:8px;
}

.garper-logo-stars-final{
  position:absolute;
  top:9px;
  left:19px;
  width:58px;
  height:26px;
}

.garper-logo-stars-final i{
  position:absolute;
  display:block;
  background:linear-gradient(135deg,#FFF1A8,#D9A441);
  clip-path:polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
  filter:drop-shadow(0 0 5px rgba(243,210,122,.72));
}

.garper-logo-stars-final i:nth-child(1){
  width:10px;
  height:10px;
  top:0;
  left:0;
}

.garper-logo-stars-final i:nth-child(2){
  width:7px;
  height:7px;
  top:4px;
  left:17px;
}

.garper-logo-stars-final i:nth-child(3){
  width:8px;
  height:8px;
  top:15px;
  left:29px;
}

.garper-logo-stars-final i:nth-child(4){
  width:7px;
  height:7px;
  top:9px;
  left:44px;
}

/* Quita estilos anteriores del logo recortado si quedaron cargados */
.garper-logo-crop-final{
  display:none !important;
}

/* Enfoque más comercial */
.garper-topbar-final{
  background:linear-gradient(90deg,#3A2117,#7A4328);
  color:#FFE7A8;
}

.hero .eyebrow::after{
  content:"";
}

.hero-copy .family-text,
.family-text{
  display:none !important;
}

/* Bloques comerciales reutilizables */
.commercial-mini-strip{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:24px;
}

.commercial-mini-strip span{
  background:rgba(255,244,221,.12);
  border:1px solid rgba(255,231,168,.30);
  color:#FFF4DD;
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
}

/* Popup promociones */
.promo-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,10,7,.58);
  backdrop-filter:blur(6px);
  z-index:30000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.promo-popup-overlay.is-open{
  display:flex;
}

.promo-popup{
  width:min(520px,100%);
  background:#fffaf1;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.38);
  border:1px solid rgba(243,210,122,.34);
  position:relative;
  animation:promoEnter .25s ease;
}

@keyframes promoEnter{
  from{opacity:0; transform:translateY(18px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.promo-popup-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:rgba(6,26,51,.82);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

.promo-popup-image{
  width:100%;
  max-height:320px;
  object-fit:cover;
  background:#fff0cf;
}

.promo-popup-body{
  padding:28px;
}

.promo-popup-body span{
  display:inline-flex;
  color:#7A4328;
  background:#FFF0CF;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:12px;
}

.promo-popup-body h2{
  color:#3A2117;
  font-size:clamp(28px,4vw,42px);
  margin:0 0 10px;
}

.promo-popup-body p{
  color:#766A5B;
  margin-bottom:22px;
}

.promo-popup-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.promo-popup-actions a{
  flex:1;
  min-width:160px;
}

@media(max-width:900px){
  .garper-logo-mark-final{
    width:126px;
    height:60px;
  }

  .garper-logo-word-final{
    font-size:26px;
  }

  .garper-logo-stars-final{
    transform:scale(.82);
    transform-origin:left top;
    top:8px;
    left:16px;
  }
}

@media(max-width:600px){
  .promo-popup-body{
    padding:22px;
  }

  .promo-popup-image{
    max-height:240px;
  }

  .promo-popup-actions{
    flex-direction:column;
  }

  .promo-popup-actions a{
    width:100%;
  }
}
/* =========================================================
   FIX HOME - Secciones más compactas y normales
   Categorías + Productos destacados
   ========================================================= */

/* Reducir espacios gigantes entre secciones */
.section{
  padding:58px 0;
}

/* Títulos de sección más controlados */
.section-title{
  margin-bottom:28px;
  align-items:center;
}

.section-title h2{
  font-size:clamp(34px, 3vw, 48px);
  line-height:1.05;
}

.section-title span{
  font-size:13px;
  letter-spacing:2px;
}

/* Categorías del home más pequeñas */
.contact-grid{
  gap:22px;
}

.contact-card{
  padding:28px;
  min-height:190px;
  border-radius:24px;
}

.contact-card h2{
  font-size:clamp(30px, 2.5vw, 42px);
  line-height:1;
  margin-bottom:14px;
}

.contact-card p{
  font-size:15px;
  line-height:1.55;
  margin-bottom:18px;
}

.contact-card .mini-btn{
  padding:9px 14px;
  font-size:13px;
}

/* Productos destacados: tarjetas más normales */
.product-grid.catalog-grid{
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:22px;
}

.product-card.catalog-card{
  border-radius:22px;
  overflow:hidden;
}

/* Imágenes menos gigantes */
.product-card.catalog-card img{
  height:260px;
  aspect-ratio:auto;
  object-fit:contain;
  padding:20px;
  background:#fff;
}

/* Cuerpo de tarjeta más compacto */
.catalog-card-body.product-body{
  padding:18px;
}

.catalog-card-body h3{
  font-size:20px;
  min-height:48px;
}

.catalog-card-body p{
  font-size:14px;
  min-height:54px;
}

.catalog-product-footer strong{
  font-size:19px;
}

/* Botones del producto más compactos */
.catalog-add-form{
  gap:9px;
  margin-top:12px;
}

.catalog-add-form .qty-control{
  height:40px;
}

.catalog-add-form .qty-control button{
  height:40px;
  width:40px;
  min-width:40px;
}

.catalog-add-form .qty-control input{
  height:40px;
}

.catalog-cart-btn,
.catalog-buy-btn{
  min-height:40px;
  font-size:12px;
  padding:9px 10px;
}

/* Quitar exceso de aire en el home */
.home .section,
body .section.container{
  scroll-margin-top:100px;
}

/* Desktop grande */
@media(min-width:1200px){
  .section{
    padding:54px 0;
  }

  .product-card.catalog-card img{
    height:250px;
  }
}

/* Tablet */
@media(max-width:1100px){
  .product-grid.catalog-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .product-card.catalog-card img{
    height:230px;
  }

  .contact-card{
    padding:24px;
  }
}

/* Móvil */
@media(max-width:700px){
  .section{
    padding:42px 0;
  }

  .section-title{
    margin-bottom:22px;
    gap:14px;
  }

  .section-title h2{
    font-size:32px;
  }

  .contact-grid{
    grid-template-columns:1fr;
    gap:16px;
  }

  .contact-card{
    padding:22px;
    min-height:auto;
    border-radius:22px;
  }

  .contact-card h2{
    font-size:30px;
  }

  .contact-card p{
    font-size:14px;
  }

  .product-grid.catalog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px;
  }

  .product-card.catalog-card img{
    height:170px;
    padding:12px;
  }

  .catalog-card-body.product-body{
    padding:13px;
  }

  .catalog-card-body h3{
    font-size:16px;
    min-height:42px;
  }

  .catalog-card-body p{
    font-size:12px;
    min-height:48px;
  }

  .catalog-product-footer strong{
    font-size:17px;
  }
}

/* Teléfonos muy pequeños */
@media(max-width:390px){
  .product-card.catalog-card img{
    height:150px;
  }

  .section-title h2{
    font-size:29px;
  }
}/* =========================================================
   FIX HOME - Ancho coherente de secciones
   Categorías y productos destacados más contenidos
   ========================================================= */

/* Contenedor general del home más angosto y consistente */
.home-compact-container,
.section > .container,
.section.container{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

/* Sección categorías: que no use todo el ancho de pantalla */
.contact-grid{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

/* Título de categorías y productos destacados centrado al mismo ancho */
.section-title{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}

/* Productos destacados: mismo ancho que Garper Comercial */
.product-grid.catalog-grid{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}

/* Evita que las tarjetas se estiren demasiado */
.contact-card,
.product-card.catalog-card{
  width:100%;
}

/* Ajuste de imágenes para que no parezcan gigantes */
.product-card.catalog-card img{
  height:230px;
  object-fit:contain;
  padding:18px;
}

/* Reducir aire vertical excesivo entre categorías y productos */
.section{
  padding-top:52px;
  padding-bottom:52px;
}

/* Si hay secciones del index pegadas al borde por ser .section container */
section.section.container{
  width:min(1180px, calc(100% - 40px));
}

/* Web mediana */
@media(max-width:1200px){
  .section > .container,
  .section.container,
  .section-title,
  .contact-grid,
  .product-grid.catalog-grid{
    max-width:1060px;
  }
}

/* Tablet */
@media(max-width:1000px){
  .contact-grid{
    grid-template-columns:1fr;
  }

  .product-grid.catalog-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

/* Teléfono */
@media(max-width:700px){
  .section > .container,
  .section.container,
  .section-title,
  .contact-grid,
  .product-grid.catalog-grid,
  section.section.container{
    width:min(100% - 24px, 1180px);
    max-width:100%;
  }

  .section{
    padding-top:38px;
    padding-bottom:38px;
  }

  .product-grid.catalog-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px;
  }

  .product-card.catalog-card img{
    height:160px;
    padding:12px;
  }

  .contact-card{
    padding:22px;
  }
}

/*######################################*/
.garper-brand-label{
  width:178px;
  height:62px;
  border-radius:18px;
  background:linear-gradient(135deg,#3A2117,#7A4328);
  color:#F3D27A;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(58,33,23,.18);
  border:1px solid rgba(243,210,122,.35);
}

.garper-brand-label .brand-main{
  font-family:Georgia,'Times New Roman',serif;
  font-size:30px;
  line-height:1;
  letter-spacing:-1px;
}

.garper-brand-label .brand-sub{
  font-size:9px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#FFE7A8;
  margin-top:5px;
}

@media(max-width:900px){
  .garper-brand-label{
    width:138px;
    height:54px;
  }

  .garper-brand-label .brand-main{
    font-size:24px;
  }

  .garper-brand-label .brand-sub{
    font-size:7px;
  }
}
/* =========================================================
   LOGO FOOTER IGUAL AL NAVBAR
   ========================================================= */

.footer-brand-logo{
  width:160px;
  height:66px;
  border-radius:16px;
  background:linear-gradient(135deg,#3A2117,#7A4328);
  color:#F3D27A;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  border:1px solid rgba(243,210,122,.35);
  margin-bottom:18px;
}

.footer-logo-main{
  font-family:Georgia,'Times New Roman',serif;
  font-size:31px;
  line-height:1;
  letter-spacing:-1px;
  color:#F3D27A;
}

.footer-logo-sub{
  font-size:9px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#FFE7A8;
  margin-top:5px;
}

.footer-brand-logo:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
}

@media(max-width:900px){
  .footer-brand-logo{
    width:145px;
    height:60px;
  }

  .footer-logo-main{
    font-size:27px;
  }

  .footer-logo-sub{
    font-size:8px;
  }
}
/* =========================================================
   FOOTER - Logo igual al navbar y centrado
   ========================================================= */

.footer .footer-grid > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.footer-brand-logo.garper-brand-label{
  width:178px;
  height:62px;
  border-radius:18px;
  background:linear-gradient(135deg,#3A2117,#7A4328);
  color:#F3D27A;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
  border:1px solid rgba(243,210,122,.35);
  margin:0 auto 18px;
}

.footer-brand-logo .brand-main{
  font-family:Georgia,'Times New Roman',serif;
  font-size:30px;
  line-height:1;
  letter-spacing:-1px;
  color:#F3D27A;
}

.footer-brand-logo .brand-sub{
  font-size:9px;
  font-weight:900;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:#FFE7A8;
  margin-top:5px;
}

.footer .footer-grid > div:first-child p{
  max-width:290px;
  margin-left:auto;
  margin-right:auto;
}

/* Eliminar estilos antiguos que puedan estar interfiriendo */
.footer-garper-logo{
  display:none !important;
}

@media(max-width:900px){
  .footer .footer-grid > div:first-child{
    align-items:flex-start;
    text-align:left;
  }

  .footer-brand-logo.garper-brand-label{
    margin-left:0;
    margin-right:0;
    width:160px;
    height:58px;
  }

  .footer-brand-logo .brand-main{
    font-size:27px;
  }

  .footer-brand-logo .brand-sub{
    font-size:8px;
  }
}

/* =========================================================
   GARPER - TEMA FINAL AZUL METALICO SUAVE
   Cliente: azul metalico, limpio, comercial y no invasivo.
   Este bloque debe quedar al FINAL del archivo para reemplazar
   la paleta cafe anterior sin romper la estructura.
   ========================================================= */

:root{
  --azul-noche:#1F3550;
  --azul-mar:#3F5E7A;
  --azul-metalico:#3F5E7A;
  --azul-profundo:#1F3550;
  --azul-acero:#6D879E;
  --azul-niebla:#DCE6EE;

  --dorado:#D8B15A;
  --dorado-suave:#E8C97A;

  --crema:#F7F1E4;
  --harina:#FFFDF8;
  --blanco-calido:#FFFDF8;

  --madera:#445A70;
  --caramelo:#3F5E7A;
  --chocolate:#1F3550;

  --verde-sur:#4F7D68;
  --verde-musgo:#6F8A5F;

  --texto:#2F241C;
  --muted:#5B5148;

  --shadow:0 18px 45px rgba(31,53,80,.11);
  --radius:24px;
}

/* Base general */
body{
  color:var(--texto) !important;
  background:
    radial-gradient(circle at top left, rgba(220,230,238,.45), transparent 32%),
    linear-gradient(180deg,#FBF8F1 0%,#F7F1E4 55%,#EFE7D8 100%) !important;
}

/* Topbar y navbar */
.topbar,
.garper-topbar-final{
  background:linear-gradient(90deg,#1F3550,#3F5E7A) !important;
  color:#F7E6B2 !important;
}

.site-header,
.garper-header-final{
  background:rgba(255,253,248,.96) !important;
  border-bottom:1px solid rgba(63,94,122,.14) !important;
  box-shadow:0 10px 28px rgba(31,53,80,.08) !important;
}

.nav-links a,
.garper-nav-links-final a{
  color:#1F3550 !important;
}

.nav-links a.active,
.nav-links a:hover,
.garper-nav-links-final a.active,
.garper-nav-links-final a:hover{
  color:#D8B15A !important;
}

/* Logo navbar/footer: azul metalico coherente */
.garper-brand-label,
.footer-brand-logo.garper-brand-label,
.garper-logo-mark-final,
.garper-logo-final,
.footer-garper-logo,
.garper-logo-crop-final{
  background:
    radial-gradient(circle at 25% 16%, rgba(232,201,122,.16), transparent 30%),
    linear-gradient(135deg,#1F3550 0%,#3F5E7A 55%,#6D879E 100%) !important;
  border:1px solid rgba(232,201,122,.34) !important;
  box-shadow:0 12px 28px rgba(31,53,80,.16) !important;
}

.garper-brand-label .brand-main,
.footer-brand-logo .brand-main,
.garper-logo-word-final,
.garper-logo-name-final,
.footer-logo-main{
  color:#F7E6B2 !important;
}

.garper-brand-label .brand-sub,
.footer-brand-logo .brand-sub,
.footer-logo-sub{
  color:#FFF3C8 !important;
}

/* Admin y carrito */
.garper-admin-final,
.admin-nav-btn{
  background:linear-gradient(135deg,#D8B15A,#E8C97A) !important;
  color:#1F3550 !important;
  box-shadow:0 10px 24px rgba(216,177,90,.24) !important;
}

.nav-cart,
.cart-link,
.garper-cart-final{
  background:linear-gradient(135deg,#1F3550,#3F5E7A) !important;
  color:#fff !important;
}

.cart-count,
.cart-link strong,
.garper-cart-final strong{
  background:#D8B15A !important;
  color:#1F3550 !important;
}

/* Hero y page hero: azul metalico no invasivo */
.hero{
  background:
    radial-gradient(circle at 80% 16%, rgba(232,201,122,.19), transparent 30%),
    radial-gradient(circle at 12% 82%, rgba(220,230,238,.22), transparent 34%),
    linear-gradient(120deg,#1F3550 0%,#3F5E7A 48%,#6D879E 100%) !important;
  color:#FFFDF8 !important;
}

.page-hero,
.contact-hero-new,
.garper-commercial-hero{
  background:
    radial-gradient(circle at 85% 20%, rgba(232,201,122,.22), transparent 30%),
    linear-gradient(125deg,#1F3550 0%,#3F5E7A 50%,#6D879E 100%) !important;
  color:#FFFDF8 !important;
}

.hero-copy p,
.page-hero p,
.contact-hero-new p{
  color:#F8EFE0 !important;
}

.eyebrow{
  color:#F7E6B2 !important;
}

.eyebrow.dark,
.section-title span,
.product-body span{
  color:#3F5E7A !important;
}

/* Botones */
.btn.primary,
.catalog-cart-btn,
.login-form button,
.btn-primary{
  background:linear-gradient(135deg,#D8B15A,#E8C97A) !important;
  color:#1F3550 !important;
  box-shadow:0 14px 32px rgba(216,177,90,.24) !important;
}

.btn.secondary,
.btn.ghost,
.btn.secondary-catalog,
.contact-secondary-btn{
  border:1px solid rgba(63,94,122,.24) !important;
}

.btn.secondary{
  color:#FFFDF8 !important;
  background:rgba(255,255,255,.08) !important;
}

.btn.ghost,
.btn.secondary-catalog{
  background:#FFFDF8 !important;
  color:#1F3550 !important;
}

.catalog-buy-btn{
  background:linear-gradient(135deg,#3F5E7A,#1F3550) !important;
  color:#fff !important;
  box-shadow:0 12px 26px rgba(31,53,80,.18) !important;
}

.catalog-buy-btn:hover{
  background:linear-gradient(135deg,#31506B,#1A2C44) !important;
}

/* Tarjetas y secciones */
.product-card,
.contact-card,
.legal-page,
.cart-summary,
.checkout-form,
.empty-cart,
.contact-new-main,
.contact-new-card,
.contact-service-card,
.delivery-note-box,
.commercial-form-card,
.commercial-benefits div,
.story-list div{
  background:#FFFDF8 !important;
  border:1px solid rgba(63,94,122,.10) !important;
  box-shadow:0 16px 38px rgba(31,53,80,.09) !important;
}

.product-body h3,
.contact-card h2,
.legal-page h1,
.legal-page h2,
.story h2,
.cart-summary h2,
.checkout-form h2,
.cart-info h3,
.detail-info h1,
.detail-info h2,
.commercial-copy h2,
.contact-new-main h2,
.contact-new-card h3,
.contact-service-card h2,
.delivery-note-box h2{
  color:#1F3550 !important;
}

.product-body p,
.story p,
.legal-page p,
.detail-info p,
.contact-new-main p,
.contact-info-line span,
.contact-service-card p,
.delivery-note-box p,
.commercial-copy p,
.commercial-benefits span{
  color:#5B5148 !important;
}

.product-footer strong,
.detail-price{
  color:#3F5E7A !important;
}

.mini-btn{
  background:linear-gradient(135deg,#1F3550,#3F5E7A) !important;
  color:#fff !important;
}

/* Formularios y cantidades */
.catalog-filter input,
.catalog-filter select,
input,
select,
textarea{
  background:#FFFDF8 !important;
  color:#2F241C !important;
  border:1px solid rgba(63,94,122,.16) !important;
}

.catalog-filter input:focus,
.catalog-filter select:focus,
input:focus,
select:focus,
textarea:focus{
  border-color:#3F5E7A !important;
  box-shadow:0 0 0 4px rgba(63,94,122,.14) !important;
}

.qty-control{
  background:#FFFDF8 !important;
  border:1px solid rgba(63,94,122,.16) !important;
}

.qty-control button{
  background:#DCE6EE !important;
  color:#1F3550 !important;
}

.qty-control button:hover{
  background:#C6D4E0 !important;
}

/* Story / comercial */
.story{
  background:
    radial-gradient(circle at 20% 20%, rgba(220,230,238,.42), transparent 32%),
    linear-gradient(135deg,#FBF8F1,#F0E8D9) !important;
}

.story-list div{
  border-left:6px solid #3F5E7A !important;
}

.story-list strong{
  color:#1F3550 !important;
}

/* Prefooter y footer */
.prefooter{
  background:
    radial-gradient(circle at 15% 10%, rgba(232,201,122,.12), transparent 28%),
    linear-gradient(135deg,#1F3550,#3F5E7A) !important;
}

.prefooter h2,
.prefooter-card strong{
  color:#F7E6B2 !important;
}

.prefooter p,
.prefooter span{
  color:#F8EFE0 !important;
}

.prefooter-card{
  border:1px solid rgba(232,201,122,.24) !important;
  background:rgba(255,255,255,.07) !important;
}

.footer{
  background:linear-gradient(180deg,#17283D 0%,#0E1D2F 100%) !important;
  color:#F7F1E4 !important;
}

.footer h3{
  color:#E8C97A !important;
}

.footer a{
  color:#F3EEE4 !important;
}

.footer a:hover{
  color:#E8C97A !important;
}

.footer p,
.credits{
  color:#DCE6EE !important;
}

.credits a{
  color:#E8C97A !important;
}

/* Chat / ayuda */
.garper-help-button{
  background:linear-gradient(135deg,#3F5E7A,#1F3550) !important;
  box-shadow:0 18px 42px rgba(31,53,80,.28) !important;
}

.garper-help-header,
.chatbot-header{
  background:linear-gradient(135deg,#1F3550,#3F5E7A) !important;
}

.garper-help-question{
  border-color:rgba(63,94,122,.20) !important;
  color:#1F3550 !important;
}

.garper-help-question:hover{
  background:#DCE6EE !important;
}

/* Popups y toast */
.catalog-toast,
.promo-popup-close{
  background:linear-gradient(135deg,#1F3550,#3F5E7A) !important;
}

.promo-popup{
  background:#FFFDF8 !important;
  border-color:rgba(63,94,122,.14) !important;
}

.promo-popup-body span{
  background:#DCE6EE !important;
  color:#1F3550 !important;
}

.promo-popup-body h2{
  color:#1F3550 !important;
}

.promo-popup-body p{
  color:#5B5148 !important;
}

/* Footer logo centrado si existe */
.footer .footer-grid > div:first-child{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.footer .footer-grid > div:first-child p{
  max-width:310px;
  margin-left:auto;
  margin-right:auto;
}

/* Mobile */
@media(max-width:900px){
  .hero{
    background:
      radial-gradient(circle at 70% 20%, rgba(232,201,122,.18), transparent 34%),
      linear-gradient(160deg,#1F3550 0%,#3F5E7A 58%,#6D879E 100%) !important;
  }

  .hero-logo-mobile,
  .hero-card{
    background:rgba(255,255,255,.10) !important;
    border:1px solid rgba(232,201,122,.24) !important;
  }

  .garper-nav-links-final{
    background:#FFFDF8 !important;
  }

  .footer .footer-grid > div:first-child{
    align-items:flex-start;
    text-align:left;
  }
}
/* =========================================================
   GARPER - Popup promocional
   Pegar al final de /public_html/assets/css/styles.css
   o cargar como /assets/css/promo-popup.css
   ========================================================= */

.promo-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,24,38,.58);
  backdrop-filter:blur(7px);
  z-index:30000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.promo-popup-overlay.is-open{
  display:flex;
}

body.promo-popup-open{
  overflow:hidden;
}

.promo-popup{
  width:min(540px,100%);
  background:#fffdf8;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.36);
  border:1px solid rgba(216,177,90,.35);
  position:relative;
  animation:promoEnter .25s ease;
}

@keyframes promoEnter{
  from{opacity:0; transform:translateY(18px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.promo-popup-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:rgba(31,53,80,.88);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

.promo-popup-image{
  width:100%;
  max-height:330px;
  object-fit:cover;
  background:#EEF4F8;
}

.promo-popup-body{
  padding:28px;
}

.promo-popup-body span{
  display:inline-flex;
  color:#1F3550;
  background:#EEF4F8;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:12px;
}

.promo-popup-body h2{
  color:#1F3550;
  font-size:clamp(28px,4vw,42px);
  margin:0 0 10px;
}

.promo-popup-body p{
  color:#5B5148;
  margin-bottom:22px;
  line-height:1.65;
}

.promo-popup-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.promo-popup-actions a,
.promo-popup-actions button{
  flex:1;
  min-width:160px;
}

@media(max-width:600px){
  .promo-popup-body{
    padding:22px;
  }

  .promo-popup-image{
    max-height:240px;
  }

  .promo-popup-actions{
    flex-direction:column;
  }

  .promo-popup-actions a,
  .promo-popup-actions button{
    width:100%;
  }
}
/* =========================================================
   GARPER - Popup promocional corregido
   Imagen completa + visualizacion limpia
   Pegar al final de /public_html/assets/css/styles.css
   ========================================================= */

.promo-popup-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,24,38,.58);
  backdrop-filter:blur(7px);
  z-index:30000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.promo-popup-overlay.is-open{
  display:flex;
}

body.promo-popup-open{
  overflow:hidden;
}

.promo-popup{
  width:min(560px,100%);
  max-height:92vh;
  background:#fffdf8;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.36);
  border:1px solid rgba(216,177,90,.35);
  position:relative;
  animation:promoEnter .25s ease;
  display:flex;
  flex-direction:column;
}

@keyframes promoEnter{
  from{opacity:0; transform:translateY(18px) scale(.98);}
  to{opacity:1; transform:translateY(0) scale(1);}
}

.promo-popup-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:0;
  border-radius:999px;
  background:rgba(31,53,80,.88);
  color:#fff;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}

/* Contenedor visual para que la promo NO se corte */
.promo-popup-image{
  width:100%;
  height:auto !important;
  max-height:52vh;
  object-fit:contain !important;
  object-position:center center;
  background:#061A33;
  display:block;
}

/* Si la imagen es muy alta, el contenido puede desplazarse */
.promo-popup-body{
  padding:26px 28px 28px;
  overflow:auto;
}

.promo-popup-body span{
  display:inline-flex;
  color:#1F3550;
  background:#EEF4F8;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:12px;
}

.promo-popup-body h2{
  color:#1F3550;
  font-size:clamp(28px,4vw,42px);
  margin:0 0 10px;
}

.promo-popup-body p{
  color:#5B5148;
  margin-bottom:22px;
  line-height:1.65;
}

.promo-popup-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.promo-popup-actions a,
.promo-popup-actions button{
  flex:1;
  min-width:160px;
}

@media(max-width:600px){
  .promo-popup{
    width:min(94vw,560px);
    max-height:90vh;
    border-radius:24px;
  }

  .promo-popup-image{
    max-height:46vh;
  }

  .promo-popup-body{
    padding:20px;
  }

  .promo-popup-body h2{
    font-size:28px;
  }

  .promo-popup-actions{
    flex-direction:column;
  }

  .promo-popup-actions a,
  .promo-popup-actions button{
    width:100%;
  }
}
/* =========================================================
   GARPER - IDENTIDAD AZUL FRANCIA / AZUL ELÉCTRICO
   Aplicar al final de /public_html/assets/css/styles.css
   Esto sobreescribe la paleta azul metálica anterior.
   ========================================================= */

:root{
  --azul-electrico:#061BFF;
  --azul-francia:#002CFF;
  --azul-rey:#003BBA;
  --azul-profundo:#00124A;
  --azul-noche:#000B2E;
  --azul-card:#081A5A;
  --azul-soft:#EEF3FF;

  --dorado:#F3C45B;
  --dorado-suave:#FFE08A;

  --blanco:#FFFFFF;
  --marfil:#FFFDF7;
  --crema:#FFF7E8;

  --texto:#111827;
  --texto-suave:#5B6472;

  --shadow-blue:0 24px 70px rgba(0,44,255,.20);
  --shadow-card:0 18px 45px rgba(0,18,74,.12);
}

/* Fondo general del sitio */
html,
body{
  background:
    radial-gradient(circle at top left, rgba(6,27,255,.08), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f3f6ff 42%,#fff7e8 100%) !important;
  color:var(--texto) !important;
}

/* Barra superior */
.garper-topbar-final{
  background:linear-gradient(90deg,var(--azul-noche),var(--azul-rey),var(--azul-electrico)) !important;
  color:#ffffff !important;
  border-bottom:1px solid rgba(255,255,255,.16);
}

.garper-topbar-final span{
  color:#ffffff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}

/* Navbar */
.garper-header-final{
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(0,44,255,.10) !important;
  box-shadow:0 10px 30px rgba(0,18,74,.10) !important;
}

.garper-nav-links-final a{
  color:var(--azul-noche) !important;
}

.garper-nav-links-final a:hover,
.garper-nav-links-final a.active{
  color:var(--azul-electrico) !important;
}

/* Logo tipo etiqueta actual, adaptado a azul eléctrico */
.garper-brand-label,
.footer-brand-logo.garper-brand-label{
  background:linear-gradient(135deg,var(--azul-noche),var(--azul-rey),var(--azul-electrico)) !important;
  border:1px solid rgba(255,224,138,.48) !important;
  box-shadow:0 14px 34px rgba(0,44,255,.22) !important;
}

.garper-brand-label .brand-main,
.footer-brand-logo .brand-main{
  color:#ffffff !important;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
}

.garper-brand-label .brand-sub,
.footer-brand-logo .brand-sub{
  color:var(--dorado-suave) !important;
}

/* Botón admin y acentos dorados */
.garper-admin-final,
.btn.primary,
button.btn.primary,
a.btn.primary{
  background:linear-gradient(135deg,var(--dorado),var(--dorado-suave)) !important;
  color:var(--azul-noche) !important;
  border:none !important;
  box-shadow:0 14px 32px rgba(243,196,91,.26) !important;
}

.garper-admin-final:hover,
.btn.primary:hover{
  filter:saturate(1.08) brightness(1.02);
  transform:translateY(-1px);
}

/* Carrito */
.garper-cart-final{
  background:linear-gradient(135deg,var(--azul-noche),var(--azul-rey)) !important;
  color:#fff !important;
  box-shadow:0 14px 34px rgba(0,18,74,.22) !important;
}

.garper-cart-final strong{
  background:var(--dorado) !important;
  color:var(--azul-noche) !important;
}

/* HERO principal */
.hero{
  background:
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 12% 72%, rgba(243,196,91,.16), transparent 28%),
    linear-gradient(120deg,#00124A 0%,#002CFF 42%,#061BFF 68%,#4B63FF 100%) !important;
  color:#ffffff !important;
}

.hero-copy h1,
.hero h1{
  color:#ffffff !important;
  text-shadow:0 4px 22px rgba(0,0,0,.28);
}

.hero-copy p,
.hero p{
  color:rgba(255,255,255,.92) !important;
}

.hero .eyebrow,
.eyebrow{
  color:var(--dorado-suave) !important;
}

.eyebrow.dark{
  color:var(--azul-electrico) !important;
}

.hero-card{
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:0 30px 85px rgba(0,0,0,.28) !important;
}

.hero-card p{
  color:var(--dorado-suave) !important;
}

/* Botones secundarios */
.btn.secondary,
.btn.ghost,
.contact-secondary-btn,
.secondary-catalog{
  background:rgba(255,255,255,.10) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.38) !important;
}

.section .btn.ghost,
.legal-page .btn.ghost,
.cart-summary .btn.ghost{
  background:#ffffff !important;
  color:var(--azul-noche) !important;
  border:1px solid rgba(0,44,255,.16) !important;
}

/* Badges hero */
.hero-badges span,
.commercial-mini-strip span{
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  color:#ffffff !important;
}

/* Títulos generales */
.section-title h2,
.contact-card h2,
.product-body h3,
.story h2,
.legal-page h1,
.legal-page h2,
.contact-new-main h2,
.contact-new-card h3,
.contact-service-card h2,
.delivery-note-box h2{
  color:var(--azul-noche) !important;
}

.section-title span,
.product-body span,
.catalog-card-body span{
  color:var(--azul-electrico) !important;
}

/* Tarjetas */
.contact-card,
.product-card,
.cart-summary,
.checkout-form,
.empty-cart,
.contact-card,
.legal-page,
.commercial-form-card,
.commercial-benefits div,
.contact-new-main,
.contact-new-card,
.contact-service-card,
.delivery-note-box{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(0,44,255,.10) !important;
  box-shadow:var(--shadow-card) !important;
}

/* Cards de categorías */
.contact-card{
  border-top:4px solid var(--azul-electrico) !important;
}

.contact-card .mini-btn,
.mini-btn{
  background:linear-gradient(135deg,var(--azul-noche),var(--azul-rey)) !important;
  color:#fff !important;
}

/* Productos */
.product-card.catalog-card img,
.product-card img{
  background:#ffffff !important;
}

.product-footer strong,
.catalog-product-footer strong,
.detail-price{
  color:var(--azul-electrico) !important;
}

/* Comprar directo */
.catalog-buy-btn{
  background:linear-gradient(135deg,var(--azul-electrico),var(--azul-rey)) !important;
  color:#fff !important;
  box-shadow:0 12px 28px rgba(0,44,255,.20) !important;
}

/* Controles cantidad */
.qty-control{
  background:#F4F7FF !important;
  border:1px solid rgba(0,44,255,.14) !important;
}

.qty-control button{
  background:#E8EEFF !important;
  color:var(--azul-noche) !important;
}

.qty-control button:hover{
  background:var(--azul-electrico) !important;
  color:#fff !important;
}

/* Story / Garper comercial */
.story{
  background:
    radial-gradient(circle at 20% 20%, rgba(6,27,255,.08), transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#EEF3FF 52%,#FFF7E8 100%) !important;
}

.story-list div{
  background:#ffffff !important;
  border-left:6px solid var(--azul-electrico) !important;
  box-shadow:var(--shadow-card) !important;
}

.story-list strong{
  color:var(--azul-rey) !important;
}

/* Page hero internos */
.page-hero,
.contact-hero-new,
.garper-commercial-hero{
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(120deg,#00124A 0%,#002CFF 52%,#4B63FF 100%) !important;
  color:#ffffff !important;
}

.page-hero h1,
.page-hero p,
.contact-hero-new h1,
.contact-hero-new p{
  color:#ffffff !important;
}

/* Formularios */
input,
select,
textarea,
.catalog-filter input,
.catalog-filter select{
  background:#ffffff !important;
  border:1px solid rgba(0,44,255,.16) !important;
  color:var(--texto) !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--azul-electrico) !important;
  box-shadow:0 0 0 4px rgba(6,27,255,.12) !important;
}

/* Prefooter */
.prefooter{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 26%),
    linear-gradient(135deg,var(--azul-noche),var(--azul-rey),var(--azul-electrico)) !important;
  color:#ffffff !important;
}

.prefooter h2,
.prefooter-card strong{
  color:#ffffff !important;
}

.prefooter p,
.prefooter-card span{
  color:rgba(255,255,255,.88) !important;
}

.prefooter-card{
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.22) !important;
}

/* Footer */
.footer{
  background:linear-gradient(180deg,#00124A 0%,#000B2E 100%) !important;
  color:#ffffff !important;
}

.footer h3{
  color:var(--dorado-suave) !important;
}

.footer a,
.footer p,
.credits{
  color:rgba(255,255,255,.86) !important;
}

.footer a:hover,
.credits a{
  color:var(--dorado-suave) !important;
}

/* Chat ayuda */
.garper-help-button{
  background:linear-gradient(135deg,var(--azul-electrico),var(--azul-rey)) !important;
  color:#fff !important;
  box-shadow:0 18px 42px rgba(0,44,255,.30) !important;
}

.garper-help-header{
  background:linear-gradient(135deg,var(--azul-noche),var(--azul-electrico)) !important;
}

/* Popup promociones */
.promo-popup-close{
  background:rgba(0,18,74,.90) !important;
}

.promo-popup-body span{
  color:var(--azul-noche) !important;
  background:#E8EEFF !important;
}

.promo-popup-body h2{
  color:var(--azul-noche) !important;
}

.promo-popup-actions .btn.primary{
  background:linear-gradient(135deg,var(--dorado),var(--dorado-suave)) !important;
  color:var(--azul-noche) !important;
}

/* Responsive */
@media(max-width:900px){
  .hero{
    background:
      radial-gradient(circle at 72% 20%, rgba(255,255,255,.15), transparent 30%),
      linear-gradient(160deg,#00124A 0%,#002CFF 58%,#4B63FF 100%) !important;
  }

  .hero-logo-mobile,
  .hero-card{
    background:rgba(255,255,255,.13) !important;
    border:1px solid rgba(255,255,255,.25) !important;
  }
}
/* =========================================================
   GARPER - FIX AZUL ELÉCTRICO COMPLETO
   Header superior + logo navbar/footer + botones faltantes
   Pegar al final de /public_html/assets/css/styles.css
   También sirve para navbar-admin-patch.css si lo usas.
   ========================================================= */

:root{
  --garper-blue-electric:#061BFF;
  --garper-blue-france:#002CFF;
  --garper-blue-royal:#003BBA;
  --garper-blue-deep:#00124A;
  --garper-blue-night:#000B2E;
  --garper-blue-soft:#EEF3FF;
  --garper-gold:#F3C45B;
  --garper-gold-soft:#FFE08A;
  --garper-white:#FFFFFF;
}

/* =========================================================
   1) BARRA SUPERIOR ARRIBA DEL HEADER
   ========================================================= */

.garper-topbar-final,
.topbar,
.site-topbar{
  background:linear-gradient(90deg,#000B2E 0%,#002CFF 48%,#061BFF 100%) !important;
  color:#ffffff !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 8px 22px rgba(0,18,74,.20) !important;
}

.garper-topbar-final span,
.topbar span,
.site-topbar span{
  color:#ffffff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.25) !important;
}

/* =========================================================
   2) HEADER / NAVBAR
   ========================================================= */

.garper-header-final,
.site-header,
header{
  background:#ffffff !important;
  border-bottom:1px solid rgba(0,44,255,.12) !important;
  box-shadow:0 12px 28px rgba(0,18,74,.10) !important;
}

.garper-navbar-final{
  background:transparent !important;
}

/* Links navbar */
.garper-nav-links-final a{
  color:#000B2E !important;
}

.garper-nav-links-final a:hover,
.garper-nav-links-final a.active{
  color:#061BFF !important;
}

/* =========================================================
   3) LOGO NAVBAR - AZUL ELÉCTRICO COHERENTE
   Funciona para el logo tipo etiqueta actual.
   ========================================================= */

.garper-brand-label,
.garper-brand-final,
.garper-logo-real-final,
.footer-brand-logo.garper-brand-label{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 58%,#061BFF 100%) !important;
  border:1px solid rgba(255,224,138,.55) !important;
  box-shadow:0 14px 32px rgba(0,44,255,.25) !important;
  color:#ffffff !important;
}

/* Si el navbar usa spans brand-main / brand-sub */
.garper-brand-label .brand-main,
.garper-brand-final .brand-main,
.footer-brand-logo .brand-main{
  color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.38) !important;
}

.garper-brand-label .brand-sub,
.garper-brand-final .brand-sub,
.footer-brand-logo .brand-sub{
  color:#FFE08A !important;
}

/* Si el navbar usa imagen del logo */
.garper-brand-final img,
.garper-logo-real-final img,
.garper-brand-original-clean img,
.garper-logo-crop-final img{
  filter:saturate(1.08) contrast(1.04) !important;
}

/* Si el contenedor del logo imagen quedó gris/azul apagado */
.garper-brand-original-clean,
.garper-logo-crop-final,
.garper-logo-mark-final{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 58%,#061BFF 100%) !important;
  border:1px solid rgba(255,224,138,.55) !important;
  box-shadow:0 14px 32px rgba(0,44,255,.25) !important;
}

/* =========================================================
   4) BOTONES FALTANTES - TODOS LOS TIPOS
   ========================================================= */

/* Botón principal */
.btn.primary,
.btn-primary,
button.btn-primary,
a.btn-primary,
button[type="submit"].btn,
.checkout-button,
.mp-button,
.catalog-cart-btn{
  background:linear-gradient(135deg,#F3C45B 0%,#FFE08A 100%) !important;
  color:#000B2E !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(243,196,91,.28) !important;
}

/* Botón principal hover */
.btn.primary:hover,
.btn-primary:hover,
.catalog-cart-btn:hover{
  filter:saturate(1.08) brightness(1.02) !important;
  transform:translateY(-1px);
}

/* Botón secundario en zonas azules */
.hero .btn.secondary,
.hero .btn.ghost,
.page-hero .btn.secondary,
.page-hero .btn.ghost,
.btn.secondary{
  background:rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.42) !important;
  box-shadow:0 12px 30px rgba(0,18,74,.16) !important;
}

/* Botones secundarios en zonas claras */
.section .btn.ghost,
.section .btn.secondary,
.cart-summary .btn.ghost,
.cart-summary .btn.secondary-cart,
.legal-page .btn.ghost,
.product-back-actions .btn.ghost,
.btn.secondary-cart,
.btn.secondary-catalog{
  background:#ffffff !important;
  color:#000B2E !important;
  border:1px solid rgba(0,44,255,.18) !important;
  box-shadow:0 10px 24px rgba(0,18,74,.08) !important;
}

/* Botón comprar directo */
.catalog-buy-btn,
.buy-now-btn,
.btn.buy,
.btn-success{
  background:linear-gradient(135deg,#061BFF 0%,#002CFF 55%,#003BBA 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(0,44,255,.24) !important;
}

/* Mini botones */
.mini-btn,
.product-card .mini-btn,
.contact-card .mini-btn{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 100%) !important;
  color:#ffffff !important;
  border:none !important;
  box-shadow:0 10px 22px rgba(0,44,255,.18) !important;
}

/* Botón Admin */
.garper-admin-final{
  background:linear-gradient(135deg,#F3C45B 0%,#FFE08A 100%) !important;
  color:#000B2E !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(243,196,91,.28) !important;
}

/* Botón carrito */
.garper-cart-final{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:0 14px 34px rgba(0,44,255,.24) !important;
}

.garper-cart-final span,
.garper-cart-final a{
  color:#ffffff !important;
}

.garper-cart-final strong{
  background:#F3C45B !important;
  color:#000B2E !important;
}

/* Botones de cantidad */
.qty-control button,
.cart-actions button{
  background:#E8EEFF !important;
  color:#000B2E !important;
}

.qty-control button:hover,
.cart-actions button:hover{
  background:#061BFF !important;
  color:#ffffff !important;
}

/* Botón de ayuda */
.garper-help-button{
  background:linear-gradient(135deg,#061BFF 0%,#002CFF 55%,#003BBA 100%) !important;
  color:#ffffff !important;
  box-shadow:0 18px 42px rgba(0,44,255,.30) !important;
}

.garper-help-header{
  background:linear-gradient(135deg,#000B2E 0%,#061BFF 100%) !important;
}

/* =========================================================
   5) FOOTER COMPLETO EN AZUL ELÉCTRICO
   ========================================================= */

.prefooter{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 28%),
    linear-gradient(135deg,#000B2E 0%,#002CFF 56%,#061BFF 100%) !important;
  color:#ffffff !important;
}

.prefooter h2,
.prefooter-card strong{
  color:#ffffff !important;
}

.prefooter p,
.prefooter-card span{
  color:rgba(255,255,255,.88) !important;
}

.prefooter-card{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:0 16px 42px rgba(0,18,74,.18) !important;
}

.footer{
  background:
    radial-gradient(circle at top left, rgba(6,27,255,.18), transparent 28%),
    linear-gradient(180deg,#00124A 0%,#000B2E 100%) !important;
  color:#ffffff !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

.footer h3,
.footer h4{
  color:#FFE08A !important;
}

.footer a{
  color:rgba(255,255,255,.88) !important;
}

.footer a:hover{
  color:#FFE08A !important;
}

.footer p,
.footer span,
.credits{
  color:rgba(255,255,255,.82) !important;
}

.credits{
  background:rgba(0,0,0,.14) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

.credits a{
  color:#FFE08A !important;
}

/* Logo footer igual al navbar */
.footer-brand-logo,
.footer-brand-logo.garper-brand-label{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 58%,#061BFF 100%) !important;
  border:1px solid rgba(255,224,138,.55) !important;
  box-shadow:0 14px 32px rgba(0,44,255,.25) !important;
}

/* =========================================================
   6) ADMIN - SI ESTE MISMO CSS LLEGA A CARGAR EN ADMIN
   ========================================================= */

.admin-sidebar,
.sidebar,
.admin-menu,
body.admin aside{
  background:linear-gradient(180deg,#000B2E 0%,#002CFF 62%,#061BFF 100%) !important;
}

.admin-panel,
.admin-card,
.admin-form,
.table-responsive{
  border:1px solid rgba(0,44,255,.12) !important;
  box-shadow:0 18px 45px rgba(0,18,74,.10) !important;
}

.admin-main h1,
.admin-main h2,
.admin-main h3{
  color:#00124A !important;
}

/* =========================================================
   7) RESPONSIVE
   ========================================================= */

@media(max-width:900px){
  .garper-topbar-final{
    font-size:12px !important;
  }

  .garper-cart-mobile-final{
    background:linear-gradient(135deg,#000B2E 0%,#002CFF 100%) !important;
  }

  .garper-menu-toggle-final{
    background:#E8EEFF !important;
    color:#000B2E !important;
    border:1px solid rgba(0,44,255,.16) !important;
  }

  .garper-nav-links-final{
    background:#ffffff !important;
    border:1px solid rgba(0,44,255,.12) !important;
    box-shadow:0 18px 45px rgba(0,18,74,.12) !important;
  }

  .garper-nav-links-final a{
    color:#000B2E !important;
  }
}



/* =========================================================
   GARPER - AZUL ELECTRICO FINAL DEFINITIVO
   Este bloque debe quedar SIEMPRE al final del CSS.
   Corrige navbar, logo, botones, footer y chatbot.
   ========================================================= */

:root{
  --azul-noche:#000B2E !important;
  --azul-mar:#002CFF !important;
  --azul-electrico:#061BFF !important;
  --azul-francia:#002CFF !important;
  --azul-rey:#003BBA !important;
  --dorado:#F3C45B !important;
  --dorado-suave:#FFE08A !important;
  --crema:#F4F7FF !important;
  --harina:#FFFFFF !important;
  --texto:#111827 !important;
  --muted:#5B6472 !important;
}

/* Fondo global */
html,
body{
  background:
    radial-gradient(circle at 12% 0%, rgba(6,27,255,.08), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f3f6ff 46%,#ffffff 100%) !important;
  color:#111827 !important;
}

/* BARRA SUPERIOR */
.garper-topbar-final,
.topbar,
.site-topbar{
  background:linear-gradient(90deg,#000B2E 0%,#002CFF 52%,#061BFF 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 8px 22px rgba(0,18,74,.22) !important;
}

.garper-topbar-final *,
.topbar *,
.site-topbar *{
  color:#ffffff !important;
}

/* HEADER / NAVBAR */
.garper-header-final,
.site-header,
header.garper-header-final{
  background:rgba(255,255,255,.97) !important;
  border-bottom:1px solid rgba(0,44,255,.14) !important;
  box-shadow:0 12px 30px rgba(0,18,74,.12) !important;
}

.garper-navbar-final{
  background:transparent !important;
}

/* Links navbar */
.garper-nav-links-final a,
.nav-links a{
  color:#000B2E !important;
}

.garper-nav-links-final a:hover,
.garper-nav-links-final a.active,
.nav-links a:hover,
.nav-links a.active{
  color:#061BFF !important;
}

/* LOGO NAVBAR: cubre todas las variantes usadas */
.garper-logo-final,
.garper-brand-label,
.garper-brand-final,
.garper-logo-real-final,
.garper-brand-original-clean,
.garper-logo-crop-final,
.garper-logo-mark-final,
.brand img{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 55%,#061BFF 100%) !important;
  border:1px solid rgba(255,224,138,.55) !important;
  box-shadow:0 14px 34px rgba(0,44,255,.28) !important;
}

.garper-logo-name-final,
.garper-logo-word-final,
.garper-brand-label .brand-main,
.garper-brand-final .brand-main,
.brand-main{
  color:#ffffff !important;
  text-shadow:0 2px 12px rgba(0,0,0,.42) !important;
}

.garper-stars-final i,
.garper-logo-stars-final i{
  background:#FFE08A !important;
  box-shadow:0 0 10px rgba(255,224,138,.85) !important;
}

.garper-brand-label .brand-sub,
.garper-brand-final .brand-sub,
.brand-sub{
  color:#FFE08A !important;
}

/* BOTON ADMIN */
.garper-admin-final,
.admin-nav-btn{
  background:linear-gradient(135deg,#F3C45B 0%,#FFE08A 100%) !important;
  color:#000B2E !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(243,196,91,.30) !important;
}

/* BOTON CARRITO */
.garper-cart-final,
.nav-cart,
.cart-link{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 60%,#061BFF 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 14px 34px rgba(0,44,255,.28) !important;
}

.garper-cart-final *,
.nav-cart *,
.cart-link *{
  color:inherit !important;
}

.garper-cart-final strong,
.cart-count,
.cart-link strong{
  background:#F3C45B !important;
  color:#000B2E !important;
}

/* HERO */
.hero{
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.18), transparent 24%),
    radial-gradient(circle at 8% 78%, rgba(243,196,91,.14), transparent 28%),
    linear-gradient(120deg,#000B2E 0%,#002CFF 48%,#061BFF 100%) !important;
  color:#ffffff !important;
}

.hero h1,
.hero-copy h1{
  color:#ffffff !important;
  text-shadow:0 5px 24px rgba(0,0,0,.32) !important;
}

.hero p,
.hero-copy p{
  color:rgba(255,255,255,.92) !important;
}

.eyebrow,
.hero .eyebrow{
  color:#FFE08A !important;
}

.eyebrow.dark{
  color:#061BFF !important;
}

.hero-card,
.hero-logo-mobile{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:0 30px 80px rgba(0,18,74,.26) !important;
}

.hero-card p{
  color:#FFE08A !important;
}

/* BOTONES GENERALES */
.btn.primary,
.btn-primary,
button.btn-primary,
a.btn-primary,
button[type="submit"].btn,
.checkout-button,
.mp-button,
.catalog-cart-btn,
.chatbot-form button{
  background:linear-gradient(135deg,#F3C45B 0%,#FFE08A 100%) !important;
  color:#000B2E !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(243,196,91,.28) !important;
}

.btn.secondary,
.btn.ghost,
.btn.secondary-catalog,
.btn.secondary-cart{
  background:#ffffff !important;
  color:#000B2E !important;
  border:1px solid rgba(0,44,255,.18) !important;
  box-shadow:0 10px 24px rgba(0,18,74,.08) !important;
}

.hero .btn.secondary,
.hero .btn.ghost,
.page-hero .btn.secondary,
.page-hero .btn.ghost{
  background:rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.42) !important;
}

.catalog-buy-btn,
.buy-now-btn,
.btn.buy,
.btn-success{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 55%,#061BFF 100%) !important;
  color:#ffffff !important;
  border:0 !important;
  box-shadow:0 14px 32px rgba(0,44,255,.26) !important;
}

.mini-btn,
.product-card .mini-btn,
.contact-card .mini-btn{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 100%) !important;
  color:#ffffff !important;
  border:none !important;
  box-shadow:0 10px 22px rgba(0,44,255,.18) !important;
}

/* Cantidad +/- */
.qty-control{
  background:#F4F7FF !important;
  border:1px solid rgba(0,44,255,.16) !important;
}

.qty-control button,
.cart-actions button{
  background:#E8EEFF !important;
  color:#000B2E !important;
}

.qty-control button:hover,
.cart-actions button:hover{
  background:#061BFF !important;
  color:#ffffff !important;
}

/* Secciones internas */
.page-hero,
.garper-commercial-hero,
.contact-hero-new{
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.18), transparent 28%),
    linear-gradient(120deg,#000B2E 0%,#002CFF 52%,#061BFF 100%) !important;
  color:#ffffff !important;
}

.page-hero h1,
.page-hero p,
.contact-hero-new h1,
.contact-hero-new p{
  color:#ffffff !important;
}

/* Tarjetas y productos */
.product-card,
.contact-card,
.legal-page,
.cart-summary,
.checkout-form,
.empty-cart,
.commercial-form-card,
.commercial-benefits div,
.contact-new-main,
.contact-new-card,
.contact-service-card,
.delivery-note-box{
  background:#ffffff !important;
  border:1px solid rgba(0,44,255,.10) !important;
  box-shadow:0 18px 45px rgba(0,18,74,.10) !important;
}

.section-title h2,
.contact-card h2,
.product-body h3,
.story h2,
.legal-page h1,
.legal-page h2,
.contact-new-main h2,
.contact-new-card h3,
.contact-service-card h2,
.delivery-note-box h2,
.detail-info h1,
.cart-summary h2,
.checkout-form h2{
  color:#000B2E !important;
}

.section-title span,
.product-body span,
.catalog-card-body span{
  color:#061BFF !important;
}

.product-footer strong,
.detail-price,
.catalog-product-footer strong{
  color:#061BFF !important;
}

/* Story / Garper comercial */
.story{
  background:
    radial-gradient(circle at 20% 20%, rgba(6,27,255,.08), transparent 32%),
    linear-gradient(135deg,#ffffff 0%,#EEF3FF 54%,#ffffff 100%) !important;
}

.story-list div{
  background:#ffffff !important;
  border-left:6px solid #061BFF !important;
}

.story-list strong{
  color:#002CFF !important;
}

/* Formularios */
input,
select,
textarea,
.catalog-filter input,
.catalog-filter select{
  background:#ffffff !important;
  border:1px solid rgba(0,44,255,.16) !important;
  color:#111827 !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:#061BFF !important;
  box-shadow:0 0 0 4px rgba(6,27,255,.12) !important;
}

/* CHATBOT - ambas variantes */
.garper-help-button,
.chat-launcher{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 55%,#061BFF 100%) !important;
  color:#ffffff !important;
  box-shadow:0 18px 42px rgba(0,44,255,.34) !important;
}

.garper-help-button *,
.chat-launcher *{
  color:#ffffff !important;
}

.garper-help-header,
.chatbot-header{
  background:linear-gradient(135deg,#000B2E 0%,#061BFF 100%) !important;
  color:#ffffff !important;
}

.garper-help-header small,
.chatbot-header small{
  color:#FFE08A !important;
}

.garper-help-user,
.user-msg{
  background:#002CFF !important;
  color:#ffffff !important;
}

.garper-help-question{
  color:#000B2E !important;
  border:1px solid rgba(0,44,255,.18) !important;
}

.garper-help-question:hover{
  background:#E8EEFF !important;
}

.garper-help-footer a{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 55%,#061BFF 100%) !important;
  color:#ffffff !important;
}

/* PREFOOTER */
.prefooter{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 28%),
    linear-gradient(135deg,#000B2E 0%,#002CFF 56%,#061BFF 100%) !important;
  color:#ffffff !important;
}

.prefooter h2,
.prefooter-card strong{
  color:#ffffff !important;
}

.prefooter p,
.prefooter-card span{
  color:rgba(255,255,255,.88) !important;
}

.prefooter-card{
  background:rgba(255,255,255,.12) !important;
  border:1px solid rgba(255,255,255,.25) !important;
}

/* FOOTER */
.footer{
  background:
    radial-gradient(circle at top left, rgba(6,27,255,.22), transparent 30%),
    linear-gradient(180deg,#00124A 0%,#000B2E 100%) !important;
  color:#ffffff !important;
}

.footer h3,
.footer h4{
  color:#FFE08A !important;
}

.footer a,
.footer p,
.footer span,
.credits{
  color:rgba(255,255,255,.86) !important;
}

.footer a:hover,
.credits a{
  color:#FFE08A !important;
}

/* Logo footer: cubre viejo y nuevo */
.footer-garper-logo,
.footer-brand-logo,
.footer-brand-logo.garper-brand-label{
  background:linear-gradient(135deg,#000B2E 0%,#002CFF 55%,#061BFF 100%) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,224,138,.55) !important;
  box-shadow:0 14px 34px rgba(0,44,255,.28) !important;
}

.footer-garper-logo{
  color:#ffffff !important;
}

.footer-logo-main,
.footer-brand-logo .brand-main{
  color:#ffffff !important;
}

.footer-logo-sub,
.footer-brand-logo .brand-sub{
  color:#FFE08A !important;
}

.credits{
  background:rgba(0,0,0,.14) !important;
  border-top:1px solid rgba(255,255,255,.10) !important;
}

/* Móvil */
@media(max-width:900px){
  .garper-menu-toggle-final,
  .menu-toggle{
    background:#E8EEFF !important;
    color:#000B2E !important;
    border:1px solid rgba(0,44,255,.16) !important;
  }

  .garper-nav-links-final,
  .nav-links.open{
    background:#ffffff !important;
    border:1px solid rgba(0,44,255,.12) !important;
    box-shadow:0 18px 45px rgba(0,18,74,.12) !important;
  }

  .garper-nav-links-final a,
  .nav-links.open a{
    color:#000B2E !important;
  }
}