/*
  Juniper Pharmacy (H8)
  Harmony: TRIADIC. Leaf green (150deg) is the pharmacy's own color, the green cross every neighborhood knows.
  Tangerine (20deg) sits a third of the wheel away and is warm, appetizing and quick: it marks every action.
  Violet-blue (240deg) is the third point and is used sparingly for delivery and information chips.
  The photo shoot (National Cancer Institute, photographer Rhoda Baer) is warm wood and white coats; the green
  and tangerine sit on it like fresh labels on a wooden counter.
  60%  --mint      #F1F7F3  page background, --white #FFFFFF panels
  30%  --leaf      #1E7A4C  headings accents, sign strip, tiles; --pine #0F3D28 dark band; --ink #142A1F text
       --moss      #5B6E63  secondary text
  10%  --tangerine #C94A12  buttons (white text), --ember #B03F0C tangerine for small text
       --violet    #4F46C8  delivery and info chips; --lavender #E4E3FA their tint
       --led       #5CF08A  the lit sign on --panel #0E1F16
  Contrast (WCAG): ink on mint 14.01, pine on mint 11.25, moss on mint 5.02, white on leaf 5.33, white on
  tangerine 4.70, ember on mint 5.43, ember on white 5.90, violet on white 6.90, white on violet 6.90,
  violet on lavender 5.48, led on panel 11.65, mint on panel 15.77, ink on peach 12.36, ink on lightgreen 12.47.
  Shapes: soft everywhere, 28px panels, 16px tiles, 12px inputs, pill buttons and chips.
*/
:root {
  --mint: #F1F7F3; --white: #FFFFFF; --leaf: #1E7A4C; --pine: #0F3D28; --ink: #142A1F; --moss: #5B6E63;
  --tangerine: #C94A12; --ember: #B03F0C; --violet: #4F46C8; --lavender: #E4E3FA; --peach: #FBE3D6; --lightgreen: #D8EEDF;
  --led: #5CF08A; --panel: #0E1F16; --line: #D5E2D9;
  --display: "Gabarito", "Instrument Sans", sans-serif; --body: "Instrument Sans", system-ui, sans-serif;
  --pad: clamp(1.1rem, 4vw, 3.5rem); --max: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mint); color: var(--ink); font: 400 1.0625rem/1.6 var(--body); overflow-x: hidden; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.02; margin: 0; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.35rem; }
