/* Farmacia Valverde · estilos comunes
   Concepto: app de barrio. Bloques tipo "bento", tipografía grande y la pareja de verdes del logo. */
:root{
  --pine:#006553;       /* verde oscuro del logo */
  --lime:#7bc142;       /* verde claro del logo */
  --pine-deep:#003e33;
  --bg:#f3f7f2; --surface:#ffffff; --surface-2:#eaf2ea; --fg:#0c2420; --muted:#4f665f; --line:#d7e4dc;
  --brand:#006553; --on-brand:#ffffff; --brand-soft:#e1f0e6; --accent:#7bc142; --on-accent:#0c2a10;
  --amber:#f2b33a; --red:#c8432e;
  --glass:rgba(255,255,255,.72);
  --f-display:"Outfit",ui-sans-serif,system-ui,sans-serif;
  --f-serif:"Instrument Serif",ui-serif,Georgia,serif;
  --f-body:"Figtree",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#08130f; --surface:#0f1f1a; --surface-2:#132a22; --fg:#e8f3ee; --muted:#93ada3; --line:#1f3a31;
  --brand:#2fb08a; --on-brand:#02170f; --brand-soft:#123228; --accent:#8fd158; --on-accent:#0c2a10;
  --amber:#f5b83d; --red:#ef7a64; --glass:rgba(15,31,26,.72); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#08130f; --surface:#0f1f1a; --surface-2:#132a22; --fg:#e8f3ee; --muted:#93ada3; --line:#1f3a31;
  --brand:#2fb08a; --on-brand:#02170f; --brand-soft:#123228; --accent:#8fd158; --on-accent:#0c2a10;
  --amber:#f5b83d; --red:#ef7a64; --glass:rgba(15,31,26,.72); color-scheme:dark}

*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%;padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.04;letter-spacing:-.02em}
.wrap{max-width:640px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:14px 32px;display:flex;flex-direction:column;gap:36px}
.eyebrow{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);font-weight:700;display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:14px;height:6px;border-radius:3px;background:var(--accent)}
.title{font-size:clamp(1.9rem,8vw,2.5rem);font-weight:800}
.title em{font-family:var(--f-serif);font-style:italic;font-weight:400;color:var(--brand);letter-spacing:0}
.example{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:1px dashed currentColor;border-radius:999px;padding:1px 8px;opacity:.75}
.section{display:flex;flex-direction:column;gap:16px;scroll-margin-top:20px}

/* Barra superior */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar .logo{width:min(190px,50vw);height:auto}
.icon-btn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--fg)}
.icon-btn svg{width:20px;height:20px}

/* Botones */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;border-radius:999px;text-decoration:none;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;padding:0 14px;text-align:center;white-space:nowrap;transition:transform .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--brand);color:var(--on-brand);border-color:transparent}
.btn.lime{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn svg{width:18px;height:18px;flex:none}

/* Barra de navegación inferior, tipo app */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));display:flex;justify-content:center;pointer-events:none}
.tabbar nav{pointer-events:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;width:100%;max-width:440px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid var(--line);border-radius:26px;padding:6px;box-shadow:0 12px 30px -12px rgba(0,40,30,.35)}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 4px;border-radius:20px;text-decoration:none;font-size:.72rem;font-weight:600;color:var(--muted)}
.tabbar a svg{width:22px;height:22px}
.tabbar a[aria-current="page"]{background:var(--brand);color:var(--on-brand)}

/* Aviso de instalación */
.install{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center}
.install.hl{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.install img{width:44px;height:44px;border-radius:11px}
.install b{display:block}
.install p{margin:2px 0 0;font-size:.88rem;color:var(--muted)}
.install .btn{grid-column:1/-1}
.share{display:inline-block;width:16px;height:16px;vertical-align:-3px}

/* Pie */
.foot{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--line);padding-top:24px;font-size:.92rem;color:var(--muted)}
.foot .logo{width:170px;height:auto}
.foot .tel{font-family:var(--f-mono);color:var(--fg);user-select:all}
.social{display:flex;gap:10px;flex-wrap:wrap}
.social a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--fg)}
.social svg{width:18px;height:18px}

/* Entrada suave al hacer scroll (los bloques se ven siempre; solo se desplazan un poco) */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes reveal{from{transform:translateY(24px) scale(.985)}to{transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}