/* App-like public UI layer: additive and reversible */
@media(max-width:650px){
  .mobile-navigation{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:3px!important;padding-inline:5px!important}
  .mobile-navigation a{font-size:.68rem!important}
  body.has-app-navigation{padding-bottom:calc(82px + env(safe-area-inset-bottom))}
  body.has-app-navigation .push-invitation{bottom:calc(82px + env(safe-area-inset-bottom))!important;z-index:70!important;max-height:calc(100dvh - 108px - env(safe-area-inset-bottom))!important}
  body.has-app-navigation.keyboard-open .push-invitation{bottom:max(16px,env(safe-area-inset-bottom))!important}
}
.app-hub{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0 30px}
.app-hub a{display:flex;min-height:112px;flex-direction:column;justify-content:space-between;padding:16px;border:1px solid #dce6df;border-radius:22px;background:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(20,47,42,.045)}
.app-hub a:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,47,42,.08)}.app-hub-icon{font-size:1.45rem}.app-hub strong{font-size:1rem}.app-hub small{color:#68756f;line-height:1.35}
.home-compact-copy{max-width:560px!important}
@media(max-width:760px){.app-hub{grid-template-columns:repeat(2,minmax(0,1fr))}.app-hub a{min-height:100px}}
@media(max-width:650px){.app-hub{margin:14px 0 24px;gap:8px}.app-hub a{padding:14px;border-radius:19px}.intro .lead.home-compact-copy{max-width:34ch!important}}

/* === GLOBAL APP PREMIUM 2026-10-06 === */
:root{
  --app-ink:#17352c;
  --app-deep:#154936;
  --app-green:#1b5c45;
  --app-soft:#f2f7f4;
  --app-soft-2:#f8fbf9;
  --app-line:#dbe6df;
  --app-shadow:0 14px 34px rgba(20,47,42,.07);
  --app-shadow-strong:0 20px 48px rgba(20,47,42,.11);
}

body:not(.promo-landing-body){
  background:
    radial-gradient(circle at 10% -5%,rgba(23,78,62,.07),transparent 24rem),
    radial-gradient(circle at 100% 12%,rgba(210,143,91,.065),transparent 26rem),
    linear-gradient(180deg,#fbfcfa 0%,#f7faf8 100%);
}

.header{
  border:1px solid rgba(20,47,42,.075)!important;
  box-shadow:0 12px 32px rgba(20,47,42,.075)!important;
}

main:not(.promo-page){
  max-width:1180px;
}

.intro{
  box-shadow:var(--app-shadow)!important;
}

.app-hub{
  gap:12px;
}

.app-hub a{
  position:relative;
  overflow:hidden;
  min-height:122px;
  border:0;
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%,rgba(28,92,69,.08),transparent 9rem),
    linear-gradient(145deg,#fff 0%,#f8fbf9 100%);
  box-shadow:var(--app-shadow);
  transition:transform .18s ease,box-shadow .18s ease;
}

.app-hub a::after{
  content:"";
  position:absolute;
  width:90px;height:90px;
  border-radius:50%;
  border:16px solid rgba(23,78,62,.045);
  right:-35px;top:-40px;
}

.app-hub a:hover{
  transform:translateY(-4px);
  box-shadow:var(--app-shadow-strong);
}

.app-hub-icon{
  position:relative;
  z-index:1;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:14px;
  background:#edf5f0;
  font-size:1.18rem;
}

.app-hub strong{
  position:relative;z-index:1;
  font-size:1.08rem;
  letter-spacing:-.02em;
}

.app-hub small{
  position:relative;z-index:1;
  max-width:18ch;
  color:#67766f;
}

.catalog-heading{
  margin-top:34px!important;
}

.catalog-heading h2{
  font-size:clamp(1.55rem,3vw,2rem)!important;
  letter-spacing:-.045em!important;
}

.catalog-search{
  display:block;
  padding:16px;
  border:1px solid var(--app-line);
  border-radius:22px;
  background:#fff;
  box-shadow:var(--app-shadow);
  color:#64736c;
  font-weight:750;
}

.catalog-search input{
  margin-top:9px;
  min-height:54px;
  border:1px solid #d9e5dd!important;
  border-radius:16px!important;
  background:#f9fbfa!important;
  box-shadow:none!important;
}

.filters-panel{
  border:1px solid var(--app-line);
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 28px rgba(20,47,42,.045);
}

.filters-panel label{
  font-weight:800;
  color:#56675f;
}

.filters-panel select{
  min-height:48px;
  border-radius:14px!important;
  border:1px solid #dbe6df!important;
  background:#f9fbfa!important;
}

.quick-filters{
  gap:9px!important;
}

.quick-filters button,
.clear-filters{
  border-radius:999px!important;
  min-height:42px!important;
  font-weight:800!important;
}

.quick-filters button.active{
  box-shadow:0 7px 16px rgba(23,78,62,.16);
}

.offers{
  gap:16px!important;
}

.offers .card{
  position:relative;
  overflow:hidden;
  border:0!important;
  border-radius:26px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(23,78,62,.055),transparent 12rem),
    linear-gradient(145deg,#fff 0%,#fbfdfc 100%)!important;
  box-shadow:var(--app-shadow)!important;
}

.offers .card::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:5px;
  background:linear-gradient(180deg,#1c684e,#9ac7b3);
}

.brand-visual{
  padding-top:14px!important;
}

.brand-visual .brand-identity{
  border:0!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:0 8px 20px rgba(20,47,42,.055);
}

.card .brand-visual .amount{
  background:linear-gradient(145deg,#173f32,#22604b)!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 10px 22px rgba(23,78,62,.18);
}

.card h4{
  letter-spacing:-.025em;
}

.card .detail{
  color:#61716a;
}

.coupon{
  border-radius:16px!important;
  background:#f9fcfa!important;
  border-color:#9eb5a8!important;
}

.visit{
  border-radius:16px!important;
  background:linear-gradient(180deg,#195b44 0%,#154936 100%)!important;
  box-shadow:0 9px 20px rgba(23,78,62,.17);
}

.brand-directory,
.assistant-box,
.newsletter,
.push-signup,
.comparison-invitation,
.trust div,
.brand-main-offer,
.secondary-offer{
  border-color:var(--app-line)!important;
  box-shadow:var(--app-shadow)!important;
  background:linear-gradient(145deg,#fff,#f9fcfa)!important;
}

.brand-directory,
.assistant-box,
.newsletter,
.push-signup,
.comparison-invitation,
.brand-main-offer{
  border-radius:24px!important;
}

.brand-directory summary,
.assistant-box summary,
.push-signup summary,
.newsletter summary{
  font-weight:850!important;
}

#brand-directory button{
  border:1px solid #dfe8e2!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 6px 16px rgba(20,47,42,.04);
}

.directory-mark{
  border-radius:14px!important;
  border:0!important;
  box-shadow:0 5px 14px rgba(20,47,42,.05);
}

.comparison-invitation{
  background:
    radial-gradient(circle at 100% 0%,rgba(23,78,62,.08),transparent 12rem),
    linear-gradient(145deg,#f1f7f3,#fff)!important;
}

.comparison-invitation>a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:10px 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #d9e4dd;
  text-decoration:none;
}

.brand-page{
  max-width:920px!important;
}

.brand-heading{
  padding:18px;
  border-radius:22px;
  background:linear-gradient(145deg,#fff,#f7fbf9);
  box-shadow:var(--app-shadow);
}

.brand-page-logo{
  border:0!important;
  box-shadow:0 8px 20px rgba(20,47,42,.06);
}

.brand-tools button{
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 14px rgba(20,47,42,.04);
}

.contact-page,
.legal-page{
  max-width:920px;
}

.contact-card,
.contact-note{
  border-radius:24px!important;
  box-shadow:var(--app-shadow)!important;
}

.public-footer{
  border-radius:26px 26px 0 0;
}

@media(max-width:650px){
  main:not(.promo-page){padding-inline:12px!important}

  .app-hub{
    gap:9px;
  }

  .app-hub a{
    min-height:108px;
    padding:14px;
    border-radius:20px;
  }

  .app-hub-icon{
    width:38px;height:38px;border-radius:12px;
  }

  .catalog-search{
    padding:13px;
    border-radius:19px;
  }

  .filters-panel{
    border-radius:19px!important;
    padding:12px!important;
  }

  .offers .card{
    border-radius:22px!important;
    padding:17px!important;
  }

  .brand-directory,
  .assistant-box,
  .newsletter,
  .push-signup,
  .comparison-invitation,
  .brand-main-offer{
    border-radius:20px!important;
  }

  .mobile-navigation{
    box-shadow:0 -14px 34px rgba(20,47,42,.11)!important;
    background:rgba(255,255,255,.95)!important;
  }

  .mobile-navigation a{
    border-radius:14px!important;
  }

  .mobile-navigation a[aria-current]{
    background:#eaf4ee!important;
    color:#154936!important;
  }
}

@media(hover:hover) and (pointer:fine){
  .offers .card:hover,
  #brand-directory button:hover{
    transform:translateY(-3px);
    box-shadow:var(--app-shadow-strong)!important;
  }
}

/* === MENU MODERN / DISCOUNTS ONLY 2026-10-06 === */

.menu-modern-panel{
  padding:18px !important;
  border-radius:28px !important;
  border:1px solid #dce7df !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(23,78,62,.08), transparent 12rem),
    linear-gradient(145deg,#ffffff 0%,#f7fbf8 100%) !important;
  box-shadow:0 18px 42px rgba(20,47,42,.10) !important;
  backdrop-filter:blur(8px);
}

.menu-modern-close{
  min-height:56px !important;
  padding:0 18px !important;
  border-radius:18px !important;
  border:1px solid #d7e3dc !important;
  background:#ffffff !important;
  color:#17352c !important;
  font-weight:850 !important;
  box-shadow:0 8px 18px rgba(20,47,42,.06) !important;
}

.menu-modern-link{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-height:62px !important;
  margin:0 0 12px !important;
  padding:16px 18px !important;
  border-radius:20px !important;
  border:1px solid #e1eae4 !important;
  background:#ffffff !important;
  color:#17352c !important;
  text-decoration:none !important;
  font-weight:850 !important;
  box-shadow:0 8px 18px rgba(20,47,42,.05) !important;
}

.menu-modern-link--primary{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  min-height:58px !important;
  margin:4px 0 14px !important;
  padding:14px 18px !important;
  border-radius:20px !important;
  border:0 !important;
  background:linear-gradient(145deg,#184f3d 0%,#1f684f 100%) !important;
  color:#ffffff !important;
  text-decoration:none !important;
  font-weight:900 !important;
  box-shadow:0 14px 24px rgba(23,78,62,.20) !important;
}

.menu-modern-link--primary *{
  color:#ffffff !important;
}

.menu-modern-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:34px !important;
  height:34px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:#edf5f0 !important;
  color:#17352c !important;
  font-weight:900 !important;
}

.mobile-navigation{
  background:rgba(255,255,255,.96) !important;
  box-shadow:0 -14px 34px rgba(20,47,42,.10) !important;
}

.mobile-navigation a{
  border-radius:16px !important;
  color:#5a6e65 !important;
}

.mobile-navigation a[aria-current],
.mobile-navigation a.active,
.mobile-navigation a.is-active{
  background:linear-gradient(145deg,#184f3d 0%,#1f684f 100%) !important;
  color:#ffffff !important;
  box-shadow:0 10px 20px rgba(23,78,62,.18) !important;
}

.mobile-navigation a[aria-current] *,
.mobile-navigation a.active *,
.mobile-navigation a.is-active *{
  color:#ffffff !important;
  stroke:currentColor !important;
  fill:none !important;
}

@media (max-width:650px){
  .menu-modern-panel{
    padding:16px !important;
    border-radius:24px !important;
  }

  .menu-modern-link{
    min-height:58px !important;
    padding:14px 16px !important;
    border-radius:18px !important;
  }

  .menu-modern-link--primary{
    min-height:56px !important;
    border-radius:18px !important;
  }
}

/* === HOME DISCOUNTS APP FINAL 2026-10-07 === */

.app-hub-discounts{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.app-hub-discounts a{
  min-height:132px;
  padding:17px;
}

.app-hub-mark{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:15px;
  background:linear-gradient(145deg,#173f32,#23604b);
  color:#fff;
  font-size:1.15rem;
  font-weight:950;
  box-shadow:0 9px 18px rgba(23,78,62,.17);
}

.app-hub-discounts strong{
  margin-top:auto;
  font-size:1.1rem;
}

.app-hub-discounts small{
  margin-top:4px;
}

.catalog-heading{
  padding-top:4px;
}

.catalog-search{
  margin-top:14px!important;
}

.catalog-search > span{
  display:block;
  font-size:.83rem;
  font-weight:900;
  letter-spacing:.02em;
  color:#52665d;
}

#toggle-filters{
  margin-top:12px;
  border:1px solid #d9e5dd;
  border-radius:999px;
  background:#fff;
  color:#244b3d;
  min-height:42px;
  padding:8px 15px;
  font-weight:850;
}

.catalog-results{
  padding:0 3px;
}

.catalog-results #result-count{
  font-weight:850;
  color:#244b3d;
}

@media(max-width:650px){
  .intro{
    padding:22px 18px!important;
  }

  .intro .eyebrow{
    font-size:.68rem!important;
  }

  .intro h1{
    font-size:clamp(36px,10.8vw,46px)!important;
    margin:16px 0 12px!important;
  }

  .intro .lead{
    line-height:1.45!important;
  }

  .home-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    margin-top:18px!important;
  }

  .home-actions .visit,
  .home-actions > a{
    width:100%!important;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0!important;
    border-radius:16px!important;
    text-decoration:none;
  }

  .home-actions > a:not(.visit){
    background:#fff;
    border:1px solid #d9e4dd;
  }

  .app-hub-discounts{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .app-hub-discounts a{
    min-height:118px;
    padding:14px;
  }

  .app-hub-mark{
    width:42px;
    height:42px;
    border-radius:13px;
  }

  .catalog-heading{
    margin-top:27px!important;
  }

  .catalog-heading h2{
    font-size:1.75rem!important;
  }
}

/* === CHOLLO NEON FINAL === */

:root{
  --neon:#48f3a0;
  --neon2:#13d97a;
  --deep:#103a2e;
  --chrome:#aab9b4;
}

/* PORTADA: contornos cromados realmente visibles */
.app-hub a,
.catalog-search,
.filters-panel,
.offers .card{
  border:2px solid transparent !important;

  background:
    linear-gradient(#ffffff,#f8fcfa) padding-box,
    linear-gradient(
      125deg,
      #ffffff 0%,
      #879d95 18%,
      #eaf1ee 34%,
      #48f3a0 50%,
      #eef4f1 65%,
      #8ca49b 82%,
      #ffffff 100%
    ) border-box !important;

  box-shadow:
    0 15px 32px rgba(13,55,42,.10),
    0 0 18px rgba(72,243,160,.10) !important;
}

/* ACCESOS PRINCIPALES */
.app-hub-mark{
  color:#effff7 !important;

  background:
    radial-gradient(circle at 30% 10%,rgba(255,255,255,.25),transparent 28%),
    linear-gradient(145deg,#0d3529,#17634a 58%,#0d3026) !important;

  border:1px solid rgba(72,243,160,.75) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 18px rgba(72,243,160,.28),
    0 9px 22px rgba(12,65,47,.25) !important;
}

/* DESCUENTOS */
.card .brand-visual .amount{
  border:1px solid rgba(72,243,160,.72) !important;

  background:
    radial-gradient(circle at 30% 12%,rgba(255,255,255,.22),transparent 30%),
    linear-gradient(145deg,#0c3429,#176249 60%,#0d3026) !important;

  box-shadow:
    0 0 22px rgba(72,243,160,.22),
    0 12px 24px rgba(11,60,44,.24) !important;
}

/* BOTONES ACTIVOS */
.quick-filters button.active,
.mobile-navigation a[aria-current]{
  color:#fff !important;
  border:1px solid rgba(72,243,160,.72) !important;

  background:
    linear-gradient(145deg,#0d3529,#17634a 62%,#0e3127) !important;

  box-shadow:
    0 0 18px rgba(72,243,160,.22),
    0 9px 20px rgba(12,65,47,.22) !important;
}

/* BARRA APP SIEMPRE VISIBLE */
@media(max-width:650px){

  .mobile-navigation{
    position:fixed !important;
    display:grid !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    z-index:9999 !important;

    grid-template-columns:repeat(5,minmax(0,1fr)) !important;

    padding:
      7px 6px
      calc(7px + env(safe-area-inset-bottom))
      !important;

    background:rgba(255,255,255,.97) !important;

    border-top:1px solid rgba(72,243,160,.22) !important;

    backdrop-filter:
      blur(20px)
      saturate(150%);

    box-shadow:
      0 -15px 38px rgba(9,48,36,.15) !important;
  }

  body.has-app-navigation{
    padding-bottom:
      calc(82px + env(safe-area-inset-bottom))
      !important;
  }
}

/* === ICONS + STICKY NAV REFINEMENT 2026-10-07 === */

.app-hub-mark svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.app-hub-mark{
  width:48px!important;
  height:48px!important;
  border-radius:15px!important;
}

/* barra inferior igual de ligera que Promos */
@media(max-width:650px){

  .mobile-navigation{
    height:auto!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:3px!important;

    padding:
      7px 6px
      calc(7px + env(safe-area-inset-bottom))
      !important;

    background:rgba(255,255,255,.97)!important;
    backdrop-filter:blur(18px) saturate(145%)!important;

    border-top:1px solid rgba(80,150,118,.18)!important;

    box-shadow:
      0 -14px 34px rgba(9,48,36,.10)
      !important;
  }

  .mobile-navigation a{
    min-height:52px!important;
    padding:5px 2px!important;
    gap:3px!important;

    border-radius:15px!important;

    font-size:.67rem!important;
    font-weight:800!important;

    color:#5c6e67!important;
  }

  .mobile-navigation svg{
    width:22px!important;
    height:22px!important;
    stroke-width:1.7!important;
  }

  .mobile-navigation a[aria-current]{
    color:#effff6!important;

    border:1px solid rgba(72,243,160,.38)!important;

    background:
      linear-gradient(
        145deg,
        #10392d,
        #176047 65%,
        #123f32
      )!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 7px 18px rgba(15,72,53,.17),
      0 0 13px rgba(72,243,160,.10)
      !important;
  }

  .mobile-navigation a[aria-current] svg{
    stroke:#effff6!important;
  }
}

/* === GLOBAL VIDEO + PROMO CARD LANGUAGE 2026-10-07 === */

.video-slot{
  padding-top:10px !important;
}

.global-video-action,
.brand-video-action{
  position:relative !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  gap:12px !important;

  width:100% !important;
  min-height:56px !important;

  margin-top:11px !important;
  padding:12px 16px !important;

  border:1px solid transparent !important;
  border-radius:17px !important;

  background:
    linear-gradient(#fbfdfc,#f3f9f5) padding-box,
    linear-gradient(
      135deg,
      #ffffff,
      #a5b8b0 27%,
      #48f3a0 50%,
      #eef5f1 74%,
      #8fa69d
    ) border-box !important;

  color:#153e31 !important;

  text-decoration:none !important;
  text-align:center !important;

  font-size:.95rem !important;
  font-weight:900 !important;

  box-shadow:
    0 9px 20px rgba(14,56,42,.07),
    0 0 14px rgba(72,243,160,.07) !important;
}

.global-video-action::before,
.brand-video-action::before{
  content:"" !important;

  flex:0 0 29px !important;

  width:29px !important;
  height:21px !important;

  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;

  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 21'><rect x='1' y='1' width='27' height='19' rx='6' fill='%23FF0033'/><path d='M12 6.2L18.7 10.5 12 14.8V6.2Z' fill='white'/></svg>") !important;
}

.global-video-action.is-open::before,
.brand-video-action.is-open::before{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 29 21'><rect x='1' y='1' width='27' height='19' rx='6' fill='%23B80E2B'/><path d='M9 6H12V15H9Z' fill='white'/><path d='M17 6H20V15H17Z' fill='white'/></svg>") !important;
}

.global-video-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.global-video-player{
  position:relative;

  width:100%;
  aspect-ratio:16 / 9;

  margin-top:10px;

  overflow:hidden;

  border:1px solid rgba(72,243,160,.35);
  border-radius:18px;

  background:#07120f;

  box-shadow:
    0 15px 32px rgba(8,40,30,.20),
    0 0 18px rgba(72,243,160,.09);
}

.global-video-player iframe{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  border:0;
}

/* Las tarjetas normales heredan el aspecto de Promos */
.offers .card,
.brand-main-offer,
.secondary-offer{
  border:2px solid transparent !important;

  background:
    linear-gradient(#fff,#f9fcfa) padding-box,
    linear-gradient(
      125deg,
      #fff 0%,
      #8fa69d 18%,
      #edf3f0 36%,
      #48f3a0 50%,
      #edf3f0 66%,
      #8fa69d 82%,
      #fff 100%
    ) border-box !important;

  box-shadow:
    0 16px 36px rgba(13,55,42,.09),
    0 0 16px rgba(72,243,160,.07) !important;
}

@media(max-width:650px){

  .global-video-action,
  .brand-video-action{
    min-height:54px !important;
    padding:11px 14px !important;
    border-radius:16px !important;
  }

  .global-video-player{
    border-radius:16px;
  }
}