p { margin: 0; }
p + p { margin-top: .9em; }
.muted { color: var(--moss); }
.lede { font-size: 1.2rem; max-width: 32em; color: var(--moss); }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none !important; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--pine); color: var(--white); padding: .6rem 1rem; z-index: 60; border-radius: 10px; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .8rem 1.5rem; font: 700 1rem/1 var(--display); text-decoration: none; border: 2px solid transparent; border-radius: 999px; cursor: pointer; transition: transform .18s ease, background-color .18s ease, color .18s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--tang { background: var(--tangerine); color: var(--white); }
.btn--tang:hover { background: var(--ember); }
.btn--leaf { background: var(--leaf); color: var(--white); }
.btn--leaf:hover { background: var(--pine); }
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--white); }
.btn--white { background: var(--white); color: var(--pine); }
.btn--white:hover { background: var(--lightgreen); }
.btn--wide { width: 100%; }
.link { color: var(--ember); font-weight: 700; text-decoration: none; border-bottom: 2px solid transparent; }
.link:hover { border-bottom-color: currentColor; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: var(--mint); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; gap: 1.4rem; min-height: 74px; }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 800 1.25rem/1 var(--display); letter-spacing: -.02em; margin-right: auto; color: var(--pine); }
.logo svg { width: 38px; height: 38px; }
.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.2rem); font-weight: 600; font-size: .97rem; }
.nav a { text-decoration: none; padding: .4rem 0; border-bottom: 3px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--tangerine); }
.top .btn { min-height: 46px; padding-inline: 1.2rem; }
.burger { display: none; min-height: 46px; padding: .5rem .95rem; border: 2px solid var(--pine); border-radius: 999px; background: transparent; font: 700 .95rem var(--display); color: var(--pine); cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.hero__copy { display: grid; gap: 1.4rem; }
.hero h1 { max-width: 10em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 28px; }

/* The sign: a lit pharmacy cross with live status */
.sign { padding: 0 0 clamp(2rem, 5vw, 4rem); }
.sign__in { background: var(--panel); color: var(--mint); border-radius: 28px; padding: clamp(1.2rem, 3vw, 2rem) clamp(1.2rem, 3vw, 2.4rem); display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
.cross { width: 84px; height: 84px; position: relative; flex: none; }
.cross::before, .cross::after { content: ""; position: absolute; background: var(--led); border-radius: 8px; box-shadow: 0 0 18px rgba(92, 240, 138, .75), 0 0 46px rgba(92, 240, 138, .35); }
.cross::before { left: 30px; top: 0; width: 24px; height: 84px; }
.cross::after { top: 30px; left: 0; width: 84px; height: 24px; }
.sign.is-closed .cross::before, .sign.is-closed .cross::after { background: #2D5C3F; box-shadow: none; }
.sign__status { display: grid; gap: .25rem; }
.sign__word { font: 800 clamp(2rem, 4vw, 3.2rem)/1 var(--display); letter-spacing: .04em; color: var(--led); text-shadow: 0 0 14px rgba(92, 240, 138, .55); }
.sign.is-closed .sign__word { color: #9FB8A8; text-shadow: none; }
.sign__next { font-size: 1.05rem; color: #C9DBD0; }
.sign__facts { display: grid; gap: .5rem; font-size: .95rem; color: #C9DBD0; border-left: 1px solid rgba(255, 255, 255, .18); padding-left: clamp(1rem, 2vw, 2rem); }
.sign__facts b { color: var(--white); font-family: var(--display); font-size: 1.05rem; display: block; }

/* Services bento: exactly 4 cells, two carry photos */
.svc { padding: clamp(1rem, 3vw, 2rem) 0 clamp(2.5rem, 6vw, 5rem); }
.svc__head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.bento { display: grid; grid-template-columns: 1.3fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem; }
.cell { border-radius: 16px; padding: 1.5rem; display: grid; gap: .6rem; align-content: end; text-decoration: none; min-height: 250px; position: relative; overflow: hidden; transition: transform .2s ease; }
.cell:hover { transform: translateY(-3px); }
.cell h3 { font-size: 1.5rem; }
.cell p { font-size: .97rem; }
.cell--photo { grid-row: span 2; color: var(--white); background: var(--pine); padding: 0; }
.cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell--photo .cell__body { position: relative; padding: 1.5rem; background: linear-gradient(to top, rgba(15, 61, 40, .95), rgba(15, 61, 40, .0) 80%); display: grid; gap: .5rem; margin-top: auto; padding-top: 5rem; }
.cell--photo p { color: #DDEDE3; }
.cell--green { background: var(--lightgreen); }
.cell--peach { background: var(--peach); }
.cell--lavender { background: var(--lavender); }
.cell__more { font: 700 .95rem/1 var(--display); color: var(--ember); }
.cell--lavender .cell__more { color: var(--violet); }
.cell--green .cell__more { color: var(--leaf); }
.cell--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: end; }
.cell--wide img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; aspect-ratio: 4 / 3; }

/* Refill steps (a real sequence) */
.how { background: var(--pine); color: var(--white); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.how h2 { color: var(--white); }
.how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2rem; }
.how__step { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px; padding: 1.4rem; display: grid; gap: .5rem; }
.how__n { width: 40px; height: 40px; border-radius: 50%; background: var(--tangerine); color: var(--white); display: grid; place-items: center; font: 800 1.1rem/1 var(--display); }
.how__step h3 { color: var(--white); }
.how__step p { color: #C9DBD0; font-size: .97rem; }
.how .btn { margin-top: 2rem; }

/* Pharmacists */
.people { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.people__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1.8rem; }
.person { display: grid; grid-template-columns: 180px 1fr; gap: 1.2rem; align-items: center; background: var(--white); border-radius: 20px; overflow: hidden; }
.person img { width: 100%; height: 100%; object-fit: cover; min-height: 200px; }
.person div { padding: 1.2rem 1.4rem 1.2rem 0; display: grid; gap: .3rem; }
.person b { font: 700 1.25rem/1.15 var(--display); }
.person span { color: var(--ember); font-weight: 700; font-size: .9rem; }
.person p { color: var(--moss); font-size: .95rem; margin-top: .3rem; }

/* Visit teaser */
.visit-teaser { padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.visit-teaser__in { background: var(--white); border-radius: 28px; padding: clamp(1.4rem, 3vw, 2.4rem); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.hours { margin: .8rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .97rem; }
.hours li.is-today { font-weight: 700; color: var(--leaf); }

/* Footer */
.foot { background: var(--white); border-top: 1px solid var(--line); padding: 2rem 0; }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--moss); }

/* Page head */
.page-head { padding: clamp(2rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); display: grid; gap: .9rem; }
.page-head > * { max-width: 40em; }

/* Services page */
.slist { display: grid; gap: 1.2rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.sblock { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 3rem); background: var(--white); border-radius: 28px; overflow: hidden; }
.sblock--flip .sblock__media { order: 2; }
.sblock__media { min-height: 320px; position: relative; }
.sblock__media img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.sblock__media--tint { background: var(--lightgreen); display: grid; place-items: center; padding: 2rem; }
.sblock__media--lav { background: var(--lavender); }
.sblock__media--peach { background: var(--peach); }
.sblock__body { padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem) 0; display: grid; gap: .8rem; align-content: center; }
.sblock--flip .sblock__body { padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1.4rem, 3vw, 2.4rem) clamp(1.4rem, 3vw, 2.4rem); }
.sblock__body ul { margin: .3rem 0 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.sblock__body li { padding-left: 1.2rem; position: relative; font-size: .97rem; }
.sblock__body li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--tangerine); }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: .3rem .8rem; border-radius: 999px; background: var(--lavender); color: var(--violet); font: 700 .85rem/1 var(--display); }
.chip--green { background: var(--lightgreen); color: var(--leaf); }
.chip--peach { background: var(--peach); color: var(--ember); }
.big-fact { display: grid; gap: .2rem; text-align: center; }
.big-fact b { font: 800 clamp(2.4rem, 5vw, 4rem)/1 var(--display); color: var(--pine); letter-spacing: -.03em; }
.big-fact span { color: var(--moss); font-weight: 600; }
.sblock__media--lav .big-fact b { color: var(--violet); }
.sblock__media--peach .big-fact b { color: var(--ember); }

/* Refill page: form left, ticket right */
.refill { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.form { display: grid; gap: 1.1rem; background: var(--white); border-radius: 28px; padding: clamp(1.3rem, 3vw, 2.2rem); }
.form h2 { font-size: 1.4rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: .35rem; }
.field label, .field > span, fieldset legend { font-weight: 700; font-size: .93rem; }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--body); color: var(--ink); padding: .75rem .9rem; border: 2px solid var(--line); border-radius: 12px; background: var(--mint); width: 100%; min-height: 50px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--violet); outline-offset: 1px; border-color: var(--violet); }
.field small { color: var(--moss); font-size: .85rem; }
.meds { display: grid; gap: .8rem; }
.med { display: grid; grid-template-columns: 1.6fr .8fr auto; gap: .8rem; align-items: end; }
.med .rm { min-height: 50px; min-width: 50px; border: 2px solid var(--line); background: var(--white); border-radius: 12px; font: 700 1.2rem/1 var(--display); color: var(--moss); cursor: pointer; }
.med .rm:hover { border-color: var(--ember); color: var(--ember); }
.add { justify-self: start; background: transparent; border: 2px dashed var(--leaf); color: var(--leaf); border-radius: 999px; min-height: 46px; padding: .5rem 1.1rem; font: 700 .95rem/1 var(--display); cursor: pointer; }
.add:hover { background: var(--lightgreen); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: grid; gap: .15rem; padding: .9rem 1rem; border: 2px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--mint); min-height: 74px; }
.seg label b { font-family: var(--display); font-size: 1.05rem; }
.seg label span { font-size: .88rem; color: var(--moss); }
.seg input:checked + label { border-color: var(--leaf); background: var(--lightgreen); }
.seg input[value="delivery"]:checked + label { border-color: var(--violet); background: var(--lavender); }
.seg input:focus-visible + label { outline: 3px solid var(--violet); outline-offset: 3px; }
.note { font-size: .88rem; color: var(--moss); }
.success { display: grid; gap: .8rem; background: var(--lightgreen); border-radius: 28px; padding: 2rem; }
.success[hidden] { display: none; }
.success h2 { font-size: 1.7rem; }

