@charset "UTF-8";
/* ============================================================================
   SUPERMERCADO BARRÓN · Hoja de estilos
   Sistema visual base: ION GROUP  (misma familia que Capital's Barber)
   FONDO BLANCO · Paleta corporativa:
     ROJO REY (#C8102E) + AMARILLO REY (#FFC72C) + AZUL REY (#0B4EA2) + BLANCO
   Degradados de marca: amarillo → naranja → rojo  (solo en detalles y bordes)
   Mobile first · sin dependencias externas · sin fuentes descargables
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Tokens */
:root{
  /* Colores corporativos */
  --red:       #C8102E;   /* rojo rey  */
  --red-2:     #E01B24;
  --red-deep:  #9C0C22;
  --yellow:    #FFC72C;   /* amarillo rey */
  --yellow-2:  #F2A413;
  --blue:      #0B4EA2;   /* azul rey */
  --blue-2:    #1D63C9;
  --white:     #FFFFFF;

  /* Superficies (tema claro) */
  --bg:        #FFFFFF;
  --bg-soft:   #FFFBF4;
  --bg-tint:   #F5F7FA;
  --line:      rgba(17,24,39,.10);
  --line-2:    rgba(17,24,39,.07);
  --line-str:  rgba(17,24,39,.16);

  /* Texto (contraste verificado sobre fondo blanco) */
  --text:   #14161A;   /* 16.6:1 */
  --muted:  #5A6270;   /* 6.0:1  */
  --muted-2:#6E7684;   /* 4.8:1  */

  /* Degradado de marca (amarillo → naranja → rojo) */
  --grad:      linear-gradient(115deg, #FFC72C 0%, #F2A413 45%, #C8102E 100%);
  --grad-soft: linear-gradient(115deg, rgba(255,199,44,.16), rgba(242,164,19,.14) 45%, rgba(200,16,46,.14) 100%);
  --grad-blue: linear-gradient(115deg, #1D63C9 0%, #0B4EA2 100%);
  --grad-red:  linear-gradient(115deg, #E01B24 0%, #C8102E 55%, #A80D22 100%);

  /* Formas */
  --r-lg: 24px;
  --r-md: 20px;
  --r-sm: 15px;

  /* Sombras (suaves, para fondo blanco) */
  --shadow:    0 8px 22px -12px rgba(17,24,39,.20);
  --shadow-lg: 0 16px 34px -16px rgba(17,24,39,.28);
  --shadow-red:0 14px 30px -14px rgba(200,16,46,.45);
  --shadow-blue:0 14px 30px -14px rgba(11,78,162,.50);

  /* Movimiento */
  --ease: cubic-bezier(.22,1,.36,1);
  --t: .26s var(--ease);

  /* Layout */
  --shell: 460px;
  --pad: 16px;
}

/* ---------------------------------------------------------------- 2. Base */
*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100svh;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px;
  line-height:1.45;
  letter-spacing:.1px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeSpeed;
  overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}

/* Franja superior con el degradado de la marca */
body::before{
  content:"";
  position:fixed; top:0; left:0; right:0; height:5px;
  background:var(--grad);
  z-index:40;
  pointer-events:none;
}

img{ max-width:100%; height:auto; display:block; }
[hidden]{ display:none !important; } /* para que el atributo hidden gane a "img{display:block}" */
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
h1,p{ margin:0; }

/* Brillos suaves de fondo (capa fija, no afecta el scroll) */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg__glow{ position:absolute; display:block; border-radius:50%; filter:blur(64px); }
.bg__glow--top{
  width:320px; height:320px; top:-150px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(255,199,44,.42), transparent 68%);
}
.bg__glow--mid{
  width:300px; height:300px; top:38%; right:-160px;
  background:radial-gradient(circle, rgba(11,78,162,.13), transparent 70%);
}
.bg__glow--bottom{
  width:420px; height:420px; bottom:-200px; left:50%; transform:translateX(-50%);
  background:radial-gradient(circle, rgba(200,16,46,.14), transparent 70%);
}

.shell{
  position:relative; z-index:1;
  width:100%; max-width:var(--shell);
  margin:0 auto;
  padding:calc(28px + env(safe-area-inset-top)) var(--pad) 0;
}

.skip{ position:absolute; left:-9999px; }
.skip:focus{
  left:12px; top:12px; z-index:99; padding:10px 14px; border-radius:10px;
  background:#fff; color:var(--text); border:1px solid var(--line-str);
  box-shadow:var(--shadow);
}

/* ---------------------------------------------------------------- 3. Animación */
@keyframes rise{
  from{ opacity:0; transform:translate3d(0,16px,0) scale(.985); }
  to  { opacity:1; transform:none; }
}
.rise{ animation:rise .5s var(--ease) both; animation-delay:var(--d,0s); }

@keyframes sheen{
  0%   { transform:translateX(-130%) skewX(-18deg); opacity:0; }
  22%  { opacity:.45; }
  60%  { transform:translateX(230%) skewX(-18deg); opacity:0; }
  100% { transform:translateX(230%) skewX(-18deg); opacity:0; }
}
@keyframes pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%    { transform:scale(1.5); opacity:.35; }
}

