/* ===========================
   Reset & Variables – Clean Duo (Green + Soft Red Accents)
=========================== */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Verdes principales */
  --green-900:#39d362;   /* títulos / header / btn primario  */
  --green-700:#2f6e3f;   /* hover / bordes activos */
  --green-500:#58a06a;   /* detalles suaves */
  --green-200:#dfeee5;   /* fondos chips / inputs */

  /* Rojos de acento (muy contenidos) */
  --red-600:#ec7112;     /* CTA sutiles (detalles/carrito/remove) #c63b3b*/
  --red-700:#a53030;     /* hover rojo */

  /* Neutros cálidos */
  --paper:#fafaf7;       /* fondo general */
  --card:#ffffff;        /* tarjetas / modales */
  --ink:#2c2c2c;         /* texto principal */
  --muted:#5f6a61;       /* texto secundario */
  --line:#e7ece7;        /* líneas y divisores */

  /* Acento complementario suave (ámbar) */
  --amber-400:#e6b650;   /* subrayados / low stock suave */

  /* Tokens heredados (compatibilidad) */
  --primary-color:var(--green-900);
  --secondary-color:var(--green-700);
  --accent-color:var(--green-500);
  --light-green:var(--green-200);
  --white:#fff;
  --light-gray:#f5f5f5;
  --dark-gray:var(--ink);

  /* UI */
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 8px 24px rgba(15,30,20,.08);
  --ring:0 0 0 3px rgba(47,110,63,.18);
  --ring-red:0 0 0 3px rgba(198,59,59,.16);
  --brand-h:70px;
}

