:root{
  --blue:#083b84;
  --blue-deep:#062b5f;
  --teal:#0fb8c7;
  --green:#32c048;
  --green-deep:#15953a;
  --white:#ffffff;
  --soft:#f3f7fb;
  --text:#14314e;
  --muted:#617589;
  --line:#d8e5ef;
  --shadow:0 18px 55px rgba(9,38,76,.12);
  --radius:28px;
  --radius-sm:20px;
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
h1,h2,h3{margin:0 0 14px;line-height:1.08;color:var(--text)}
h1{font-size:clamp(2.5rem,5vw,5rem)}
h2{font-size:clamp(2rem,3.8vw,3.3rem)}
h3{font-size:1.28rem}
p{margin:0 0 16px;color:var(--muted)}
ul{margin:0;padding-left:20px}
.container{width:min(100% - 32px, var(--container));margin:0 auto}
.section{padding:90px 0}
.section-tag,.hero-kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;font-weight:800;font-size:.82rem;
  letter-spacing:.06em;text-transform:uppercase
}
.section-tag{background:#e9f6ff;color:var(--blue);margin-bottom:16px}
.section-tag.dark{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.hero-kicker{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);margin-bottom:18px}

.hero{position:relative;min-height:100svh;overflow:hidden}
.hero-bg,.hero-overlay{position:absolute;inset:0}
.hero-bg{
  background:url('../assets/hero-farmacia.jpg') center/cover no-repeat;
  transform:scale(1.04);
}
.hero-overlay{
  background:
   linear-gradient(180deg,rgba(7,27,57,.35) 0%,rgba(4,24,52,.7) 55%,rgba(3,18,42,.88) 100%),
   radial-gradient(circle at 82% 22%, rgba(15,184,199,.35), transparent 28%);
}
.topbar,.nav-shell,.hero-content{position:relative;z-index:2}
.topbar{padding:16px 0 0}
.topbar-inner{display:flex;justify-content:flex-end}
.topbar-number{
  color:#fff;font-weight:900;font-size:clamp(1rem,2vw,1.45rem);
  background:linear-gradient(135deg,var(--teal),var(--green));
  padding:12px 20px;border-radius:999px;box-shadow:0 15px 30px rgba(22,150,85,.25)
}
.nav-shell{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding-top:18px
}
.brand-box{
  display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:22px;
  background:rgba(255,255,255,.11);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15);color:#fff
}
.brand-box img{
  width:68px;height:68px;object-fit:cover;border-radius:18px;border:2px solid rgba(255,255,255,.28)
}
.brand-box strong{display:block;font-size:1.1rem}
.brand-box span{display:block;color:rgba(255,255,255,.85);font-size:.95rem}
.hero-nav{display:flex;gap:16px;flex-wrap:wrap}
.hero-nav a{
  color:#fff;font-weight:700;padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)
}
.hero-content{
  min-height:calc(100svh - 130px);
  display:grid;grid-template-columns:1.08fr .92fr;gap:34px;align-items:center;
  padding:44px 0 84px
}
.hero-copy{color:#fff}
.hero-copy h1,.hero-copy p{color:#fff}
.hero-text{max-width:780px;font-size:1.14rem;color:rgba(255,255,255,.9)}
.hero-highlight{margin:28px 0 30px}
.hero-highlight .line{
  width:180px;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--green));margin-bottom:20px
}
.hero-highlight p{font-size:clamp(1.16rem,2.3vw,1.55rem);line-height:1.5}
.hero-points{display:grid;gap:16px;margin:24px 0 30px}
.point-item{display:flex;gap:14px;align-items:flex-start}
.point-item span{
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.92);font-weight:900;color:#fff;flex:0 0 42px
}
.point-item p{margin:0;color:rgba(255,255,255,.95)}
.hero-visual img{
  width:100%;height:min(72svh,720px);object-fit:cover;border-radius:32px;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 28px 70px rgba(1,11,25,.35)
}