/* ---------------------------------------------------------------- 4. Cabecera */
.hero{ text-align:center; padding-bottom:6px; }

/* Franja superior con el degradado de marca (como la tarjeta física NFC):
   insignia + medallón + destellos, rematada en una curva blanca */
.hero__top{
  position:relative;
  overflow:hidden;
  margin:2px 0 0;
  padding:22px 18px 54px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  background:var(--grad);
}
/* Curva blanca que "sube" desde abajo, hecha con una elipse ancha recortada */
.hero__top::after{
  content:"";
  position:absolute;
  left:-25%; right:-25%; bottom:-64px;
  height:96px;
  background:var(--bg);
  border-radius:50%;
}

/* Etiqueta de ubicación, arriba a la izquierda del degradado */
.hero__place{
  position:relative; z-index:1;
  display:inline-flex; float:left; margin:0;
  padding:6px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.85);
  color:var(--red-deep);
  font-size:11px; font-weight:900; letter-spacing:.2em; text-transform:uppercase;
  box-shadow:0 4px 10px -4px rgba(90,10,20,.35);
  animation:rise .5s var(--ease) both;
}

.hero__logo{
  position:relative; z-index:1;
  width:clamp(170px, 49vw, 206px);
  margin:44px auto 0;
  aspect-ratio:1/1;
  display:grid;
  place-items:center;
  animation:rise .65s var(--ease) both;
}
/* Medallón sólido con el degradado de marca (amarillo → naranja → rojo)
   y un aro blanco, como en la tarjeta física NFC */
.hero__ring{
  position:absolute; inset:0;
  border-radius:50%;
  background:var(--grad);
  box-shadow:0 0 0 6px #fff, var(--shadow-red);
}
/* La mascota se apoya con una sombra neutra y corta, un poco más chica
   que el medallón para que se note el degradado alrededor */
.hero__img{
  position:relative;
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  filter:drop-shadow(0 10px 16px rgba(23,26,33,.25));
  animation:rise .7s var(--ease) both;
}
/* Destellos decorativos alrededor del medallón */
.hero__spark{
  position:absolute;
  color:#fff;
  filter:drop-shadow(0 2px 3px rgba(154,60,10,.35));
  animation:pulse 3.2s ease-in-out infinite;
}
.hero__spark svg{ display:block; width:100%; height:100%; }
.hero__spark--a{ width:16px; height:16px; top:2%; left:-4%; animation-delay:.2s; }
.hero__spark--b{ width:11px; height:11px; top:22%; right:-6%; opacity:.85; animation-delay:1.1s; }
/* Reserva visual mientras se carga el PNG de la mascota */
.hero__slot{
  position:absolute; inset:8%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  border:1.5px dashed var(--line-str);
  border-radius:var(--r-lg);
  color:var(--muted-2);
  background:#fff;
}
.hero__slot svg{ width:30px; height:30px; }
.hero__slot small{ font-size:10.5px; letter-spacing:.16em; font-weight:800; }