/* ===========================
   Base
=========================== */
body{
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ===========================
   Header (NAV verde como el carrito)
=========================== */
.header{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  background:var(--green-900); /* ← mismo verde del carrito */
  box-shadow:var(--shadow);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.header .container{
  display:flex;align-items:center;justify-content:space-between;padding:1rem 20px
}



/* Branding visible sobre fondo verde */
.logo{display:flex;align-items:center;gap:10px;color:#fff}
.brand-logo{display:block;height:var(--brand-h);width:auto;max-height:var(--brand-h)}

/* NAV links blancos + activo subrayado rojo */
.nav ul{list-style:none;display:flex;gap:2rem}
.nav a{
  color:#fff; text-decoration:none; font-weight:700;
  padding:.35rem 0; border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s,opacity .2s;
}
.nav a:hover{opacity:.9; border-color:var(--amber-400)}
.nav a.active,
.nav a[aria-current="page"]{
  border-color:var(--red-600); /* indicador rojo para la página actual */
}

/* Botones del header (siguen legibles sobre verde) */
.header-actions{display:flex;align-items:center;gap:1rem}
.btn-login,.btn-cart{
  background:#ffffff; color:var(--green-900); border:0; cursor:pointer;
  padding:.55rem 1rem; border-radius:var(--radius-sm);
  transition:background .2s,transform .1s,box-shadow .2s; position:relative
}
.btn-login:hover,.btn-cart:hover{background:#f2f7f3; box-shadow:0 8px 18px rgba(0,0,0,.08)}
.btn-login:active,.btn-cart:active{transform:translateY(1px)}
.cart-count{
  position:absolute;top:-8px;right:-8px;width:20px;height:20px;
  background:var(--red-600);color:#fff;border-radius:50%;
  display:grid;place-items:center;font-size:.8rem;box-shadow:0 0 0 3px var(--green-900)
}

/* ===========================
   Hero  (no se toca el color)
=========================== */
.hero{
  background:var(--paper);
  padding:120px 0 80px;min-height:60vh;display:flex;align-items:center;
  border-bottom:1px solid var(--line);
}
.hero-content{flex:1;padding:0 20px}
.hero-content h2{
  font-size:3rem;color:var(--green-900);margin-bottom:1rem;line-height:1.2
}
.hero-content p{
  font-size:1.15rem;color:var(--muted);margin-bottom:2rem;max-width:48ch
}
.hero-image{flex:1;display:flex;align-items:center;justify-content:center}

/* ===========================
   Botones
=========================== */
.btn-primary{
  background:var(--green-900);color:#fff;border:0;cursor:pointer;
  padding:1rem 2rem;font-size:1.05rem;border-radius:var(--radius-sm);
  text-decoration:none;display:inline-block;transition:transform .2s,box-shadow .2s,background .2s;
  box-shadow:0 6px 18px rgba(31,77,43,.18);
}
.btn-primary:hover{background:var(--green-700);transform:translateY(-1px)}
.btn-secondary{
  background:#fff;color:var(--green-900);border:1px solid var(--line);cursor:pointer;
  padding:.85rem 1.25rem;border-radius:var(--radius-sm);transition:border-color .2s,color .2s,background .2s;
}
.btn-secondary:hover{border-color:var(--green-500);color:var(--green-700);background:#fcfdfc}
.btn-details{background:var(--red-600);color:#fff;border:0}
.btn-details:hover{background:var(--red-700)}

/* ===========================
   Productos – grid & cards
=========================== */
.featured-products{padding:80px 0;background:var(--paper)}
.featured-products h2{text-align:center;font-size:2.2rem;color:var(--green-900);margin-bottom:1rem}
.featured-products h2+p{color:var(--muted);text-align:center;margin-bottom:2rem}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}

.product-card{
  background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s;border:1px solid var(--line);
}
.product-card:hover{
  transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.10);
  border-color:#dfe6df;
}

/* Imagen sin recorte */
.product-image{
  position:relative;height:240px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;padding:16px
}
.product-photo{width:100%;height:100%;object-fit:contain;display:block;image-orientation:from-image}

/* === Marco bicolor (mitad verde / mitad naranja) === */
:root{
  /* Colores del marco (ajústalos a gusto) */
  --frame-a: #39d362;    /* Verde */
  --frame-b: #ff8a00;             /* Naranja (puedes usar var(--red-600) si prefieres) */
  --frame-thickness: 5px;         /* grosor del aro */
  --frame-inset: 2px;             /* separación del borde de la card */
  --frame-radius: 12px;           /* radio del aro */
  --frame-angle: 90deg;           /* 90deg = mitad izq. verde, mitad der. naranja */
  /* usa 0deg para mitad superior/inf., 180deg o 270deg si quieres invertir */
}

.product-image{ position: relative; }

.product-image::before{
  content: "";
  position: absolute;
  inset: var(--frame-inset);
  padding: var(--frame-thickness);
  border-radius: var(--frame-radius);
  box-sizing: border-box;

  /* Bicolor 50/50 sin difuminado */
  background:
    linear-gradient(var(--frame-angle),
      var(--frame-a) 0%,
      var(--frame-a) 50%,
      var(--frame-b) 50%,
      var(--frame-b) 100%
    );

  /* Aro hueco (no altera layout) */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  pointer-events: none;
}



/* Badges de stock */
.product-badges{position:absolute;top:12px;right:12px;display:flex;gap:6px}
.badge{
  padding:.28rem .65rem;border-radius:999px;font-size:.7rem;font-weight:800;color:#fff;
  box-shadow:0 6px 12px rgba(0,0,0,.10);letter-spacing:.02em
}
.badge.stock.in-stock{background:var(--green-700)}
.badge.stock.low-stock{background:var(--amber-400);color:#2f2a1c}
.badge.stock.out-of-stock{background:var(--red-600)}

.product-info{padding:1.2rem 1.5rem 1.4rem}
.product-info h3{color:var(--green-900);margin-bottom:.45rem;line-height:1.25}
.product-info p{
  color:var(--muted);margin-bottom:1rem;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden
}
.product-price{
  font-size:1.28rem;font-weight:800;color:var(--green-900);
  margin:.2rem 0 1rem;display:flex;align-items:center;gap:.5rem
}
.product-price::after{
  content:"";width:8px;height:8px;border-radius:50%;
  background:var(--red-600);
}

/* Botonera de la card */
.product-actions{display:flex;gap:.6rem}

/* ===========================
   Filtros / búsqueda / orden
=========================== */
.filters-section{margin-top:1.5em;margin-bottom:2em}
.filter-buttons{display:flex;flex-wrap:wrap;gap:.6em;margin-bottom:1.2em}
.filter-btn{
  background:var(--green-200);color:var(--green-900);border:1px solid var(--line);
  padding:.5em 1.1em;border-radius:999px;font-weight:700;cursor:pointer;
  transition:background .2s,color .2s,border-color .2s,transform .1s;
}
.filter-btn:hover{transform:translateY(-1px);border-color:var(--green-500)}
.filter-btn.active,.filter-btn:focus{
  background:#fff;color:var(--green-900);border-color:var(--green-700);outline:none;box-shadow:var(--ring);
}

.search-sort{display:flex;flex-wrap:wrap;align-items:center;gap:1em;margin-bottom:1.2em}
.search-box{
  display:flex;align-items:center;gap:.4em;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;padding:.35em .8em
}
.search-box input[type="text"]{
  border:0;outline:0;background:transparent;padding:.5em;font-size:1em;width:180px;color:var(--green-900)
}
.search-box i{font-size:1.1em;color:var(--muted)}

/* Select orden */
#sortSelect,.filters-section .search-sort select,.products-filters .search-sort select,.products-toolbar select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:#fff;border:1.5px solid var(--line);border-radius:10px;
  padding:10px 42px 10px 14px;font-size:16px;line-height:1.1;color:var(--green-900);cursor:pointer;min-width:230px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232f6e3f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px
}
#sortSelect:focus,.filters-section .search-sort select:focus,.products-filters .search-sort select:focus,.products-toolbar select:focus{
  outline:0;border-color:var(--green-700);box-shadow:var(--ring)
}
select::-ms-expand{display:none}
.no-results{margin:2em auto;text-align:center;color:var(--muted);opacity:.95}
.no-results i{font-size:2.2em;color:var(--green-500);margin-bottom:.6em}

/* ===========================
   “Nuestra historia” (About)
=========================== */
.about{padding:80px 0;background:var(--paper);border-top:1px solid var(--line)}
.about-content{display:flex;align-items:center;gap:4rem}
.about-text{flex:1}
.about-text h2{
  font-size:2.4rem;color:var(--green-900);margin-bottom:1.1rem;position:relative;display:inline-block;
}
.about-text h2::after{
  content:"";display:block;height:4px;border-radius:999px;margin-top:.35rem;width:56px;
  background:var(--green-700);
}
.about-text p{font-size:1.05rem;color:var(--muted);margin-bottom:1rem;max-width:60ch}
.about-image{flex:1;display:flex;align-items:center;justify-content:center}
.about-image img{
  max-width:100%;height:auto;display:block;border-radius:var(--radius);
  box-shadow:0 20px 36px rgba(0,0,0,.12)
}
@media (max-width:900px){
  .about-content{flex-direction:column;gap:2rem;text-align:center}
  .about-image{order:-1}
}

/* ===========================
   Footer
=========================== */
.footer{
  background:#183b22;color:#fff;padding:3rem 0 1rem;border-top:1px solid #123019
}
.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}
.footer-section h3{color:#fff;margin-bottom:1rem}
.footer-section ul{list-style:none}
.footer-section li{margin-bottom:.5rem}
.footer-section a{color:#e9f3ec;text-decoration:none;font-weight:600;transition:color .2s}
.footer-section a:hover{color:#cfe7d6}

/* ===========================
   Modales base
=========================== */
.modal{display:none;position:fixed;inset:0;z-index:2000;background:rgba(15,30,20,.55)}
.modal-content{
  background:var(--card);width:90%;max-width:500px;margin:5% auto;padding:2rem;
  border-radius:var(--radius-sm);position:relative;max-height:80vh;overflow-y:auto;
  box-shadow:0 28px 48px rgba(0,0,0,.14);border:1px solid var(--line)
}
.close{position:absolute;right:1rem;top:1rem;font-size:2rem;color:var(--muted);cursor:pointer;transition:color .2s}
.close:hover{color:var(--green-900)}

/* ===========================
   Modal Detalle de Producto
=========================== */
.product-detail-modal .modal-content{
  max-width:1080px;width:96%;padding:20px 24px;border-radius:var(--radius);
  max-height:90vh;overflow-y:auto
}
.product-detail-modal .product-detail-body,
.product-detail-modal .product-detail-header{
  display:grid;grid-template-columns:1fr;row-gap:18px;align-items:start
}
.product-detail-modal .product-detail-media,
.product-detail-modal .product-detail-image{
  justify-self:center;width:min(780px,100%);aspect-ratio:4/3;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;align-items:center;justify-content:center;padding:8px
}
.product-detail-modal .product-detail-media img,
.product-detail-modal .product-detail-image img,
.product-detail-modal img.product-detail-photo{
  max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;image-orientation:from-image
}
.product-detail-info{display:flex;flex-direction:column;gap:14px}
.product-detail-title{font-size:2rem;line-height:1.25;color:var(--green-900)}
.product-detail-desc{color:var(--muted)}
.product-detail-meta{display:flex;flex-direction:column;gap:8px}
.product-detail-price{font-size:1.55rem;font-weight:800;color:var(--green-900)}
.product-detail-price .unit{font-weight:600;color:#4f5a52}
.stock-ok{color:#2e7d32;font-weight:700}
.stock-out{color:var(--red-600);font-weight:800}
.product-detail-actions{display:flex;gap:10px;align-items:center;margin-top:8px}
.product-detail-actions .btn-primary{background:var(--green-900)}
.product-detail-actions .btn-primary:hover{background:var(--green-700)}
.product-detail-actions .btn-secondary{background:#fff;color:var(--green-900);border:1px solid var(--line)}
.product-detail-actions .btn-secondary:hover{border-color:var(--green-500);color:var(--green-700)}
.product-detail-actions .btn-primary[disabled]{opacity:.55;cursor:not-allowed}

@media (min-width:1024px){
  .product-detail-modal .product-detail-body,
  .product-detail-modal .product-detail-header{
    grid-template-columns:minmax(380px,56vw) minmax(340px,420px);
    column-gap:28px
  }
  .product-detail-modal .product-detail-media,
  .product-detail-modal .product-detail-image{justify-self:start;width:100%}
}

/* ===========================
   Formularios / carrito
=========================== */
.form-group{margin-bottom:1.5rem}
.form-group label{display:block;margin-bottom:.5rem;color:var(--green-900);font-weight:700}
.form-group input,.form-group textarea{
  width:100%;padding:.8rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-size:1rem;transition:border-color .2s, box-shadow .2s
}
.form-group input:focus,.form-group textarea:focus{
  outline:0;border-color:var(--green-700);box-shadow:var(--ring)
}
.form-group textarea{resize:vertical;min-height:100px}

.cart-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--line)}
.cart-item-info{flex:1}
.cart-item-controls{display:flex;align-items:center;gap:1rem}
.quantity-controls{display:flex;align-items:center;gap:.5rem}
.quantity-btn{
  background:var(--green-900);color:#fff;border:0;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;transition:background .2s
}
.quantity-btn:hover{background:var(--green-700)}
.cart-total{text-align:center;padding:1rem;border-top:1.5px solid var(--line);margin-top:1rem}
.remove-item{background:var(--red-600);color:#fff;border:0;padding:.35rem .85rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.9rem}
.remove-item:hover{background:var(--red-700)}

/* ===========================
   Recetas (cards + modal)
=========================== */
.recipes-hero{
  background:var(--paper);color:var(--green-900);padding:120px 0 60px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.recipes-hero h1{font-size:2.2rem}

.recipe-filters{background:var(--card);padding:2rem 0;border-bottom:1px solid var(--line)}
.filter-controls{display:flex;flex-direction:column;gap:1.25rem}
.filter-group{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.filter-group h3{color:var(--green-900);margin:0;min-width:120px}
.difficulty-buttons{display:flex;flex-wrap:wrap;gap:.5rem}
.difficulty-btn{
  background:var(--green-200);color:var(--green-900);border:1px solid var(--line);
  padding:.5em 1.1em;border-radius:999px;font-weight:700;cursor:pointer;transition:all .2s
}
.difficulty-btn:hover,.difficulty-btn.active{
  background:#fff;color:var(--green-900);border-color:var(--green-700);box-shadow:var(--ring)
}
.search-recipe{position:relative;min-width:250px}
.search-recipe input{
  width:100%;padding:.8rem 2.5rem .8rem 1rem;border:1.5px solid var(--line);
  border-radius:var(--radius-sm);font-size:1rem
}
.search-recipe i{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--muted)}

.featured-recipes{padding:3rem 0;background:var(--paper)}
.featured-recipes h2{text-align:center;font-size:2rem;color:var(--green-900);margin-bottom:2rem}
.recipes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
.recipe-card{
  background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;cursor:pointer;border:1px solid var(--line)
}
.recipe-card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(0,0,0,.10)}
.recipe-image{
  position:relative;height:200px;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden
}
.recipe-photo{width:100%;height:100%;object-fit:contain;display:block;image-orientation:from-image}
.recipe-badges{position:absolute;top:.5rem;right:.5rem;display:flex;flex-direction:column;gap:.25rem;pointer-events:none}
.badge{padding:.25rem .5rem;border-radius:12px;font-size:.7rem;font-weight:800;color:#fff}
.badge.difficulty.easy{background:#2e7d32}
.badge.difficulty.medium{background:#e49b2d}
.badge.difficulty.hard{background:var(--red-600)}
.badge.category{background:var(--green-700)}
.recipe-info{padding:1.15rem}
.recipe-info h3{color:var(--green-900);margin-bottom:.35rem;font-size:1.1rem}
.recipe-description{color:var(--muted);margin-bottom:.7rem;font-size:.95rem;line-height:1.45}
.recipe-meta{display:flex;justify-content:space-between;margin-bottom:.7rem;font-size:.85rem;color:var(--muted)}
.recipe-meta span{display:flex;align-items:center;gap:.35rem}
.recipe-actions{display:flex;gap:.5rem}
.recipe-actions .btn-secondary{flex:1;font-size:.85rem;padding:.6rem}

/* Modal receta – imagen sin recortes */
#recipeModal .modal-content{max-width:980px;width:96%;max-height:90vh;overflow-y:auto;padding:20px 24px;border-radius:var(--radius);border:1px solid var(--line)}
#recipeModal .recipe-title-section{display:flex;gap:16px;align-items:flex-start}
#recipeModal .recipe-detail-image{
  flex:0 0 auto;width:clamp(280px,40vw,420px);aspect-ratio:4/3;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:8px;max-height:70vh
}
#recipeModal .recipe-detail-image img{max-width:100%;max-height:70vh;width:auto;height:auto;object-fit:contain;display:block;image-orientation:from-image}
#recipeModal .recipe-title-info{flex:1 1 auto;min-width:0}
@media (max-width:768px){
  #recipeModal .recipe-title-section{flex-direction:column;align-items:center;text-align:center;gap:12px}
  #recipeModal .recipe-detail-image{width:100%;aspect-ratio:16/9}
}

/* ===========================
   User menu & Toasts
=========================== */
.user-menu{
  display:none;position:absolute;top:50px;right:0;min-width:200px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow);z-index:3000;overflow:hidden
}
.user-menu.show{display:block}
.user-menu li{list-style:none}
.user-menu a{
  display:block;padding:.75rem 1rem;text-decoration:none;color:var(--ink);
  transition:background .2s,color .2s;font-weight:600
}
.user-menu a:hover{background:var(--green-200);color:var(--green-900)}
.btn-login.user-active{background:var(--green-700);color:#fff}

.toast-container{position:fixed;top:90px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:4000}
.toast{
  background:var(--card);color:var(--ink);border-left:6px solid var(--green-700);
  box-shadow:var(--shadow);padding:.85rem 1rem;border-radius:var(--radius-sm);min-width:240px;max-width:360px;
  animation:fadeIn .25s ease-out;border:1px solid var(--line)
}
.toast.success{border-left-color:#2e7d32}.toast.error{border-left-color:var(--red-600)}.toast.info{border-left-color:var(--green-500)}
@keyframes fadeIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:480px){.user-menu{right:10px;left:10px;min-width:unset}}

/* ===========================
   Utilidades & placeholders
=========================== */
.text-center{text-align:center}
.text-success{color:#2e7d32}
.text-error{color:var(--red-600)}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}
.hidden{display:none}
.product-photo.placeholder{background:repeating-linear-gradient(45deg,#f3f5f4,#f3f5f4 10px,#f8faf9 10px,#f8faf9 20px)}

/* ===========================
   CTA ROJO (primario) + Secundario VERDE
   (si prefieres el CTA rojo, deja este bloque;
    si no, elimínalo sin afectar el NAV)
=========================== */
.btn-primary,
.product-detail-actions .btn-primary{
  background:var(--red-600);color:#fff;border:0;
  box-shadow:0 6px 18px rgba(198,59,59,.22)
}
.btn-primary:hover,
.product-detail-actions .btn-primary:hover{background:var(--red-700);transform:translateY(-1px)}
.btn-primary:active,
.product-detail-actions .btn-primary:active{transform:translateY(0)}
.btn-primary:focus,
.product-detail-actions .btn-primary:focus{outline:0;box-shadow:var(--ring-red)}

.btn-secondary,
.product-detail-actions .btn-secondary{
  background:var(--green-700);color:#fff;border:0
}
.btn-secondary:hover,
.product-detail-actions .btn-secondary:hover{background:var(--green-900)}

/* ===========================
   Productos: SOLO “Detalles” en rojo
   (no toca el botón Agregar)
=========================== */

/* Tarjetas (grid) */
.product-card .product-actions .btn-details,
.product-card .product-actions [data-details]{
  background: var(--red-600) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(198,59,59,.18);
}

.product-card .product-actions .btn-details:hover,
.product-card .product-actions [data-details]:hover{
  background: var(--red-700) !important;
}

.product-card .product-actions .btn-details:focus,
.product-card .product-actions [data-details]:focus{
  outline: 0;
  box-shadow: var(--ring-red);
}

/* ===== Cantidad inline en tarjetas (junto al precio) ===== */
.price-qty{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px; /* mantiene el respiro antes de los botones */
}

.quantity-inline{
  display:flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1.5px solid var(--line, #e7ece7);
  border-radius:10px;
  padding:2px 6px;
}

.quantity-inline .qty-btn{
  width:28px;
  height:28px;
  border-radius:50%;
  border:0;
  background:var(--card, #fff);
  cursor:pointer;
  font-weight:700;
  line-height:1;
  display:grid;
  place-items:center;
  color:var(--green-900, #1f4d2b);
  transition:transform .1s, background .2s;
}

.quantity-inline .qty-btn:hover{ background:var(--green-200, #dfeee5); }
.quantity-inline .qty-btn:active{ transform:translateY(1px); }

.quantity-inline .qty-input{
  width:54px;
  height:28px;
  text-align:center;
  border:0;
  outline:0;
  font-weight:700;
  color:var(--green-900, #1f4d2b);
  background:transparent;
}

@media (max-width: 420px){
  .price-qty{ gap:8px; }
  .quantity-inline .qty-input{ width:46px; }
}

/* ===== Carrito: miniaturas + secciones ===== */
.cart-section { margin-bottom: 16px; }
.cart-section-title{
  font-weight: 800;
  color: var(--green-900);
  margin: 6px 0 8px;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.cart-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: .75rem 0;
  border-bottom:1px solid var(--line);
}

.cart-thumb{
  flex:0 0 auto;
  width:48px; height:48px;
  border-radius:10px;
  background:#fff;
  border:1px solid var(--line);
  display:grid; place-items:center;
  overflow:hidden;
}
.cart-thumb img{ width:100%; height:100%; object-fit:cover; display:block }

.cart-product-info{
  flex:1 1 auto; min-width:0;
  display:flex; flex-direction:column; gap:4px;
}
.cart-product-name{ font-weight:700; color:var(--green-900); }
.cart-product-price{ color:var(--muted); font-size:.95rem; }

.cart-product-qty{
  display:flex; align-items:center; gap:6px;
}
.cart-product-qty button{
  width:28px; height:28px; border-radius:50%; border:0;
  background:var(--green-900); color:#fff; cursor:pointer;
}
.cart-product-qty button[disabled]{ opacity:.5; cursor:not-allowed }
.cart-product-qty input{
  width:60px; text-align:center; border:1px solid var(--line);
  border-radius:8px; padding:.25rem .4rem;
}

.remove-cart-item{
  background:var(--red-600); color:#fff; border:0;
  padding:.35rem .65rem; border-radius:10px; cursor:pointer;
}
.remove-cart-item:hover{ background:var(--red-700) }

/* ===== Header UNIFICADO: fijo, con slot blanco a la izquierda ===== */
:root{
  --nav-h: 80px;     /* alto del header */
  --brand-w: 200px;   /* ancho del bloque blanco del logo */
}

/* Header fijo arriba */
.header{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--green-900);
  box-shadow: var(--shadow);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

/* Compensar el header fijo para que el contenido NO quede tapado */
body{ padding-top: var(--nav-h); }

/* Contenedor del header: una sola línea y altura fija */
.header .container{
  max-width: none;            /* ocupamos todo el ancho */
  height: var(--nav-h);
  padding: 0 20px 0 0;        /* respiro a la derecha; izquierda pegada */
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Bloque blanco del logo a la izquierda */
.brand-block{
  flex: 0 0 var(--brand-w);
  height: 100%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0 10px;
  overflow: hidden;
  text-decoration: none;
  border-radius: 12px;                /* quita si lo prefieres recto */
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
}

/* El logo rellena el bloque sin deformarse */
.brand-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Menú: una sola línea, subrayado simple (sobrio) */
.nav{ flex: 1 1 auto; display:flex; align-items:center; }
.nav ul{ list-style:none; display:flex; align-items:center; gap:26px; white-space:nowrap; margin:0; padding:0; }
.nav a{
  color:#fff; text-decoration:none; font-weight:700;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
  transition: border-color .2s, opacity .2s;
}
.nav a:hover{ opacity:.95; border-bottom-color: var(--amber-400); }
.nav a.active,
.nav a[aria-current="page"]{ border-bottom-color: var(--red-600); }

/* Acciones (Cliente / Carrito) */
.header-actions{ display:flex; align-items:center; gap:1rem; }
.btn-login,.btn-cart{
  background:#fff; color:var(--green-900); border:0; cursor:pointer;
  padding:.55rem 1rem; border-radius:8px; position:relative;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.cart-count{
  position:absolute; top:-8px; right:-8px; width:20px; height:20px;
  background:var(--red-600); color:#fff; border-radius:50%;
  display:grid; place-items:center; font-size:.8rem;
  box-shadow:0 0 0 3px var(--green-900);
}

/* Responsive: reducimos el slot de logo si aprieta */
@media (max-width: 1200px){ :root{ --brand-w: 320px; } }
@media (max-width: 992px){  :root{ --brand-w: 260px; --nav-h: 96px; } body{ padding-top: var(--nav-h); } }
@media (max-width: 700px){  :root{ --brand-w: 210px; --nav-h: 84px; }  body{ padding-top: var(--nav-h); } }
/* ===== FIX NAV CORTADO (logo + menú + acciones) ===== */

/* El contenedor ya ocupa todo el ancho (lo mantienes), aquí ajustamos gaps fluidos */
.header .container{
  gap: clamp(10px, 2vw, 20px);
}

/* El bloque blanco del logo ahora puede encogerse si el ancho no alcanza */
.brand-block{
  /* antes: flex: 0 0 var(--brand-w);  */
  flex: 0 1 clamp(220px, 28vw, var(--brand-w));
  /* mantiene altura 100%, sombras y radio tal cual */
}

/* El menú debe poder usar todo el espacio restante y NO forzar overflow al resto */
.nav{
  flex: 1 1 auto;
  min-width: 0;                /* clave para que flex permita encoger */
  overflow-x: auto;            /* si aún no entra, habilita scroll horizontal */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;       /* oculta scrollbar en Firefox */
}
.nav::-webkit-scrollbar{ display: none; }   /* oculta scrollbar en WebKit */
.nav ul{
  gap: clamp(14px, 1.8vw, 26px); /* gap fluido para ahorrar espacio */
  white-space: nowrap;           /* una sola línea (si no, usaría 2 filas) */
}

/* El texto de los links puede bajar un pelín en pantallas medianas */
@media (max-width: 1280px){
  .nav a{ font-size: .95rem; }
}
@media (max-width: 1120px){
  .nav a{ font-size: .9rem; }
}

/* Las acciones del header (Cliente/Carrito) no deben encogerse ni salirse */
.header-actions{
  flex: 0 0 auto;      /* no shrink */
  white-space: nowrap; /* evita salto raro del texto dentro de los botones */
}

/* Si aún te falta un poco, reduce ligeramente el alto del header y reajusta el body */
@media (max-width: 992px){
  :root{ --nav-h: 96px; }
  body{ padding-top: var(--nav-h); }
}

/* ===== Page hero genérico (páginas internas) ===== */
.page-hero{
  background: linear-gradient(180deg, #fafaf7 0%, #f9fbf9 60%, #f7f9f7 100%);
  padding: 48px 0 28px;          /* aire arriba/abajo */
  border-bottom: 1px solid var(--line);
}
.page-hero .container{max-width: 1200px; padding: 0 20px;}
.page-hero h1{
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.2;
  color: var(--green-900);
  margin-bottom: .6rem;
  letter-spacing: .2px;
}
.page-hero p{
  color: var(--muted);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  max-width: 60ch;
}

/* Matiz específico para la página de productos (opcional) */
.products-hero{
  background: linear-gradient(180deg, #f7faf7 0%, #f7faf7 60%, #f6f9f6 100%);
}
/* ===== Fix hero Producción (quitar overlay verde y texto legible) ===== */
.production-hero{
  /* forzamos el fondo claro, igual al de otras páginas */
  background: linear-gradient(180deg, #fafaf7 0%, #f9fbf9 60%, #f7f9f7 100%) !important;
  color: var(--green-900) !important;
}

/* si existía un pseudo-elemento que oscurecía, lo anulamos */
.production-hero::before,
.production-hero::after{
  content: none !important;
}

/* tipografía del hero */
.production-hero h1{
  color: var(--green-900) !important;
}
.production-hero p{
  color: var(--muted) !important;
}
/* ===== Fix hero Contacto: quitar overlay y usar estilo claro ===== */
.contact-hero{
  background: linear-gradient(180deg, #fafaf7 0%, #f9fbf9 60%, #f7f9f7 100%) !important;
  color: var(--green-900) !important;
}

/* anula cualquier pseudo-overlay heredado */
.contact-hero::before,
.contact-hero::after{
  content: none !important;
}

/* tipografía legible */
.contact-hero h1{
  color: var(--green-900) !important;
}
.contact-hero p{
  color: var(--muted) !important;
}
/* ===== NAV: subrayado rojo fiable (override) ===== */
.header .nav a{
  color: #fff !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
  position: relative;
  padding-bottom: .4rem; /* espacio para el subrayado */
}

/* Hover / focus: borde rojo abajo */
.header .nav a:hover,
.header .nav a:focus-visible{
  border-bottom: 3px solid var(--red-600) !important;
}

/* Activo (página actual): borde rojo fijo */
.header .nav a.active,
.header .nav a[aria-current="page"]{
  border-bottom: 3px solid var(--red-600) !important;
}
/* ===== NAV: subrayado rojo ESTABLE, sin saltos ===== */

/* Anula cualquier efecto previo que hayas probado */
.header .nav a::after { content: none !important; }
.header .nav a {
  text-decoration: none !important;
  /* Reservamos de forma permanente el espacio del subrayado */
  border-bottom: 3px solid transparent !important;
  display: inline-block;          /* evita que cambie la caja del line-box */
  line-height: 1.2;               /* altura fija del texto */
  padding-bottom: .35rem;         /* separación visual constante */
  color: #fff;                    /* tu color de nav */
}

/* Hover / focus: solo cambiamos el color del borde (no la altura) */
.header .nav a:hover,
.header .nav a:focus-visible {
  border-bottom-color: var(--red-600) !important;
}

/* Activo (página actual): borde rojo fijo */
.header .nav a.active,
.header .nav a[aria-current="page"] {
  border-bottom-color: var(--red-600) !important;
}

/* Por si algún navegador estaba recortando verticalmente el nav */
.header .nav { overflow-y: visible; }

/* === NAV que se auto-distribuye para no dejar huecos === */
.header .nav { flex: 1 1 auto; min-width: 0; }
.header .nav ul{
  flex: 1 1 auto;
  display: flex;
  /* reparte los ítems a lo largo del ancho disponible */
  justify-content: space-between;
  /* un gap mínimo para que no queden pegados */
  gap: clamp(12px, 2.2vw, 36px);
}

/* En anchos medios/pequeños, vuelve al flujo normal (alineado a la izquierda),
   para evitar separaciones demasiado grandes */
@media (max-width: 1100px){
  .header .nav ul{ justify-content: flex-start; }
}

/* ===== HERO de Ofertas (mismo look que page-hero) ===== */
.offers-hero{
  background: linear-gradient(180deg, #fafaf7 0%, #f9fbf9 60%, #f7f9f7 100%);
  padding: 48px 0 28px;
  border-bottom: 1px solid var(--line);
}

/* ===== Banner destacado ancho ===== */
.offers-banner{ padding: 24px 0; background: var(--paper); }
.offer-banner-card{
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden;
}
@media (max-width: 900px){
  .offer-banner-card{ grid-template-columns: 1fr; }
}
.ob-media{ position: relative; background: #fff; }
.ob-media img{ width:100%; height:100%; display:block; object-fit:cover; aspect-ratio: 16/9; }
.ribbon{
  position: absolute; top:12px; left:12px; z-index:2;
  background: var(--red-600); color:#fff; font-weight:800;
  padding:.4rem .6rem; border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.ob-info{ padding: 16px 16px 18px; display:flex; flex-direction:column; gap:10px; }
.ob-price{ display:flex; gap:10px; align-items:baseline; }
.ob-price .price-now{ font-size:1.8rem; font-weight:900; color:var(--green-900); }
.ob-price .price-old{ text-decoration: line-through; color: var(--muted); }
.ob-actions{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.offer-timer{ font-weight:800; color: var(--red-600); }

/* ===== Grid de ofertas ===== */
.offers-section{ padding: 28px 0 64px; background: var(--paper); }
.offers-section h2{ text-align:center; color: var(--green-900); margin-bottom: 16px; }
.offers-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.offer-card{
  background: var(--card); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.offer-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0,0,0,.10);
  border-color: #dfe6df;
}
.offer-media{ position:relative; background:#fff; border-bottom:1px solid var(--line); }
.offer-media img{ width:100%; height:220px; object-fit:cover; display:block; }
.offer-info{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.offer-info h3{ margin:0; color: var(--green-900); font-size:1.1rem; }
.offer-desc{ color: var(--muted); font-size:.95rem; min-height: 38px; }
.offer-pricing{ display:flex; gap:10px; align-items:baseline; }
.price-now{ font-size:1.35rem; font-weight:900; color:var(--green-900); }
.price-old{ text-decoration: line-through; color: var(--muted); }
.offer-meta{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ======= Colores de precio y puntito ======= */
:root{
  --price-color: #e53935;        /* ROJO del precio */
  --price-dot-color: #e53935;    /* color del puntito (verde) */
}

/* Precio en cards, listas, modales y carrito */
.price,
.product-price,
.product-card .price,
.product-card .product-price,
.product-detail-price,
.cart-item .item-price,
.cart-total .amount {
  color: var(--price-color) !important;
  font-weight: 700; /* opcional, quítalo si no lo quieres más marcado */
}

/* --- Caso A: el puntito es un elemento separado --- */
.price-dot,
.price .dot,
.product-price .dot {
  color: var(--price-dot-color) !important;      /* si es texto "•" */
  background-color: var(--price-dot-color) !important; /* si es un circulito con background */
}

/* --- Caso B: el puntito viene de un pseudo-elemento ::after --- */
.price::after,
.product-price::after {
  /* si tu CSS actual hace algo como content:"•"; aquí solo recoloreamos */
  color: var(--price-dot-color) !important;
  background-color: var(--price-dot-color) !important; /* por si el "punto" es un pequeño círculo */
}

/* (OPCIONAL) Si NO quieres mostrar el puntito, descomenta:
.price-dot,
.price .dot,
.product-price .dot,
.price::after,
.product-price::after { display:none !important; content:none !important; }
*/
/* Corrección base: ocultar componentes móviles en escritorio */
.nav-toggle{ display:none; }
.mobile-nav{ display:none; }

/* ===== Hero: alineación y respiración consistentes ===== */
.hero{ padding: 120px 0 80px; border-bottom: 1px solid var(--line); }
.hero .container.hero-wrap{
  display:flex; align-items:center; gap: 36px;
}

/* Texto con mismo ancho visual que antes */
.hero-content{
  flex:1 1 50%;
  padding: 0;                     /* ya hay padding en .container */
  max-width: 640px;               /* evita que se estire en pantallas muy anchas */
}

/* Imagen con bordes suaves y sin pegarse al borde */
.hero-image{ flex:1 1 50%; display:flex; justify-content:center; }
.inline-hero-img{
  width:100%; height:auto; display:block;
  border-radius: 14px;            /* mismo look redondeado de tus cards */
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Apilado limpio en móviles */
@media (max-width: 768px){
  .hero{ padding: 120px 0 56px; }
  .hero .container.hero-wrap{ flex-direction:column; gap: 20px; text-align:center; }
  .hero-content{ max-width: 700px; }
  .hero-image{ width:100%; }
  .inline-hero-img{ max-width: 700px; margin: 0 auto; }
}

/* Compacto solo para index */
.hero--compact{ padding: 40px 0 56px; }
@media (max-width: 768px){
  .hero--compact{ padding: 84px 0 40px; }
}

/* === Fix visibilidad TikTok (botón oscuro) === */
.social-link.tiktok{
  background: #000 !important;      /* negro TikTok */
  color: #fff !important;           /* texto/icono blancos */
}
.social-link.tiktok i,
.social-link.tiktok .icon-svg{
  color: #fff !important;
  fill: #fff !important;
}

/* ===== Hero: sello abajo-derecha de la columna izquierda ===== */
.hero .container.hero-wrap{
  display:flex; align-items:center; gap:36px;
}

.hero-content{
  position: relative;            /* contenedor de referencia para el sello */
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 640px;
  padding-bottom: 110px;         /* reserva altura para el sello */
}

.hero-content .btn-primary{ margin-bottom: 12px; }

.hero-badge{
  position: absolute;
  right: 55%;                     /* mueve hacia la derecha dentro de la columna */
  bottom: 95px;                  /* pegado al borde inferior de la columna */
  width: clamp(140px, 18vw, 220px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
  opacity: .98;
  pointer-events: none;          /* no bloquea el botón */
}

/* Responsive: en móviles lo ponemos normal y centrado si quieres */
@media (max-width: 768px){
  .hero-content{
    padding-bottom: 0;           /* ya no hace falta reservar espacio */
    align-items: center;
    text-align: center;
  }
  .hero-badge{
    position: static;
    margin-top: 10px;
    width: clamp(120px, 44vw, 180px);
  }
}

/*separacion entre hero y productos*/

/* ===== Index: compactar espacio entre HERO y "Productos Destacados" ===== */

/* 1) Compactar el hero (abajo) */
.hero{ padding-bottom: 36px !important; }         /* antes ~80px */

/* Si tu hero usa el sello/“badge”, baja un poco la reserva */
.hero .hero-content{ padding-bottom: 82px !important; }  /* antes ~110px */

/* 2) Reducir el aire de la sección siguiente */
.featured-products{
  padding-top: 28px !important;    /* antes suele estar en 60–80px */
  margin-top: 0 !important;
}

/* 3) El título de la sección sin margen extra arriba */
.featured-products h2{ margin-top: 0 !important; }

/* (Opcional) juntar un poco texto/imagen del hero */
.hero .container.hero-wrap{ gap: 24px !important; }   /* antes 36px */

/* ===== Footer Simple (sin logo ni newsletter) ===== */
.vf-footer {
  --bg:#249e43; --fg:#e6f4ea; --muted:#b8d7c2; --card:#132418; ;
  background: linear-gradient(180deg, var(--bg), #0a140d);
  color: var(--fg);
  margin-top: 3rem;
  padding: 3rem 0 1.5rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.vf-footer a { color: var(--fg); text-decoration: none; }
.vf-footer a:hover { color: var(--accent); }

.vf-footer__grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(12, 1fr);
}
.vf-col { background: transparent; }
/* 3 columnas: enlaces (4), contacto (4), redes (4) */
.vf-links   { grid-column: span 4; }
.vf-contact { grid-column: span 4; }
.vf-social  { grid-column: span 4; }

.vf-links h3, .vf-contact h3, .vf-social h3 { font-size: 1.05rem; margin-bottom: .75rem; color: #d7ffe5; }
.vf-links ul { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.vf-links li a { color: var(--muted); }
.vf-links li a:hover { color: var(--accent); }

.vf-contact__list { list-style:none; padding:0; margin:0; display:grid; gap:.35rem; }
.vf-contact__list i { width: 1.25rem; color: var(--accent); margin-right:.35rem; }
.vf-whatsapp .btn-wa {
  display:inline-flex; align-items:center; gap:.5rem;
  background:#25d366; color:#0b2412; padding:.55rem .8rem; border-radius:10px; font-weight:600;
  box-shadow: 0 8px 20px rgba(37,211,102,.25);
}
.vf-whatsapp .btn-wa i { font-size:1.1rem; }

.vf-social__row { display:flex; gap:.6rem; }
.soc {
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background: var(--card); color:#fff; transition: transform .15s ease, background .2s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.soc:hover { transform: translateY(-2px); }
.soc.fb { background:#1877f2; }
.soc.tt { background:#000; }
.soc.wa { background:#25d366; color:#0b2412; }

.vf-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 2rem; padding-top: 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  color: var(--muted); font-size:.95rem;
}
.vf-legal { display:flex; align-items:center; gap:.5rem; }
.vf-legal a { color: var(--muted); }
.vf-legal a:hover { color: var(--accent); }

/* Responsive */
@media (max-width: 900px){
  .vf-footer__grid { grid-template-columns: 1fr; }
  .vf-links, .vf-contact, .vf-social { grid-column: 1 / -1; }
  .vf-footer__bottom { flex-direction: column; text-align:center; }
}



/* ====== Galería de fotos en "Nuestro Vivero" ====== */
.photo-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 18px;
}
.photo{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  aspect-ratio: 4/3; /* todas parejitas */
}
.photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
  display: block;
}
.photo:hover img{
  transform: scale(1.05);
  filter: saturate(1.05);
}

/* === Sello del hero: posición estable, sin depender del ancho de pantalla === */
.hero-content{
  position: relative;                /* referencia para el sello */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* reserva espacio para que el sello no se salga del hero */
  padding-bottom: 96px;              /* ajusta si tu sello es más alto/bajo */
}

.hero-content .btn-primary{ margin-bottom: 14px; }

.hero-badge{
  position: absolute;
  right: 16px;                       /* fijo: no usa % */
  bottom: -16px;                      /* fijo: no usa % */
  width: clamp(140px, 18vw, 220px);  /* escala suave, con límites */
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
  opacity: .98;
  pointer-events: none;              /* no bloquea clics del botón/texto */
}

/* En móvil: lo dejamos en flujo normal para evitar apretarlo */
@media (max-width: 768px){
  .hero-content{
    padding-bottom: 0;               /* sin reserva en móvil */
    align-items: center;
    text-align: center;
  }
  .hero-badge{
    position: static;
    margin-top: 10px;
    width: clamp(120px, 44vw, 180px);
  }
}

/* Ofertas: imágenes sin recorte */
.offers-section .offer-media{
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--line);
}
.offers-section .offer-media img{
  width:100%;
  height:auto;            /* ← quita altura fija */
  max-height:260px;       /* ← límite para no crecer de más */
  object-fit:contain;     /* ← sin recorte */
  padding:8px;            /* marquito respirando */
  display:block;
}