/* ============================================================
   Bravo Supermarkets Winter Garden — página en construcción
   Colores tomados directamente del logotipo.
   ============================================================ */

:root{
  --blue:      #0E3A9C;
  --blue-deep: #072E8D;
  --red:       #E50C0D;
  --red-arc:   #EA1E19;
  --orange:    #FA8908;
  --yellow:    #FEC502;

  --ink:       #16233F;
  --ink-soft:  #4A5878;
  --paper:     #FFFDF7;
  --line:      #E7E2D5;

  --wrap: 720px;
  --r: 16px;
}

*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  min-height:100svh;
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  color:var(--ink);
  background:var(#ffffff);
  /* halo de sol detrás del contenido */
 
}

/* ---------- rayos de sol ---------- */
 

/* ---------- layout ---------- */
.page{
  position:relative; z-index:1;
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:30px;
  padding:68px 24px 26px;
  text-align:center;
}

.stage{
  width:100%;
  max-width:var(--wrap);
  display:flex; flex-direction:column; align-items:center;
}

/* ---------- idioma ---------- */
.lang{
  position:absolute; top:22px; right:22px;
  display:flex; gap:2px;
  padding:3px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  box-shadow:0 2px 10px rgba(14,58,156,.07);
}
.lang__btn{
  font:inherit; font-size:12px; font-weight:700; letter-spacing:.06em;
  color:var(--ink-soft);
  padding:7px 14px;
  border:0; border-radius:999px;
  background:transparent; cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.lang__btn:hover{ color:var(--blue); }
.lang__btn.is-on{ background:var(--blue); color:#fff; }

/* ---------- logo ---------- */
.logo{
  width:min(360px, 76vw);
  height:auto;
  display:block;
  margin-bottom:26px;
  filter:drop-shadow(0 14px 30px rgba(14,58,156,.16));
  animation:rise .8s cubic-bezier(.2,.8,.25,1) both;
}

@keyframes rise{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to  { opacity:1; transform:none; }
}

/* ---------- badge ---------- */
.badge{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 18px;
  padding:7px 15px 7px 11px;
  font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--blue);
  background:#fff;
  border:1px solid rgba(14,58,156,.16);
  border-radius:999px;
  box-shadow:0 2px 12px rgba(14,58,156,.07);
}
.badge__dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(250,137,8,.55);
  animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 9px rgba(250,137,8,0); }
  100%{ box-shadow:0 0 0 0 rgba(250,137,8,0); }
}

/* ---------- texto ---------- */
.title{
  margin:0 0 16px;
  font-size:clamp(38px, 7.4vw, 58px);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.02;
  color:var(--blue-deep);
}

.lede{
  margin:0 auto 30px;
  max-width:54ch;
  font-size:clamp(16px, 2.1vw, 18px);
  line-height:1.65;
  color:var(--ink-soft);
}

/* ---------- info ---------- */
.info{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  width:100%;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
}
.info__item{
  display:flex; flex-direction:column; gap:7px;
  padding:18px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:0 1px 3px rgba(22,35,63,.05);
}
.info__label{
  font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--red);
}
.info__value{
  font-size:15px; font-weight:500; line-height:1.5;
  color:var(--ink);
  text-decoration:none;
}
a.info__value:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

/* ---------- botones ---------- */
.cta{
  display:flex; flex-wrap:wrap;
  gap:12px; justify-content:center;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;
  padding:0 26px;
  font-size:15px; font-weight:600;
  text-decoration:none;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--solid{
  color:#fff;
  background:var(--blue);
  box-shadow:0 6px 18px rgba(14,58,156,.26);
}
.btn--solid:hover{ background:var(--blue-deep); box-shadow:0 9px 24px rgba(14,58,156,.32); }

.btn--ghost{
  color:var(--blue);
  background:#fff;
  border-color:rgba(14,58,156,.24);
}
.btn--ghost:hover{ border-color:var(--blue); background:rgba(14,58,156,.04); }

/* ---------- footer ---------- */
.foot{
  position:relative;
  width:100%; max-width:var(--wrap);
  padding-top:20px;
}
.foot::before{
  content:"";
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--red-arc), var(--orange) 50%, var(--yellow));
}
.foot__line{
  margin:0;
  font-size:13px;
  color:var(--ink-soft);
}

/* ---------- foco accesible ---------- */
:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:3px;
  border-radius:6px;
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .page{ padding:76px 20px 28px; gap:32px; }
  .info{ grid-template-columns:1fr; gap:10px; }
  .info__item{ padding:18px; }
  .btn{ width:100%; }
  .logo{ margin-bottom:28px; }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}