/* ==========================================================
   Central de acesso — Drogaria Nova Suíça / Drogaria Amparo
   Paleta idêntica à dos dois sites das farmácias.
   ========================================================== */

:root{
  --red:        #d62015;
  --red-deep:   #a3120b;
  --red-ink:    #5c0703;
  --yellow:     #ffd400;
  --yellow-deep:#f0b600;
  --cream:      #fffcf8;
  --cream-dim:  #fffcf8c2;
  --ink:        #1a1210;
  --ink-soft:   #4a3a36;
  --muted:      #8a7a74;

  --display:"Anton","Arial Narrow",system-ui,sans-serif;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;

  --raio:18px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--sans);
  color:var(--cream);
  background:var(--red);
  background-image:
    radial-gradient(120% 90% at 50% 6%, #e2231a 0%, var(--red) 42%, var(--red-deep) 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.page{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(18px,2.6vw,30px);
  max-width:1240px;
  margin:0 auto;
  padding:clamp(20px,3.4vw,40px) clamp(16px,3.4vw,36px);
}

/* ---------------- Topo ---------------- */
.head{ text-align:center; }

.head h1{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.1rem,6.4vw,4.15rem);
  line-height:.94;
  letter-spacing:.005em;
  text-transform:uppercase;
  color:var(--cream);
}
.head h1 em{
  display:block;
  font-style:normal;
  color:var(--yellow);
}
.head__sub{
  margin:0 0 16px;
  font-size:clamp(.9rem,2.1vw,1.05rem);
  color:var(--cream-dim);
}

/* selo amarelo de entrega */
.selo{
  display:inline-flex; align-items:center; gap:9px;
  margin:0;
  padding:9px 18px 9px 14px;
  border-radius:999px;
  background:var(--yellow);
  color:var(--red-ink);
  box-shadow:0 6px 18px rgba(92,7,3,.28);
}
.selo svg{
  width:20px; height:20px; flex:none;
  fill:none; stroke:var(--red-ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.selo strong{
  font-family:var(--display); font-weight:400;
  font-size:1.02rem; letter-spacing:.03em; text-transform:uppercase;
}
.selo span{
  font-size:.78rem; font-weight:500;
  color:#7a5a00;
  border-left:1px solid #d9a90b;
  padding-left:10px;
}

/* ---------------- Palco: card | boneco | card ---------------- */
.palco{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,var(--boneco,30%)) minmax(0,1fr);
  align-items:center;
  gap:clamp(14px,2.4vw,34px);
}

/* ---------------- Cards ---------------- */
.card{
  position:relative;
  z-index:1;
  background:var(--cream);
  border-radius:var(--raio);
  padding:clamp(20px,2.4vw,28px);
  text-align:center;
  cursor:pointer;
  overflow:hidden;
  box-shadow:0 2px 0 rgba(92,7,3,.18), 0 14px 34px rgba(92,7,3,.26);
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s ease;
}
.card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:var(--yellow);
}
.card:hover, .card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 2px 0 rgba(92,7,3,.18), 0 22px 46px rgba(92,7,3,.34);
}
.card:focus-visible{ outline:3px solid var(--yellow); outline-offset:4px; }

.card__bairro{
  display:inline-block;
  margin:4px 0 12px;
  padding:5px 12px;
  border-radius:999px;
  background:#1a12100d;
  color:var(--ink-soft);
  font-size:.72rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
}
.card h2{
  margin:0 0 8px;
  font-family:var(--display); font-weight:400;
  font-size:clamp(.92rem,1.6vw,1.02rem);
  line-height:1.1;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--muted);
}
.card h2 em{
  display:block;
  font-style:normal;
  font-size:clamp(1.55rem,3.3vw,2.2rem);
  letter-spacing:.005em;
  color:var(--red);
}
.card__end{
  margin:0 0 20px;
  font-size:.8125rem; line-height:1.45;
  color:var(--ink-soft);
}

