/* =========================================================
   LA HERBOLARIA — stylesheet (diseño agosto)
   Fuentes: Frick 0.3 (display) + Consolas (body / UI)
   ========================================================= */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Frick';
  src:url('../assets/fonts/frick-regular.woff2') format('woff2');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Consolas';
  src:url('../assets/fonts/consolas-regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Consolas';
  src:url('../assets/fonts/consolas-bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --black:#101016;
  --green:#059141;
  --green-light:#50b27a;
  --purple:#8f0386;
  --accent:#bfc908;
  --red:#f11f0e;
  --pink:#ec889a;
  --lavender:#b1bbdb;
  --olive:#809e29;
  --cream:#f4f2ea;
  --teal:#00ba93;
  --magenta:#f769dc;
  --orange:#ea6f0a;
  --white:#fff;

  --font-display:'Frick','Arial Black',sans-serif;
  --font-mono:'Consolas',ui-monospace,'SFMono-Regular',Menlo,monospace;

  --container:1240px;
  --radius-md:18px;
  --radius-sm:10px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-mono);
  color:var(--black);
  background:var(--white);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;margin:0;padding:0;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,p{margin:0;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--black);color:var(--white);
  padding:12px 20px;font-size:14px;font-weight:700;
}
.skip-link:focus{left:0;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.text-center{text-align:center;}
.text-accent{color:var(--accent);}
.only-desktop{display:inline;}
@media (max-width:700px){.only-desktop{display:none;}}

/* ---------- Typography ---------- */
.eyebrow{
  font-family:var(--font-mono);font-weight:700;font-size:13px;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:6px;
}
.heading-xl{
  font-family:var(--font-display);
  font-size:clamp(38px,6.2vw,72px);
  line-height:.95;text-transform:uppercase;margin:0 0 22px;
}
.heading-lg{
  font-family:var(--font-display);
  font-size:clamp(30px,4.6vw,50px);
  line-height:1;text-transform:uppercase;margin:0 0 16px;
}
.lead{
  font-size:16px;max-width:680px;margin:0 auto 46px;
}
/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:14px;
  letter-spacing:.03em;text-transform:uppercase;
  padding:16px 30px;border-radius:999px;border:none;
  transition:transform .15s ease,filter .15s ease;white-space:nowrap;
}
.btn:hover{filter:brightness(1.08);}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:3px solid currentColor;outline-offset:3px;}
.btn--accent{background:var(--accent);color:var(--black);}
.btn--purple{background:var(--purple);color:var(--white);}
.btn--black{background:var(--black);color:var(--white);}
.btn--block{width:100%;}
.btn--nav{padding:12px 26px;}

/* =========================================================
   HEADER
   ========================================================= */
.site-header{
  position:sticky;top:0;z-index:50;
  background:var(--white);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-top:16px;padding-bottom:16px;
}
.logo img{height:26px;width:auto;}
.main-nav{
  display:flex;align-items:center;gap:34px;
  font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
}
.main-nav a:not(.btn){color:var(--green);}
.main-nav a:not(.btn):hover{opacity:.72;}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:transparent;border:none;padding:0;
}
.nav-toggle span{display:block;height:2px;background:var(--green);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:880px){
  .nav-toggle{display:flex;}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--white);flex-direction:column;align-items:stretch;
    gap:20px;padding:24px;box-shadow:0 14px 22px rgba(0,0,0,.10);display:none;
  }
  .main-nav.is-open{display:flex;}
  .btn--nav{width:100%;}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:88vh;
  display:flex;align-items:flex-end;overflow:hidden;background:var(--black);
}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__video{width:100%;height:100%;object-fit:cover;object-position:center 35%;}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,16,22,.10) 0%,rgba(16,16,22,.45) 55%,rgba(16,16,22,.82) 100%);
}
.hero__mascota{
  position:absolute;top:24px;left:20px;width:120px;z-index:2;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.32));
}
.hero__content{
  position:relative;z-index:2;
  padding-top:160px;padding-bottom:70px;color:var(--white);
}
.hero__title{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(40px,7.2vw,86px);line-height:.94;margin:0 0 22px;
}
.hero__subtitle{font-size:17px;max-width:500px;margin:0 0 32px;}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;}

@media (max-width:700px){
  .hero{min-height:92vh;}
  .hero__content{padding-top:130px;}
  .hero__mascota{width:78px;top:16px;left:12px;}
}