/* Nombre de marca: "Supermercado" pequeño + "Barrón" grande, como en la
   tarjeta física NFC */
.hero__brand{ margin:-18px 0 0; line-height:1; }
.hero__brand-eyebrow{
  display:block;
  font-size:clamp(13px, 3.6vw, 15px);
  font-weight:800;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--text);
}
/* Rayita decorativa arriba de "Supermercado", como en la tarjeta física */
.hero__brand-eyebrow::before{
  content:"";
  display:block;
  width:72px; height:2px;
  margin:0 auto 10px;
  border-radius:99px;
  background:var(--line-str);
}
.hero__brand-name{
  display:block;
  margin-top:4px;
  font-size:clamp(46px, 15.5vw, 66px);
  font-weight:900;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--red);
  text-shadow:
    0 1px 0 #fff,
    0 3px 0 rgba(17,24,39,.08),
    0 10px 20px rgba(200,16,46,.35);
}
/* Pastilla oscura con el lema, en amarillo rey */
.hero__tagline{ margin-top:14px; }
.hero__tagline span{
  display:inline-flex;
  padding:8px 20px;
  border-radius:999px;
  background:var(--text);
  color:var(--yellow);
  font-size:13px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  box-shadow:var(--shadow);
}
.hero__greeting{
  margin-top:20px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--muted);
}
.hero__desc{
  margin:6px auto 0;
  max-width:34ch;
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
}

/* ---------------------------------------------------------------- 5. Bloques */
.stack{ display:flex; flex-direction:column; gap:14px; padding-top:22px; }
.block{ display:flex; flex-direction:column; gap:9px; }

/* Tarjeta base: blanca, borde fino, esquinas redondeadas, sombra suave */
.card{
  position:relative;
  display:flex; align-items:center; gap:14px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
  box-shadow:var(--shadow);
  transition:transform var(--t), border-color var(--t), box-shadow var(--t);
  overflow:hidden;
}
.card:active{ transform:scale(.978); border-color:rgba(200,16,46,.35); }
@media (hover:hover){
  .card:hover{ transform:translateY(-2px); border-color:rgba(200,16,46,.3); box-shadow:var(--shadow-lg); }
  .card:hover .arrow{ transform:translateX(3px); background:var(--red); color:#fff; border-color:var(--red); }
}

/* Flecha */
.arrow{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:50%;
  color:var(--muted);
  background:var(--bg-tint);
  border:1px solid var(--line-2);
  transition:transform var(--t), color var(--t), background var(--t), border-color var(--t);
}
.arrow svg{ width:17px; height:17px; }
.arrow--sm{ width:28px; height:28px; }
.arrow--sm svg{ width:15px; height:15px; }
.card:active .arrow{ transform:translateX(2px); }

.hint{
  font-size:12.5px; line-height:1.5; color:var(--muted-2);
  padding:0 4px; text-align:center;
}

/* ---------------------------------------------------------------- 6. Reseña Google */
.review{
  padding:17px 16px;
  border-color:rgba(200,16,46,.20);
  background:linear-gradient(180deg, #FFFDF6, #FFF6EC);
  box-shadow:var(--shadow-red);
}
/* Detalle con degradado amarillo → naranja → rojo en el borde izquierdo */
.review::before{
  content:""; position:absolute; left:0; top:14px; bottom:14px; width:4px;
  border-radius:0 4px 4px 0;
  background:var(--grad);
}
.review__badge{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 6px 14px -8px rgba(17,24,39,.35);
}
.review__badge svg{ width:24px; height:24px; }
.review__body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.review__eyebrow{
  font-size:10.5px; font-weight:900; letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue);
}
.review__title{ font-size:16px; font-weight:900; letter-spacing:.2px; color:var(--text); }
.review__stars{ display:flex; gap:3px; margin-top:4px; }
.review__stars svg{
  width:15px; height:15px;
  fill:var(--yellow);
  stroke:#E09B00; stroke-width:.9;
  filter:drop-shadow(0 1px 2px rgba(224,155,0,.35));
}

/* ---------------------------------------------------------------- 7. Botón compartir */
.btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; min-height:58px; padding:14px 18px;
  border-radius:var(--r-md);
  font-size:15.5px; font-weight:800; letter-spacing:.2px;
  transition:transform var(--t), box-shadow var(--t);
}
.btn:active{ transform:scale(.978); }
.btn__ico{ display:grid; place-items:center; width:26px; height:26px; border-radius:9px; background:rgba(255,255,255,.2); }
.btn__ico svg{ width:16px; height:16px; }