.btn{
  min-height:58px;padding:0 24px;border-radius:999px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;transition:.22s ease;
  border:1px solid transparent
}
.btn:hover{transform:translateY(-2px)}
.hero-actions,.cta-buttons{display:flex;gap:14px;flex-wrap:wrap}
.btn-primary{
  background:linear-gradient(135deg,var(--green),#17d04a);color:#fff;
  box-shadow:0 18px 35px rgba(27,170,69,.28)
}
.btn-glass,.btn-secondary{
  background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.2);backdrop-filter:blur(8px)
}
.btn-outline{
  background:#fff;color:var(--blue);border-color:#dce7f1
}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.two-col.reverse{grid-template-columns:1fr 1fr}
.section-copy,.section-heading{max-width:850px}
.feature-image img,.image-card img{
  width:100%;border-radius:30px;box-shadow:var(--shadow);border:1px solid var(--line)
}
.statement{padding-top:0}
.statement-card{
  background:linear-gradient(135deg,var(--blue),var(--blue-deep));
  border-radius:32px;padding:38px;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)
}
.statement-grid{
  display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center
}
.statement-card h2,.statement-card p{color:#fff}
.statement-bullets{
  display:grid;grid-template-columns:repeat(2,minmax(120px,1fr));gap:14px;min-width:min(100%,320px)
}
.bullet-chip{
  padding:14px 16px;border-radius:18px;background:rgba(255,255,255,.12);
  color:#fff;font-weight:800;text-align:center;border:1px solid rgba(255,255,255,.14)
}

.services{background:linear-gradient(180deg,#fff 0%,#f6fbff 100%)}
.section-heading.center{text-align:center;margin:0 auto 34px}
.service-grid{display:grid;gap:18px}
.cols-4{grid-template-columns:repeat(4,1fr)}
.service-card,.list-panel,.media-card,.contact-panel,.image-card-copy{
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)
}
.service-card{
  border-radius:24px;padding:24px;min-height:190px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%)
}
.service-card strong{display:block;font-size:1.05rem;margin-bottom:10px;color:var(--blue)}
.service-card span{display:block;color:var(--muted)}

.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.image-card{background:#fff;border-radius:28px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.image-card-copy{padding:24px;box-shadow:none;border:0}

.lists-section{background:#f8fbfe}
.lists-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.list-panel{
  border-radius:28px;padding:28px;background:#fff
}
.list-panel ul{display:grid;gap:12px}
.list-panel li{color:var(--text)}

.media-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.media-card{
  display:flex;gap:16px;align-items:center;padding:24px;border-radius:24px;
  transition:transform .22s ease,border-color .22s ease
}
.media-card:hover{transform:translateY(-4px);border-color:#b8d4e7}
.media-thumb{
  width:68px;height:68px;border-radius:20px;display:grid;place-items:center;
  font-weight:900;font-size:1.2rem;background:linear-gradient(135deg,var(--blue),var(--teal));color:#fff
}
.media-card.youtube .media-thumb{background:linear-gradient(135deg,#ef4444,#be123c)}

.contact-panel{
  border-radius:32px;padding:34px;
  background:linear-gradient(135deg,var(--blue),#0c4aa5 55%, #129fb8 100%);
  display:flex;align-items:center;justify-content:space-between;gap:24px
}
.contact-copy h2,.contact-copy p,.contact-meta{color:#fff}
.contact-meta{font-weight:800}

.footer{
  background:#061d3e;color:#fff;padding:28px 0 110px
}
.footer-inner{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap
}
.footer p{color:rgba(255,255,255,.78);margin-bottom:6px}

.floating-wa{
  position:fixed;right:18px;bottom:18px;z-index:30;
  min-height:62px;padding:0 24px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#25d366,#129b46);
  color:#fff;font-weight:900;box-shadow:0 18px 35px rgba(18,155,70,.28)
}

.reveal{
  opacity:0;transform:translateY(22px);transition:opacity .6s ease, transform .6s ease
}
.reveal.visible{opacity:1;transform:none}

@media (max-width:1100px){
  .hero-content,.two-col,.gallery-grid,.lists-grid,.media-grid,.cols-4,.statement-grid{
    grid-template-columns:1fr 1fr
  }
  .media-grid,.cols-4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .nav-shell,.hero-content,.two-col,.gallery-grid,.lists-grid,.statement-grid,.contact-panel{
    grid-template-columns:1fr;display:grid
  }
  .nav-shell{gap:14px}
  .hero-nav{display:none}
  .hero-visual img{height:auto}
  .statement-bullets,.media-grid,.cols-4{grid-template-columns:1fr}
  .topbar-inner{justify-content:center}
  .topbar-number{width:100%;text-align:center}
  .section{padding:72px 0}
}