/* =========================================================
   DISPENSA MEDICINAL
   ========================================================= */
.dispensa{background:var(--green);color:var(--white);padding:96px 0;}
.dispensa__grid{
  display:grid;grid-template-columns:1fr 1.15fr;
  gap:64px;align-items:center;
}
.dispensa__title{margin-bottom:26px;}
.dispensa__intro{font-size:17px;line-height:1.6;max-width:430px;margin-bottom:52px;}

/* --- Bloque de cuota --- */
.cuota{position:relative;display:inline-block;padding-top:30px;}
.cuota__badge{
  position:absolute;top:0;left:26px;z-index:2;
  background:var(--black);color:var(--cream);
  font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 30px;border-radius:20px;white-space:nowrap;
}
.cuota__monto{
  background:var(--accent);color:var(--black);
  font-family:var(--font-display);font-size:clamp(38px,4.4vw,58px);
  line-height:1;text-transform:uppercase;
  padding:70px 40px 34px;border-radius:18px;
}

/* --- Panel de costos --- */
.dispensa__panel{
  border:2px solid rgba(255,255,255,.55);
  border-radius:34px;padding:44px 44px 40px;
}
.costos{display:flex;flex-direction:column;gap:22px;}
.costo__label{
  display:block;
  font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;margin-bottom:9px;
}
.costo__track{
  display:block;width:100%;height:30px;
  background:var(--green-light);border-radius:999px;overflow:hidden;
}
.costo__fill{display:block;height:100%;border-radius:999px;}
.costo__fill--pink{background:var(--pink);}
.costo__fill--red{background:var(--red);}
.costo__fill--lavender{background:var(--lavender);}
.costo__fill--purple{background:var(--purple);}
.costo__fill--lima{background:var(--accent);}

.dispensa__legal{
  margin-top:40px;font-size:14.5px;line-height:1.55;
  color:rgba(255,255,255,.95);
}

@media (max-width:980px){
  .dispensa__grid{grid-template-columns:1fr;gap:48px;}
  .dispensa__intro{max-width:none;margin-bottom:40px;}
  .cuota{display:block;}
  .cuota__monto{text-align:center;}
  .cuota__badge{left:50%;transform:translateX(-50%);}
}
@media (max-width:560px){
  .dispensa{padding:72px 0;}
  .dispensa__panel{padding:32px 24px 30px;border-radius:26px;}
  .cuota__badge{font-size:13px;padding:14px 22px;}
  .cuota__monto{padding:64px 24px 30px;}
}

/* =========================================================
   MEMBRESÍA / CARDS
   ========================================================= */
.membership{
  position:relative;background:var(--black);color:var(--white);
  padding:100px 0;overflow:hidden;
}
.membership .lead{color:rgba(255,255,255,.85);}
.membership .container{position:relative;z-index:1;}

.cards-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;margin-bottom:52px;
}
.card{
  border-radius:var(--radius-md);padding:22px;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;color:var(--black);
}
.card--red{background:var(--red);}
.card--pink{background:var(--pink);}
.card--lavender{background:var(--lavender);}
.card--olive{background:var(--olive);}

.card__badge{
  background:var(--black);color:var(--white);
  font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:6px 14px;border-radius:6px;margin-bottom:14px;
}
.card__title{
  font-family:var(--font-display);font-size:30px;
  text-transform:uppercase;line-height:1;margin-bottom:10px;
}
.card__text{
  font-weight:700;font-size:12.5px;text-transform:uppercase;
  line-height:1.4;margin-bottom:18px;
}
.card__img{
  width:100%;height:auto;border-radius:var(--radius-sm);
  aspect-ratio:25/24;object-fit:cover;margin-top:auto;
}

@media (max-width:980px){.cards-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){
  .cards-grid{grid-template-columns:1fr;}
  .membership{padding:72px 0;}
}

/* =========================================================
   HACETE SOCIO
   ========================================================= */
.socio{display:grid;grid-template-columns:1fr 1fr;background:var(--purple);color:var(--white);}
.socio__media{position:relative;min-height:520px;}
.socio__media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.socio__content{position:relative;padding:76px 56px;}

/* Cluster de stickers que cruza el borde negro/violeta, como en el diseño */
.socio__stickers{
  position:absolute;top:0;right:5%;
  width:210px;height:0;z-index:3;pointer-events:none;
}
.socio__flor-naranja{position:absolute;top:-78px;right:0;width:155px;}
.socio__clh{position:absolute;top:-14px;right:112px;width:72px;}