.ticket { position: sticky; top: 94px; overflow: hidden; background: var(--white); border-radius: 20px; padding: 1.6rem; display: grid; gap: 1rem; box-shadow: 0 16px 40px rgba(15, 61, 40, .12); }
.ticket::before, .ticket::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--mint); top: 128px; }
.ticket::before { left: -11px; } .ticket::after { right: -11px; }
.ticket__head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; border-bottom: 2px dashed var(--line); padding-bottom: 1rem; }
.ticket__head h2 { font-size: 1.2rem; }
.ticket__no { font: 800 1.6rem/1 var(--display); color: var(--leaf); letter-spacing: .02em; }
.ticket__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: .55rem; font-size: .97rem; }
.ticket__lines li { display: flex; justify-content: space-between; gap: 1rem; }
.ticket__lines li span:last-child { color: var(--moss); white-space: nowrap; }
.ticket__lines li.is-empty { color: var(--moss); font-style: italic; }
.ticket__row { display: flex; justify-content: space-between; gap: 1rem; font-size: .95rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.ticket__row b { font-family: var(--display); }
.ticket__ready { background: var(--peach); border-radius: 14px; padding: 1rem 1.1rem; display: grid; gap: .15rem; }
.ticket__ready.is-delivery { background: var(--lavender); }
.ticket__ready small { font-weight: 700; font-size: .8rem; letter-spacing: .04em; color: var(--ember); }
.ticket__ready.is-delivery small { color: var(--violet); }
.ticket__ready b { font: 800 1.5rem/1.1 var(--display); }
.ticket__foot { font-size: .85rem; color: var(--moss); }

/* Visit page */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.visit__card { background: var(--white); border-radius: 28px; padding: clamp(1.3rem, 3vw, 2.2rem); display: grid; gap: .8rem; align-content: start; }
.visit__card h2 { font-size: 1.6rem; }
.visit__photo { border-radius: 28px; overflow: hidden; }
.visit__photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.faq { display: grid; gap: .8rem; }
.qa { border: 2px solid var(--line); border-radius: 14px; background: var(--white); }
.qa summary { cursor: pointer; padding: .9rem 1.1rem; font: 700 1.02rem/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--ember); font-size: 1.3rem; line-height: 1; }
.qa[open] summary::after { content: "\2212"; }
.qa div { padding: 0 1.1rem 1.1rem; color: var(--moss); font-size: .97rem; }

