/* MARYMAR DIGITAL – actualización visual de la portada 2026-10-20.
   Mantiene intacta la lógica del sistema y el CSS base.
   Imagen REAL ilustrativa de supermercado: Nathália Rosa / Unsplash
   https://unsplash.com/photos/grocery-store-aisle-with-stocked-shelves-rWMIbqmOxrY
   Se puede reemplazar por una fotografía del local de MARYMAR.
*/

/* Identidad de marca: reemplazar la M circular por la cabeza original del vacuno */
.site-header .brand{gap:12px}
.site-header .marymar-brand-cow{
  display:block; width:74px; height:68px; object-fit:contain; flex:none;
  filter:drop-shadow(0 2px 1px rgba(0,31,105,.10));
}
.site-header .brand-text strong{
  color:#ec1e2d; font-weight:950; font-size:1.82rem; letter-spacing:.01em;
}
.site-header .brand-text small{color:#0a398d; font-weight:800; letter-spacing:.005em}

/* Fotografía real de supermercado + velo para mantener contraste de texto */
.marymar-home-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(260px,.65fr);
  gap:28px;
  min-height:405px;
  padding:46px 48px;
  background-color:#063b81;
  background-image:
    linear-gradient(98deg,rgba(2,28,73,.97) 0%,rgba(3,40,93,.88) 45%,rgba(4,38,83,.57) 72%,rgba(4,27,63,.45) 100%),
    url("https://images.unsplash.com/photo-1578916171728-46686eac8d58?auto=format&fit=crop&fm=jpg&w=1900&q=82");
  background-position:center,center 45%;
  background-repeat:no-repeat;
  background-size:cover;
  box-shadow:0 15px 42px rgba(5,35,80,.19);
}
.marymar-hero-copy{position:relative;z-index:1;min-width:0}
.marymar-home-hero .eyebrow{
  background:#ed2030;
  color:white;
  display:inline-block;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.085em;
  padding:9px 16px;
  border-radius:40px;
}
.marymar-home-hero h1{
  font-size:clamp(2.2rem,4.25vw,3.45rem);
  line-height:1.09;
  letter-spacing:-.035em;
  max-width:750px;
  margin:22px 0 20px;
  font-weight:900;
  text-wrap:balance;
  text-shadow:0 2px 14px rgba(0,0,0,.26);
}
.marymar-home-hero h1 em{color:#ff4350;font-style:normal}
.marymar-home-hero p{
  max-width:590px;
  font-size:clamp(1rem,1.6vw,1.16rem);
  line-height:1.55;
  margin:0;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.25);
}
.marymar-home-hero .hero-actions{gap:13px;margin:25px 0 0}
.marymar-home-hero .hero-actions .btn{
  min-height:48px;
  font-size:.94rem;
  padding:14px 23px;
  border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  transition:transform .15s ease,box-shadow .15s ease;
}
.marymar-home-hero .hero-actions .btn:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.23)}
.marymar-home-hero .marymar-btn-primary{background:#ec2030}
.marymar-home-hero .marymar-btn-secondary{color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.8)}
.marymar-home-hero .marymar-hero-highlights{display:flex;flex-wrap:wrap;gap:12px 20px;margin-top:26px;font-weight:760;font-size:.85rem;color:#f3f8ff}
.marymar-home-hero .marymar-hero-highlights span{white-space:nowrap}
.marymar-hero-side{display:flex;align-items:center;justify-content:end;min-width:0;position:relative;z-index:1}
.marymar-hero-glass{
  width:min(100%,278px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:22px 20px;
  border:1px solid rgba(255,255,255,.50);
  border-radius:22px;
  background:rgba(250,252,255,.91);
  box-shadow:0 18px 32px rgba(0,20,60,.3);
  backdrop-filter:blur(8px);
  color:#00367f;
}
.marymar-hero-glass img{display:block;height:82px;width:104px;object-fit:contain;margin-bottom:4px}
.marymar-hero-glass strong{font-size:1.35rem;line-height:1.2;letter-spacing:.025em;color:#ed2132;font-weight:950}
.marymar-hero-glass strong span{color:#063b8d}
.marymar-hero-glass small{color:#445a78;margin-top:5px;font-weight:650}
.marymar-hero-mini-list{display:grid;gap:7px;width:100%;text-align:left;margin-top:16px;padding-top:13px;border-top:1px solid #d8e3f2}
.marymar-hero-mini-list span{font-size:.82rem;font-weight:700;color:#233952;padding:5px 7px;background:#f3f7fe;border-radius:7px}
.marymar-home-hero + .advantages{margin-top:18px}
.marymar-home-hero + .advantages > div{border-top:3px solid #ee2134;padding:16px}

@media (max-width:1000px){
  .marymar-home-hero{grid-template-columns:minmax(0,1.6fr) minmax(205px,.7fr);padding:35px 31px;gap:12px}
  .marymar-home-hero h1{font-size:clamp(2.05rem,4.6vw,3rem)}
  .marymar-hero-glass{padding:15px 11px}
  .site-header .marymar-brand-cow{width:61px;height:59px}
}
@media (max-width:720px){
  .site-header .brand{gap:7px}
  .site-header .marymar-brand-cow{width:53px;height:51px}
  .site-header .brand-text strong{font-size:1.35rem}
  .site-header .brand-text small{font-size:.56rem}
  .marymar-home-hero{
    grid-template-columns:1fr;
    padding:28px 22px;
    gap:0;
    min-height:370px;
    background-image:
      linear-gradient(100deg,rgba(2,28,73,.94),rgba(3,32,81,.72)),
      url("https://images.unsplash.com/photo-1578916171728-46686eac8d58?auto=format&fit=crop&fm=jpg&w=1100&q=78");
    background-position:center,center;
  }
  .marymar-home-hero .eyebrow{font-size:.59rem;letter-spacing:.04em;padding:8px 12px}
  .marymar-home-hero h1{font-size:clamp(2.08rem,7.9vw,2.8rem);margin:20px 0 15px}
  .marymar-home-hero p{font-size:.96rem}
  .marymar-home-hero .hero-actions{margin-top:22px;gap:9px}
  .marymar-home-hero .hero-actions .btn{font-size:.86rem;padding:12px 14px;min-height:44px}
  .marymar-home-hero .marymar-hero-highlights{font-size:.75rem;gap:9px 15px;margin-top:20px}
  .marymar-hero-side{display:none}
  .marymar-home-hero + .advantages>div{padding:11px 7px}
}
@media (prefers-reduced-motion:reduce){.marymar-home-hero .hero-actions .btn{transition:none}}