.btn{
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 18px;
  border-radius:12px;
  background:var(--red);
  color:var(--cream);
  font-size:.875rem; font-weight:700;
  letter-spacing:.01em;
  transition:background-color .22s ease;
}
.btn svg{
  width:17px; height:17px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.1;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .22s ease;
}
.card:hover .btn, .card:focus-visible .btn{ background:var(--red-deep); }
.card:hover .btn svg, .card:focus-visible .btn svg{ transform:translateX(3px); }

/* ---------------- Personagem ---------------- */
.mascote{
  justify-self:center;
  align-self:end;
  width:100%;
  /* não deixa o boneco esticar a página em telas baixas */
  max-width:min(100%, calc(46vh * 581 / 699));
}
.mascote__inner{
  position:relative;
  width:100%;
  aspect-ratio:581 / 699;
  transform-origin:50% 40%;
  will-change:transform;
}
.mascote__corpo{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  /* o corpo se dissolve no vermelho da página */
  -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 97%);
          mask-image:linear-gradient(to bottom,#000 72%,transparent 97%);
}

/* recorte da esclera: íris e pálpebra nunca escapam do olho */
.olho{
  position:absolute;
  overflow:hidden;
  border-radius:50%;
}
.olho img{ position:absolute; display:block; }

/* medidas em px da arte original (581 x 699), convertidas em % */
.olho--1{ left:41.05%; top:32.16%; width:8.434%; height:7.210%; }
.olho--1 .olho__iris{ left:12.24%; top:13.29%; width:75.51%; height:73.41%; }

.olho--2{ left:54.56%; top:32.33%; width:7.298%; height:6.581%; }
.olho--2 .olho__iris{ left:6.37%;  top:10.87%; width:87.26%; height:78.26%; }

.olho__lid{
  left:-6%; top:-2%;
  width:112%; height:104%;
  transform:translateY(-104%);
  will-change:transform;
}

/* ---------------- Rodapé ---------------- */
.rodape{ text-align:center; }
.rodape p{
  margin:0;
  font-size:.8125rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--cream-dim);
}
.rodape__nota{
  margin-top:6px !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  color:#fffcf880 !important;
}

/* ---------------- Entrada ---------------- */
@keyframes surge{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } }
@keyframes surgeBoneco{ from{ opacity:0; transform:scale(.94); } to{ opacity:1; transform:none; } }
.head{ animation:surge .6s ease both; }
.card{ animation:surge .6s ease both .12s; }
.mascote{ animation:surgeBoneco .8s cubic-bezier(.2,.7,.3,1) both .06s; }
.rodape{ animation:surge .6s ease both .26s; }

