/* ============================================================
   Drogas y Enseres para Hospital — Premium clínico
   Capa de diseño sobre Bootstrap 5.3. Marca morada #5F4B8B.
   ============================================================ */
:root{
  --brand:#5F4B8B;      --brand-700:#4a3a6e;  --brand-900:#2e2447;
  --accent:#2bbfa6;     --accent-600:#1fa892;
  --ink:#1b1626;        --body:#514c60;       --muted:#8b8698;
  --line:#ece8f3;       --surface:#f7f5fb;    --surface-2:#f1edf8;
  --white:#fff;
  --grad:linear-gradient(135deg,#6a54a0 0%,#5F4B8B 45%,#2bbfa6 130%);
  --shadow-sm:0 1px 2px rgba(28,20,45,.06), 0 1px 3px rgba(28,20,45,.04);
  --shadow:0 6px 18px rgba(95,75,139,.08), 0 2px 6px rgba(28,20,45,.05);
  --shadow-lg:0 24px 60px rgba(95,75,139,.16), 0 8px 20px rgba(28,20,45,.06);
  --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{scroll-behavior:smooth}
body{
  font-family:'Montserrat',system-ui,sans-serif;
  color:var(--body); background:var(--white);
  -webkit-font-smoothing:antialiased; line-height:1.65;
  padding-top:0;
}
h1,h2,h3,h4,h5{font-family:'Montserrat',sans-serif; color:var(--ink); font-weight:700; line-height:1.15; letter-spacing:-.02em}
p{margin-bottom:0}
a{text-decoration:none}
.section{padding:clamp(4rem,8vw,7rem) 0}
.container{max-width:1200px}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand);
  background:var(--surface-2); padding:.4rem .9rem; border-radius:var(--r-pill)}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.title{font-size:clamp(1.7rem,3.4vw,2.6rem); margin-bottom:1rem}
.title .grad{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead-muted{font-size:1.08rem; color:var(--body); max-width:44ch}
.text-brand{color:var(--brand)!important}
.bg-surface{background:var(--surface)}

/* ---------- Navbar ---------- */
.nav-wrap{position:sticky; top:0; z-index:1030; background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line);
  transition:box-shadow .3s var(--ease)}
.nav-wrap.scrolled{box-shadow:var(--shadow)}
.navbar{padding:.4rem 0}
.navbar-brand img{width:132px;height:auto;transition:width .3s var(--ease)}
.nav-wrap.scrolled .navbar-brand img{width:118px}
.navbar-nav .nav-link{color:var(--ink)!important; font-weight:600; font-size:.86rem;
  padding:.4rem .6rem!important; border-radius:var(--r-pill); position:relative; white-space:nowrap;
  transition:color .2s var(--ease), background .2s var(--ease)}
.navbar-nav .nav-link:hover{color:var(--brand)!important; background:var(--surface-2)}
.navbar-nav .nav-link.nav-cta{background:linear-gradient(135deg,#6a54a0,#5F4B8B)!important; color:#fff!important;
  padding:.5rem 1.15rem!important; margin-left:.5rem; border-radius:var(--r-pill); white-space:nowrap;
  box-shadow:0 5px 14px rgba(95,75,139,.35);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease)}