/* Botón ancho en AZUL REY (color corporativo) */
.btn--share{
  color:#fff;
  background:var(--grad-blue);
  box-shadow:var(--shadow-blue);
}
@media (hover:hover){ .btn--share:hover{ box-shadow:0 18px 36px -14px rgba(11,78,162,.65); } }

/* ---------------------------------------------------------------- 8. Cuadrícula 2 columnas */
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.tile{
  flex-direction:column; align-items:flex-start; gap:0;
  min-height:132px;
  padding:14px;
}
.tile__ico{
  display:grid; place-items:center;
  width:42px; height:42px; margin-bottom:11px;
  border-radius:13px;
  border:1px solid var(--line-2);
}
.tile__ico svg{ width:21px; height:21px; }
/* Insignias sólidas con los colores oficiales de cada red, ícono en blanco */
/* Comunidad Barrón: lleva el logo de WhatsApp (verde oficial) */
.tile__ico--wa{ background:#25D366; color:#fff; border-color:rgba(37,211,102,.4); box-shadow:0 6px 14px -8px rgba(37,211,102,.7); }
.tile__ico--ig{
  background:linear-gradient(135deg,#FEDA75 0%,#FA7E1E 27%,#D62976 52%,#962FBF 76%,#4F5BD5 100%);
  border-color:transparent;
  box-shadow:0 6px 14px -8px rgba(214,41,118,.65);
}
.tile__ico--tt{ background:#010101; color:#fff; border-color:rgba(17,24,39,.4); box-shadow:0 6px 14px -8px rgba(17,24,39,.55); }
.tile__ico--maps{ background:#EA4335; color:#fff; border-color:rgba(234,67,53,.4); box-shadow:0 6px 14px -8px rgba(234,67,53,.7); }

.tile__title{ font-size:15px; font-weight:900; letter-spacing:.2px; }
.tile__sub{ margin-top:3px; font-size:12px; line-height:1.35; color:var(--muted); padding-right:16px; }
.tile__go{
  position:absolute; top:13px; right:12px;
  color:var(--muted-2);
  transition:transform var(--t), color var(--t);
}
.tile__go svg{ width:16px; height:16px; }
@media (hover:hover){ .tile:hover .tile__go{ color:var(--red); transform:translateX(2px); } }

/* ---------------------------------------------------------------- 9. Ofertas y sorteos */
.offers{
  padding:18px 16px;
  border:0;
  gap:13px;
  color:#fff;
  background:var(--grad-red);
  box-shadow:0 16px 34px -16px rgba(200,16,46,.75);
  overflow:hidden;
}
/* Borde interior con el degradado amarillo → naranja → rojo */
.offers::after{
  content:""; position:absolute; inset:0;
  border-radius:inherit;
  border:2px solid transparent;
  background:var(--grad) border-box;
  /* El orden importa: los shorthands "mask" van antes que "mask-composite" */
  -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  opacity:.95;
}
.offers__shine{
  position:absolute; top:-40%; left:0; width:38%; height:180%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation:sheen 4.6s var(--ease) 1.4s infinite;
  pointer-events:none;
}
.offers__ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:14px;
  background:var(--yellow);
  color:var(--red-deep);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
}
.offers__ico svg{ width:24px; height:24px; }
.offers__body{ display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.offers__title{
  font-size:16px; font-weight:900; letter-spacing:.12em; text-transform:uppercase;
  text-shadow:0 2px 8px rgba(90,10,20,.35);
}
.offers__sub{ font-size:12.5px; font-weight:700; color:rgba(255,255,255,.94); }
.offers .arrow{ color:var(--red); background:var(--yellow); border-color:var(--yellow); }
.offers:active .arrow{ transform:translateX(2px); }

/* ---------------------------------------------------------------- 10. Dirección */
.address{ padding:16px; gap:13px; }
.address__ico{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:14px;
  background:rgba(11,78,162,.09);
  border:1px solid rgba(11,78,162,.2);
  color:var(--blue);
}
.address__ico svg{ width:22px; height:22px; }
.address__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.address__label{
  font-size:10.5px; font-weight:900; letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue);
}
.address__value{ font-size:15px; font-weight:900; }
.address__hours{ font-size:12px; color:var(--muted); }

/* ---------------------------------------------------------------- 11. Gracias */
.thanks{ text-align:center; padding:26px 8px 4px; }
.thanks__title{
  font-size:19px; font-weight:900; letter-spacing:.3px;
  color:var(--red);
}
.thanks__sub{ margin-top:6px; font-size:13px; color:var(--muted); }

/* ---------------------------------------------------------------- 12. Footer */
.footer{ padding:26px 0 calc(30px + env(safe-area-inset-bottom)); text-align:center; }
.footer__link{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
  font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2);
  transition:color var(--t), border-color var(--t);
}
.footer__link strong{ color:var(--blue); font-weight:900; letter-spacing:.12em; }
.footer__link:active{ transform:scale(.98); }
@media (hover:hover){ .footer__link:hover{ color:var(--muted); border-color:rgba(11,78,162,.35); } }
.footer__logo{
  width:14px; height:19px;
  object-fit:contain;
  flex:0 0 auto;
}
.footer__dot{
  width:8px; height:8px; border-radius:2px;
  background:var(--grad);
}

/* ---------------------------------------------------------------- 13. Aviso (toast) */
.toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom));
  z-index:50;
  width:max-content; max-width:min(92vw, 420px);
  padding:12px 17px;
  border-radius:14px;
  border:1px solid var(--line-str);
  background:rgba(255,255,255,.98);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:var(--shadow-lg);
  font-size:13px; font-weight:700; text-align:center; color:var(--text);
  opacity:0; transform:translate(-50%, 14px); pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.toast.is-visible{ opacity:1; transform:translate(-50%, 0); }

/* Enlaces pendientes de configurar (aviso visual discreto) */
.is-pending{ opacity:.85; }
.is-pending .tile__sub::after,
.is-pending .review__eyebrow::after{ content:" \0000B7\000020config. pendiente"; color:var(--red); font-weight:900; }

/* Elementos ocultos por configuración */
.is-hidden{ display:none !important; }

/* ---------------------------------------------------------------- 14. Accesibilidad */
:focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rise{ animation:none; opacity:1; transform:none; }
  .card:active, .btn:active{ transform:none; }
}

/* ---------------------------------------------------------------- 15. Pantallas grandes */
@media (min-width:520px){
  :root{ --pad:20px; }
  .shell{ padding-top:40px; }
  .tile{ min-height:142px; padding:16px; }
  .stack{ gap:15px; padding-top:26px; }
}