.socio .eyebrow{color:var(--white);opacity:.9;}
.socio__title{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.socio__flor{width:52px;}

.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 46px;margin-top:52px;}
.benefit__icon{width:auto;height:46px;margin-bottom:16px;}
.benefit__title{
  font-weight:700;font-size:14px;text-transform:uppercase;
  letter-spacing:.03em;color:var(--accent);margin-bottom:12px;
}
.benefit__text{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.92);}

@media (max-width:900px){
  .socio{grid-template-columns:1fr;}
  .socio__media{min-height:340px;}
  .socio__content{padding:64px 24px 56px;}
  .socio__stickers{top:-30px;right:20px;transform:scale(.8);transform-origin:top right;}
  .benefits-grid{grid-template-columns:1fr;gap:34px;}
}

/* =========================================================
   CÓMO INSCRIBIRTE
   ========================================================= */
.steps{background:var(--cream);padding:100px 0;}
.steps .lead{margin-bottom:56px;}

.steps__list{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start;}
.step{display:flex;flex-direction:column;gap:14px;height:100%;}
.step__card{
  border-radius:var(--radius-md);padding:24px 22px 26px;
  color:var(--black);flex:1;
}
.step__card--teal{background:var(--teal);}
.step__card--magenta{background:var(--magenta);}
.step__card--orange{background:var(--orange);}
.step__card--accent{background:var(--accent);}

.step__num{
  display:block;font-family:var(--font-display);
  font-size:30px;line-height:1;margin-bottom:14px;
}
.step__title{
  font-family:var(--font-display);font-size:23px;
  text-transform:uppercase;line-height:1.05;margin-bottom:16px;
}
.step__caption{
  font-weight:700;font-size:11.5px;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.45;
}

.step__btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--black);border-radius:var(--radius-md);
  padding:20px 22px;
  font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  transition:filter .15s ease,transform .15s ease;
}
.step__btn:hover{filter:brightness(1.25);}
.step__btn:active{transform:translateY(1px);}
.step__btn:focus-visible{outline:3px solid var(--black);outline-offset:3px;}
.step__btn--teal{color:var(--teal);}
.step__btn--magenta{color:var(--magenta);}
.step__btn--orange{color:var(--orange);}
.step__arrow{font-size:17px;}

@media (max-width:980px){
  .steps__list{grid-template-columns:repeat(2,1fr);gap:28px;}
}
@media (max-width:600px){
  .steps__list{grid-template-columns:1fr;}
  .steps{padding:72px 0;}
}

/* =========================================================
   CONTACTO
   ========================================================= */
.contact{background:var(--green);color:var(--white);padding:100px 0;}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.contact .eyebrow{color:var(--white);opacity:.92;}
.contact__text{font-size:15px;max-width:390px;color:rgba(255,255,255,.94);}

.contact__form{display:flex;flex-direction:column;gap:16px;}
.field input,.field textarea{
  width:100%;border:none;border-radius:var(--radius-sm);
  background:var(--green-light);color:var(--black);
  font-family:var(--font-mono);font-weight:700;font-size:13px;
  letter-spacing:.02em;text-transform:uppercase;
  padding:18px 20px;resize:vertical;
}
.field textarea{min-height:130px;}
.field input::placeholder,.field textarea::placeholder{color:rgba(16,16,22,.62);}
.field input:focus,.field textarea:focus{outline:3px solid var(--black);outline-offset:2px;}
.form__status{font-size:13px;min-height:18px;}

@media (max-width:880px){
  .contact__grid{grid-template-columns:1fr;gap:40px;}
  .contact{padding:72px 0;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--black);color:var(--white);padding:64px 0 48px;}
.footer__inner{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;}
.footer__logo{width:min(330px,72vw);}
.footer__meta{display:flex;flex-direction:column;align-items:center;gap:16px;}
.footer__ubicacion{
  font-weight:700;font-size:13px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);
}
.footer__links{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:14px 30px;font-size:13.5px;
}
.footer__links a{display:inline-flex;align-items:center;gap:9px;transition:color .15s ease;}
.footer__links a:hover{color:var(--accent);}
.footer__links svg{width:19px;height:19px;flex-shrink:0;}
.footer__legal{
  max-width:640px;font-size:11.5px;line-height:1.6;
  color:rgba(255,255,255,.55);margin-top:6px;
}