.navbar-nav .nav-link.nav-cta:hover{filter:brightness(1.08); background:linear-gradient(135deg,#6a54a0,#5F4B8B)!important; color:#fff!important; transform:translateY(-1px); box-shadow:0 8px 20px rgba(95,75,139,.45)}
.navbar-nav .nav-link.nav-cta i{color:#fff!important}
.navbar-toggler{border:0; padding:.25rem .4rem}
.navbar-toggler:focus{box-shadow:none}
/* Logo Farmacia sobre la franja (panel blanco legible) */
.farmacia-logo-chip{display:inline-flex; background:#fff; border-radius:14px; padding:.6rem 1rem;
  margin-bottom:1.1rem; box-shadow:0 10px 26px rgba(0,0,0,.16)}
.farmacia-logo-chip img{height:40px; width:auto; display:block}

/* ---------- Buttons ---------- */
.btn{border-radius:var(--r-pill); font-weight:600; padding:.7rem 1.4rem; transition:all .28s var(--ease)}
.btn-lg{padding:.85rem 1.7rem; font-size:1rem}
.btn-brand{background:linear-gradient(135deg,#6a54a0,#5F4B8B); border:0; color:#fff;
  box-shadow:0 6px 18px rgba(95,75,139,.30)}
.btn-brand:hover{background:linear-gradient(135deg,#5F4B8B,#443467); color:#fff; transform:translateY(-2px); box-shadow:0 12px 30px rgba(95,75,139,.42)}
.btn-ghost{background:transparent; border:1.5px solid rgba(95,75,139,.28); color:var(--brand)}
.btn-ghost:hover{background:var(--brand); border-color:var(--brand); color:#fff; transform:translateY(-2px)}
.btn-wa{background:linear-gradient(135deg,#2bd46e,#1fb457); border:0; color:#fff; box-shadow:0 6px 16px rgba(37,211,102,.28)}
.btn-wa:hover{background:linear-gradient(135deg,#25c765,#199e4a); color:#fff; transform:translateY(-2px); box-shadow:0 12px 28px rgba(37,211,102,.38)}
.btn-light-ghost{background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.55); color:#fff; backdrop-filter:blur(4px)}
.btn-light-ghost:hover{background:#fff; color:var(--brand); border-color:#fff; transform:translateY(-2px)}

/* ---------- Hero ---------- */
.hero{position:relative; min-height:88vh; display:flex; align-items:center; color:#fff; overflow:hidden}
.hero-bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.03)}
.hero-bg::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(46,36,71,.92) 0%, rgba(46,36,71,.72) 42%, rgba(43,191,166,.28) 100%)}
.hero .container{position:relative; z-index:2}
.hero h1{color:#fff; font-size:clamp(2.3rem,5.2vw,4rem); letter-spacing:-.03em; margin-bottom:1.1rem; text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero .eyebrow{background:rgba(255,255,255,.14); color:#fff}
.hero p.sub{font-size:clamp(1.05rem,1.8vw,1.28rem); color:rgba(255,255,255,.92); max-width:52ch; margin-bottom:2rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.75rem}
.trust-strip{display:flex; flex-wrap:wrap; gap:2rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.2)}
.trust-strip .item{display:flex; flex-direction:column}
.trust-strip .n{font-size:1.7rem; font-weight:800; color:#fff; letter-spacing:-.02em}
.trust-strip .l{font-size:.82rem; color:rgba(255,255,255,.78); letter-spacing:.04em}

/* ---------- Cards genéricas ---------- */
.u-card{background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-sm); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); height:100%}
.u-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.icon-pill{width:56px;height:56px;border-radius:16px; display:grid;place-items:center;
  font-size:1.5rem; color:var(--brand); background:var(--surface-2);
  transition:background .35s var(--ease), color .35s var(--ease)}
.u-card:hover .icon-pill{background:var(--grad); color:#fff}
.u-card h5{font-size:1.12rem; margin:1rem 0 .5rem}
.u-card p{font-size:.96rem; color:var(--body)}

/* ---------- Sobre nosotros ---------- */
.stat-chip{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm)}
.stat-chip .n{font-size:1.9rem;font-weight:800;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.stat-chip .l{font-size:.85rem;color:var(--muted);margin-top:.25rem}

/* ---------- Franja Farmacia ---------- */
.band{background:var(--grad); color:#fff; border-radius:var(--r-lg); overflow:hidden; position:relative}
.band::before{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.10)}
.band::after{content:"";position:absolute;left:-40px;bottom:-80px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.band h2{color:#fff}
.band .chip-white{background:#fff;color:var(--brand);border-radius:14px;padding:.5rem;display:grid;place-items:center}

/* ---------- Especialidades ---------- */
.spec-item{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;color:var(--ink);font-weight:500;border-bottom:1px solid var(--line)}
.spec-item:last-child{border-bottom:0}
.spec-item i{color:var(--accent-600);font-size:1.1rem}

/* ---------- Cobertura ---------- */
.estado{display:flex;align-items:center;gap:.6rem;padding:.5rem .2rem;color:var(--body);font-weight:500;font-size:.96rem}
.estado i{color:var(--brand);font-size:.9rem}

/* ---------- Contacto ---------- */
.form-control{border-radius:var(--r-sm);border:1.5px solid var(--line);padding:.8rem 1rem;font-size:.98rem;transition:border-color .2s,box-shadow .2s}
.form-control:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(95,75,139,.12)}
.form-label{font-weight:600;color:var(--ink);font-size:.9rem}
.info-card{background:var(--brand-900);color:#fff;border-radius:var(--r-lg);padding:2rem}
.info-card a{color:#fff}
.info-card .ic{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.12);display:grid;place-items:center;color:var(--accent);flex:0 0 auto}

/* ---------- Footer ---------- */
.foot{background:var(--brand-900); color:rgba(255,255,255,.82); padding:4rem 0 1.5rem}
.foot h5{color:#fff;font-size:1rem;margin-bottom:1.1rem}
.foot a{color:rgba(255,255,255,.78);transition:color .2s var(--ease)}
.foot a:hover{color:var(--accent)}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.55rem}
.foot .copy{border-top:1px solid rgba(255,255,255,.12);margin-top:2.5rem;padding-top:1.4rem;font-size:.86rem;color:rgba(255,255,255,.6)}

/* ---------- Badge de aniversario (auto, "sello") ---------- */
.anniv{display:inline-flex; flex-direction:column; align-items:center; gap:1.3rem; position:relative}
.anniv-medal{position:relative; width:270px; height:270px; border-radius:50%}
.anniv-medal::before{content:""; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg,#6a54a0,#2bbfa6,#9078d4,#2bbfa6,#6a54a0);
  animation:annivSpin 16s linear infinite}
.anniv-medal::after{content:""; position:absolute; inset:-28px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(95,75,139,.32), rgba(43,191,166,.18) 45%, transparent 72%); filter:blur(4px)}
.anniv-ring{position:absolute; inset:7px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; color:#fff; z-index:1;
  box-shadow:inset 0 3px 16px rgba(255,255,255,.30), inset 0 -10px 22px rgba(0,0,0,.20)}
.anniv-ring::before{content:""; position:absolute; inset:16px; border-radius:50%; border:2px dashed rgba(255,255,255,.55)}
.anniv-inner{display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:1; padding:0 12px}
.anniv-num{font-size:4.8rem; line-height:1.18; padding:.04em .06em 0; font-weight:800; letter-spacing:-.04em;
  background:linear-gradient(180deg,#ffffff,#e4d8ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.28))}
.anniv-anos{font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-top:.25rem; color:rgba(255,255,255,.95); white-space:nowrap}
.anniv-ribbon{background:var(--brand-900); color:#fff; padding:.6rem 1.6rem; border-radius:var(--r-pill);
  font-weight:700; font-size:.86rem; letter-spacing:.09em; text-transform:uppercase; box-shadow:var(--shadow)}
.anniv-ribbon b{color:var(--accent)}
@keyframes annivSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.anniv-medal::before{animation:none}}

/* ---------- Reveal on scroll (solo si hay JS; sin JS el contenido queda visible) ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none}}

@media (max-width:1199.98px){
  .navbar-nav{padding:.75rem 0}
  .navbar-nav .nav-link{font-size:.98rem; padding:.55rem .2rem!important}
  .nav-cta{display:inline-block; margin:.5rem 0 0}
}
@media (max-width:991px){
  .hero{min-height:auto; padding:6rem 0}
}

/* ============================================================
   Compatibilidad páginas internas (historia, valores, bolsa,
   labor, medio ambiente) — reestiliza el marcado Bootstrap.
   ============================================================ */
/* Hero interno (más bajo que el del home) */
.hero.hero-inner{min-height:54vh}
.hero .overlay{position:absolute; inset:0; z-index:1;
  background:linear-gradient(105deg, rgba(46,36,71,.92) 0%, rgba(46,36,71,.70) 55%, rgba(43,191,166,.26) 100%)}
.hero.hero-inner h1{font-size:clamp(2.1rem,4.6vw,3.2rem); color:#fff}
.hero.hero-inner .lead{color:rgba(255,255,255,.92); max-width:60ch; margin:0 auto}
/* Secciones y encabezados */
.page-section{padding:clamp(3.5rem,7vw,6rem) 0}
section h2:not(.title){letter-spacing:-.02em}
/* Tarjetas Bootstrap -> look premium */
.card{border:1px solid var(--line)!important; border-radius:var(--r)!important;
  box-shadow:var(--shadow-sm); background:#fff;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:transparent}
.card .bi{color:var(--brand)}
/* Botón primario legacy -> morado degradado */
.btn-primary{background:linear-gradient(135deg,#6a54a0,#5F4B8B)!important; border:0!important; color:#fff!important;
  border-radius:var(--r-pill)!important; font-weight:600; padding:.7rem 1.5rem; box-shadow:0 6px 18px rgba(95,75,139,.30)}
.btn-primary:hover{filter:brightness(1.06); color:#fff!important; transform:translateY(-2px); box-shadow:0 12px 30px rgba(95,75,139,.42)}
/* Acordeón (bolsa de trabajo) */
.accordion-item{border:1px solid var(--line); border-radius:var(--r)!important; overflow:hidden; margin-bottom:.85rem; box-shadow:var(--shadow-sm)}
.accordion-button{font-weight:700; color:var(--ink); background:#fff}
.accordion-button:not(.collapsed){color:#fff; background:var(--brand)}
.accordion-button:not(.collapsed)::after{filter:brightness(0) invert(1)}
.accordion-button:focus{box-shadow:none; border-color:var(--line)}
/* Listas con viñeta circular de marca */
.icon-circle{background:var(--accent-600)!important}
/* Íconos grandes de sección */
.icon-wrapper .bi, .icon-wrapper{color:var(--brand)}