@media (prefers-reduced-motion: no-preference) {
  .cross::before, .cross::after { animation: flicker 2.4s ease-in-out 1; }
  @keyframes flicker { 0% { opacity: .2; } 8% { opacity: 1; } 12% { opacity: .35; } 20% { opacity: 1; } 100% { opacity: 1; } }
  .hero__copy > * { opacity: 0; transform: translateY(12px); animation: up .6s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hero__copy > :nth-child(2) { animation-delay: .1s; } .hero__copy > :nth-child(3) { animation-delay: .2s; }
  @keyframes up { to { opacity: 1; transform: none; } }
}

@media (max-width: 1000px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .cell--photo { grid-row: span 1; min-height: 320px; }
  .cell--wide { grid-column: span 2; }
  .refill { grid-template-columns: 1fr; }
  .ticket { position: static; }
  .ticket::before, .ticket::after { display: none; }
  .visit-teaser__in { grid-template-columns: 1fr; }
  .people__grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .nav, .top .btn--tang { display: none; }
  .burger { display: inline-flex; }
  .top.is-open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--mint); border-bottom: 1px solid var(--line); padding: 1rem var(--pad) 1.4rem; gap: .3rem; font-size: 1.1rem; }
  .top.is-open .nav a { padding: .7rem 0; }
  .hero, .sblock, .visit, .row, .seg { grid-template-columns: 1fr; }
  .hero__media img { aspect-ratio: 4 / 3; }
  .sign__in { grid-template-columns: 1fr; gap: 1rem; }
  .sign__facts { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding-top: 1rem; grid-template-columns: 1fr 1fr; }
  .bento { grid-template-columns: 1fr; }
  .cell--wide { grid-column: span 1; grid-template-columns: 1fr; }
  .how__grid { grid-template-columns: 1fr; }
  .person { grid-template-columns: 1fr; }
  .person img { max-height: 260px; }
  .person div { padding: 1.2rem; }
  .sblock--flip .sblock__media { order: 0; }
  .sblock__body, .sblock--flip .sblock__body { padding: 1.3rem; }
  .sblock__media { min-height: 240px; }
  .med { grid-template-columns: 1fr; }
  .med .rm { justify-self: start; }
}