/* ---------------- Vantagens comuns às duas unidades ---------------- */
.vantagens{
  list-style:none;
  margin:0; padding:0;
  display:flex; flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.vantagens li{
  display:flex; align-items:center; gap:10px;
  padding:9px 15px 9px 12px;
  border-radius:12px;
  background:#5c07031f;
  border:1px solid #fff7e824;
}
.vantagens svg{
  width:19px; height:19px; flex:none;
  fill:none; stroke:var(--yellow); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.vantagens b{
  font-size:.8125rem; font-weight:700;
  color:var(--cream);
  white-space:nowrap;
}
.vantagens i{
  font-style:normal;
  font-size:.75rem;
  color:#fffcf894;
  padding-left:9px;
  border-left:1px solid #fff7e82e;
  white-space:nowrap;
}

/* ---------------- Marca nos cards ---------------- */
.card__marca{
  display:block;
  width:46px; height:46px;
  margin:0 auto 12px;
  border-radius:50%;
}

/* ---------------- Assinatura da agência ---------------- */
.assinatura{
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid #fff7e830;
  display:flex; flex-wrap:wrap;
  align-items:center; justify-content:center;
  gap:6px 14px;
}
.assinatura p{
  margin:0;
  font-size:.75rem; font-weight:400;
  letter-spacing:0; text-transform:none;
  color:#fffcf894;
}
.assinatura a{
  color:var(--cream);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--yellow);
  padding-bottom:1px;
  transition:color .2s ease;
}
.assinatura a:hover, .assinatura a:focus-visible{ color:var(--yellow); }

/* ---------------- Responsivo ---------------- */

/* notebook comum (900px de altura): aperta os espaços, sem perder conteúdo */
@media (max-height:960px) and (min-width:901px){
  .page{ gap:22px; padding-top:26px; padding-bottom:26px; }
  .head h1{ margin-bottom:8px; }
  .head__sub{ margin-bottom:12px; }
  .mascote{ max-width:min(100%, calc(43vh * 581 / 699)); }
}

/* telas baixas (notebook 768px, janela pequena): compacta o topo */
@media (max-height:780px) and (min-width:901px){
  .page{ gap:16px; padding-top:20px; padding-bottom:20px; }
  .head h1{ font-size:clamp(1.9rem,4.6vw,3.05rem); margin-bottom:7px; }
  .head__sub{ margin-bottom:12px; font-size:.95rem; }
  .selo{ padding:7px 15px 7px 12px; }
  .selo strong{ font-size:.92rem; }
  .vantagens{ gap:8px; }
  .vantagens li{ padding:7px 12px 7px 10px; gap:8px; }
  .vantagens i{ display:none; }
  .mascote{ max-width:min(100%, calc(38vh * 581 / 699)); }
}

/* notebook: boneco um pouco menor entre os cards */
@media (max-width:1080px){
  .palco{ --boneco:26%; }
}

/* tablet: boneco em cima, cards lado a lado */
@media (max-width:900px){
  .palco{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
  }
  .mascote{
    grid-column:1 / -1; grid-row:1;
    order:-1;
    max-width:min(228px, calc(30vh * 581 / 699));
    margin-bottom:-22px;   /* os ombros entram atrás dos cards */
  }
  .page{ gap:16px; }
  .vantagens i{ display:none; }
}

/* celular: tudo empilhado, botões grandes */
@media (max-width:620px){
  .page{ gap:11px; padding:14px 16px 18px; }
  .palco{ grid-template-columns:1fr; gap:12px; }
  .mascote{ max-width:158px; margin-bottom:-26px; }

  .head h1{ font-size:clamp(1.9rem,9vw,2.6rem); }
  .head__sub{ margin-bottom:11px; }
  .selo{ padding:8px 15px 8px 12px; gap:8px; }
  .selo strong{ font-size:.94rem; }
  .selo span{ font-size:.72rem; padding-left:8px; }

  .card{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-areas:"marca nome" "end end" "btn btn";
    align-items:center;
    text-align:left;
    padding:14px 15px 15px;
    column-gap:12px; row-gap:8px;
  }
  .card__marca{ grid-area:marca; width:40px; height:40px; margin:0; }
  .card__bairro{ display:none; }
  .card h2{ grid-area:nome; margin:0; font-size:.72rem; }
  .card h2 em{ font-size:1.5rem; }
  .card__end{ grid-area:end; margin:0; font-size:.78rem; }
  .btn{ grid-area:btn; padding:15px; font-size:.875rem; }

  .rodape p{ font-size:.7rem; }
  .rodape__local{ font-size:.65rem !important; }

  .vantagens{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
  }
  .vantagens li{ padding:8px 10px; gap:8px; }
  .vantagens li:last-child{ grid-column:1 / -1; justify-content:center; }
  .vantagens b{ font-size:.7rem; white-space:normal; line-height:1.25; }
  .vantagens i{ display:none; }
  .vantagens svg{ width:17px; height:17px; }

  .assinatura{ margin-top:11px; padding-top:10px; flex-direction:column; gap:4px; }
  .assinatura p{ font-size:.68rem; text-align:center; }
}

@media (max-width:380px){
  .mascote{ max-width:150px; }
  .card h2 em{ font-size:1.32rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}