/* ============================================================================
   WELL AID — prototipo de landing.  Lo que se toca para ampliar esta en dos
   sitios y solo en dos:
     1) las variables de color de :root  (paleta sacada del logo real)
     2) el bloque de DATOS al final del fichero (STORE / CATEGORIES / SHELF)
   Anadir una categoria = una linea en CATEGORIES. La rejilla, el buscador
   y el pie se redibujan solos.
   ========================================================================= */

:root{
  /* --- del logo: verde bosque del wordmark, verde hoja, verde copa --- */
  --forest:      #1E2C20;   /* SOLO las letras: el tono de su logo */
  --forest-lift: #2E4A34;
  /* el verde de MARCA, vivo: botones, iconos, enlaces, rotulos */
  --green:       #3E8E28;
  --green-dark:  #34761F;   /* al pasar por encima                 */
  --green-vivid: #6FBE3F;   /* el mas vivo: filetes y detalles     */
  --on-green:    #FFFFFF;   /* lo que va ENCIMA del verde          */
  --herb:        #3E8E28;
  --sage:        #A8C078;   /* copa del arbol                      */
  --sage-deep:   #6FBE3F;
  --sage-wash:   #EDF7E2;   /* tinte clarisimo, solo en los chips  */
  --bark:        #8A6A45;   /* tronco                              */
  --bark-wash:   #F4E7D6;

  --paper:       #FFFFFF;   /* la pagina es BLANCA, siempre        */
  --paper-2:     #FFFFFF;   /* ya no hay bandas de color           */
  --panel:       #FFFFFF;   /* tarjeta BLANCA con filete           */
  --panel-2:     #FFFFFF;
  --surface:     #FFFFFF;
  --ink:         #1E2C20;   /* las letras, el tono de SU logo      */
  --ink-soft:    #5A6656;
  --ink-faint:   #8D9887;
  --line:        #E3E6DE;
  --line-soft:   #EFF1EB;
  --seal-bg:     #FFFFFF;
  --leaf-ink:    #4E9E2A;   /* la hoja de la A                     */
  --leaf-vein:   #EAF2D9;   /* la hoja de la A                     */
  --shadow:      0 1px 2px rgba(30,44,32,.05), 0 12px 28px -14px rgba(30,44,32,.18);
  --shadow-lift: 0 2px 4px rgba(30,44,32,.06), 0 26px 50px -20px rgba(30,44,32,.28);

  --display: "Cinzel", ui-serif, Georgia, serif;
  --ui:      "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --r:       14px;
  --wrap:    1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --forest:#DCE6D4; --forest-lift:#B9D0AF; --herb:#9DBE7A; --sage:#A8C078;
    --green:#7FD152; --green-dark:#9BE070; --green-vivid:#9BE070; --on-green:#10200A; --on-green:#10200A;
    --sage-deep:#9BE070; --sage-wash:#1D2A16; --leaf-ink:#7FD152; --leaf-vein:#16210F; --leaf-ink:#A8C078; --bark:#C9A176; --bark-wash:#2A2118;
    --paper:#121810; --paper-2:#121810; --panel:#1B2417; --panel-2:#212C1C; --surface:#151C13;
    --ink:#E8EEE0; --ink-soft:#A9B6A2; --ink-faint:#7C8A76;
    --line:#2B3827; --line-soft:#232E20;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 26px 50px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --forest:#DCE6D4; --forest-lift:#B9D0AF; --herb:#9DBE7A; --sage:#A8C078;
  --green:#7FD152; --green-dark:#9BE070; --green-vivid:#9BE070; --on-green:#10200A;
  --sage-deep:#9BE070; --sage-wash:#1D2A16; --leaf-ink:#7FD152; --leaf-vein:#16210F; --bark:#C9A176; --bark-wash:#2A2118;
  --paper:#121810; --paper-2:#121810; --panel:#1B2417; --panel-2:#212C1C; --surface:#151C13;
  --ink:#E8EEE0; --ink-soft:#A9B6A2; --ink-faint:#7C8A76;
  --line:#2B3827; --line-soft:#232E20;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 28px -14px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 26px 50px -20px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ui); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:500; color:var(--herb); margin:0;
}
h2{font-family:var(--display); font-weight:600; letter-spacing:.01em; line-height:1.15; margin:.2em 0 .3em}

/* ---------- 1. barra de aviso ---------------------------------------- */
.topbar{background:var(--surface); color:var(--ink-soft); font-size:13px; letter-spacing:.02em;
  border-bottom:1px solid var(--line-soft)}
.topbar .wrap{display:flex; align-items:center; justify-content:center; gap:22px; min-height:38px; flex-wrap:wrap}
.topbar b{font-weight:500; color:var(--green)}
.topbar a{color:inherit; text-decoration:none; opacity:.75}
.topbar a:hover{opacity:1}
.topbar .sep{opacity:.35}
@media (max-width:760px){ .topbar .hide-sm{display:none} }

/* ---------- 2. cabecera pegajosa -------------------------------------- */
header.bar{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line-soft);
}
header.bar .wrap{display:flex; align-items:center; gap:22px; min-height:70px}
nav.main{display:flex; gap:24px; margin-left:auto; align-items:center}
nav.main a{
  text-decoration:none; font-size:14px; font-weight:400; letter-spacing:.04em;
  color:var(--ink-soft); padding:6px 0; border-bottom:1.5px solid transparent;
}
nav.main a:hover{color:var(--green); border-bottom-color:var(--green)}
.acts{display:flex; gap:10px; align-items:center; margin-left:auto}
nav.main + .acts{margin-left:0}
.iconbtn{
  position:relative; width:38px; height:38px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); color:var(--ink-soft); display:grid; place-items:center;
  cursor:pointer; transition:.15s;
}
.iconbtn:hover{color:var(--green); border-color:var(--green); background:var(--sage-wash)}
.iconbtn svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6}
.pill-count{
  position:absolute; top:-3px; right:-3px;
  background:var(--green); color:var(--on-green); font-size:10px; font-weight:500;
  min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 4px;
}
@media (max-width:940px){ nav.main{display:none} }

/* ---------- 3. el logotipo (WELL AID / PHARMACY CORP) ------------------ */
.mark{text-decoration:none; display:inline-block; text-align:center; color:var(--forest)}
.mark .name{
  /* Cinzel 600: sus MINUSCULAS son versalitas, asi que se escribe "Well Aid" y las
     hace la fuente — no se finge con dos font-size. Y el logo esta estirado ~1,10
     en horizontal (medido: asta/alto 0,186 y ancho(WELL)/alto(W) 4,18). */
  font-family:var(--display); font-weight:600;
  font-size:var(--mark-size, 26px); line-height:1;
  letter-spacing:.06em; white-space:nowrap; display:inline-block;
  transform:scaleX(1.10); transform-origin:center;
}
.mark .aleaf{position:relative; display:inline-block}
.mark .aleaf svg{
  position:absolute; left:50%; bottom:.29em; transform:translateX(-50%);
  width:.78em; height:.34em; overflow:visible;
}
.mark .aleaf .blade{fill:var(--leaf-ink)}
.mark .aleaf .pet{fill:none; stroke:var(--leaf-ink); stroke-width:2.4; stroke-linecap:round}
.mark .aleaf .rib{fill:none; stroke:var(--leaf-vein); stroke-width:1.4;
  vector-effect:non-scaling-stroke; opacity:.75}
.mark .sub{
  display:flex; align-items:center; justify-content:center;
  gap:.8em; margin-top:.5em;
  font-size:calc(var(--mark-size, 26px) * .29);
  letter-spacing:.34em; text-indent:.34em; font-weight:400;
  color:var(--ink-soft); white-space:nowrap;
}
.mark .sub i{display:block; width:1.7em; height:1px; background:currentColor; opacity:.55; flex:none}
.mark:hover .name{color:var(--forest-lift)}

/* ---------- 4. hero ---------------------------------------------------- */
.hero{position:relative; overflow:hidden; padding:60px 0 70px; text-align:center}
.hero:before{
  content:""; position:absolute; inset:0; z-index:0;
  background:none;
}
.hero .wrap{position:relative; z-index:1}
.hero .disc{
  width:200px; height:200px; margin:0 auto 24px;
  border-radius:50%; background:var(--seal-bg);
}
.hero .mark{--mark-size:clamp(42px, 8vw, 78px); margin-bottom:20px}
.slogan{
  font-family:var(--display); font-style:italic; font-weight:400;
  font-size:clamp(18px, 2.4vw, 25px); color:var(--green);
  margin:0 auto 14px; letter-spacing:.01em;
}
.hero p.lede{max-width:640px; margin:0 auto 30px; color:var(--ink-soft); font-size:17px; font-weight:300}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:34px}
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none; cursor:pointer;
  font-family:var(--ui); font-size:15px; font-weight:400; letter-spacing:.03em;
  padding:13px 26px; border-radius:999px; border:1px solid transparent; transition:.16s;
}
.btn svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7}
.btn-primary{background:var(--green); color:var(--on-green)}
.btn-primary:hover{background:var(--green-dark)}
.btn-ghost{background:var(--surface); color:var(--green); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green); background:var(--sage-wash)}

.search{max-width:620px; margin:0 auto; position:relative}
.search input{
  width:100%; font-family:var(--ui); font-size:16px; font-weight:300; color:var(--ink);
  padding:16px 20px 16px 50px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow);
  outline:none; transition:.16s;
}
.search input::placeholder{color:var(--ink-faint)}
.search input:focus{border-color:var(--green); box-shadow:0 0 0 4px var(--sage-wash)}
.search > svg{
  position:absolute; left:19px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; stroke:var(--ink-faint); fill:none; stroke-width:1.7;
}

/* franja de confianza */
.trust{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--paper)}
.trust .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:2px}
.trust div{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:18px 12px; font-size:13.5px; color:var(--ink-soft); text-align:left;
}
.trust svg{width:19px; height:19px; stroke:var(--green); fill:none; stroke-width:1.5; flex:none}
.trust b{font-weight:500; color:var(--ink)}
@media (max-width:820px){ .trust .wrap{grid-template-columns:repeat(2,1fr)} }

/* ---------- 5. secciones ---------------------------------------------- */
section{padding:76px 0; scroll-margin-top:78px}
.sechead{text-align:left; max-width:680px; margin:0 0 30px}
.secbar{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:26px}
.secbar .sechead{margin:0}
.seclink{
  text-decoration:none; color:var(--green); font-size:14px; font-weight:500;
  white-space:nowrap; display:inline-flex; align-items:center; gap:6px; flex:none;
}
.seclink:hover{color:var(--green-dark)}
@media (max-width:640px){ .secbar{flex-direction:column; align-items:flex-start; gap:10px} }
.sechead h2{font-size:clamp(26px,3.2vw,36px)}
.sechead > p:last-child{color:var(--ink-soft); font-weight:300; margin:0}

.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
@media (max-width:980px){ .cats{grid-template-columns:repeat(3,1fr)} }
@media (max-width:720px){ .cats{grid-template-columns:repeat(2,1fr)} }
.cat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:22px 20px 20px; text-decoration:none; display:block;
  transition:.16s; position:relative; overflow:hidden;
}
.cat:before{
  content:""; position:absolute; right:-30%; bottom:-60%; width:150px; height:150px;
  border-radius:50%; background:var(--sage-wash); opacity:0; transition:.25s;
}
.cat:hover{border-color:var(--green); box-shadow:0 8px 20px -12px rgba(30,44,32,.28)}
.cat:before{display:none}
.cat > *{position:relative}
.cat .ico{
  width:44px; height:44px; border-radius:11px; background:var(--sage-wash);
  display:grid; place-items:center; margin-bottom:16px;
}
.cat .ico svg{width:23px; height:23px; stroke:var(--green); fill:none; stroke-width:1.5}
.cat h3{font-family:var(--ui); font-size:15.5px; font-weight:500; margin:0 0 5px; letter-spacing:.01em}
.cat p{margin:0; font-size:13.5px; color:var(--ink-soft); font-weight:300; line-height:1.5}
.cat .n{margin-top:14px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.cats .empty{
  grid-column:1/-1; text-align:center; padding:40px; color:var(--ink-faint);
  border:1px dashed var(--line); border-radius:var(--r);
}

/* estante de producto */
.shelf{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
@media (max-width:980px){ .shelf{grid-template-columns:repeat(2,1fr)} }
.prod{
  background:var(--paper); border:0; border-radius:var(--r);
  overflow:visible; transition:.16s; display:flex; flex-direction:column;
}
.prod .shot{
  position:relative; aspect-ratio:1/1; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r);
  display:grid; place-items:center; transition:.16s;
}
.prod:hover .shot{border-color:var(--green)}
.prod .shot .box{
  position:relative; width:54%; height:66%; border-radius:8px; border:1px solid var(--line-soft);
  background:linear-gradient(160deg, #FFFFFF, #F7F9F4);
  box-shadow:0 14px 24px -16px rgba(30,44,32,.5);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px;
}
.prod .shot .box i{display:block; border-radius:2px; background:var(--line)}
.prod .shot .box i:nth-child(1){width:44%; height:6px; background:var(--green-vivid)}
.prod .shot .box i:nth-child(2){width:62%; height:5px}
.prod .shot .box i:nth-child(3){width:34%; height:5px}
.prod .box img.seal{
  position:absolute; width:52%; right:6%; bottom:7%;
  transform:rotate(-9deg); filter:drop-shadow(0 5px 9px rgba(30,44,32,.35));
}
.prod .body{padding:14px 2px 4px; display:flex; flex-direction:column; gap:6px; flex:1}
.prod .body .tag{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
.prod .body h3{margin:0; font-size:15px; font-weight:500; letter-spacing:.01em; line-height:1.4}
.prod .body .row{margin-top:auto; padding-top:12px; display:flex; align-items:center; justify-content:space-between}
.prod .price{font-family:var(--display); font-size:18px; font-weight:600}
.prod .add{
  border:1px solid var(--line); background:var(--paper); color:var(--green);
  border-radius:999px; padding:7px 16px; font-family:var(--ui); font-size:13px; cursor:pointer; transition:.15s;
}
.prod .add:hover{background:var(--green); color:var(--on-green); border-color:var(--green)}
.badge-tax{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--bark);
  background:var(--bark-wash); border-radius:999px; padding:2px 9px; width:fit-content;
}

/* entrega: tres puertas */
.doors{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
@media (max-width:900px){ .doors{grid-template-columns:1fr} }
.door{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px;
  display:flex; flex-direction:column; gap:10px;
}
.door.lead{border-color:var(--green); box-shadow:0 8px 22px -14px rgba(62,142,40,.5)}
.door h3{font-family:var(--display); font-size:20px; font-weight:600; margin:2px 0 0}
.door p{margin:0; font-size:14.5px; color:var(--ink-soft); font-weight:300}
.door .foot{margin-top:auto; padding-top:16px; font-size:13px; color:var(--ink-faint)}


/* valores */
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
@media (max-width:860px){ .values{grid-template-columns:1fr; gap:26px} }
.value{display:flex; gap:16px}
.value .ico{width:42px; height:42px; flex:none; border-radius:50%; background:var(--sage-wash); display:grid; place-items:center}
.value .ico svg{width:20px; height:20px; stroke:var(--green); fill:none; stroke-width:1.5}
.value h3{font-family:var(--display); font-size:17px; margin:2px 0 4px; font-weight:600}
.value p{margin:0; font-size:14px; color:var(--ink-soft); font-weight:300}

/* la tienda */
.store{background:var(--paper)}
.store .grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
@media (max-width:900px){ .store .grid{grid-template-columns:1fr; gap:30px} }
.hours{width:100%; border-collapse:collapse; margin-top:20px; font-size:14.5px}
.hours td{padding:9px 0; border-bottom:1px dashed var(--line)}
.hours td:last-child{text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums}
.hours tr.today td{color:var(--green-dark); font-weight:500}
.hours tr.today td:first-child:before{content:"● "; color:var(--green-vivid); font-size:10px; vertical-align:middle}
.addr{display:flex; gap:14px; align-items:flex-start; margin-bottom:10px}
.addr svg{width:19px; height:19px; stroke:var(--green); fill:none; stroke-width:1.5; flex:none; margin-top:5px}
.addr .big{font-family:var(--display); font-size:19px; font-weight:600; line-height:1.4; text-decoration:none}
.mapcard{border-radius:var(--r); border:1px solid var(--line); overflow:hidden; background:var(--surface)}
.mapcard .plan{display:block; width:100%; height:340px; border:0; background:var(--paper-2)}
.mapcard .foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-top:1px solid var(--line-soft); font-size:13.5px; color:var(--ink-soft);
}

/* alta de correo */
.signup{text-align:left}
.signup form{display:flex; gap:10px; max-width:470px; margin:24px 0 10px; flex-wrap:wrap}
.signup input{
  flex:1 1 240px; padding:14px 18px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); font-family:var(--ui); font-size:15px; color:var(--ink); outline:none;
}
.signup input:focus{border-color:var(--green); box-shadow:0 0 0 4px var(--sage-wash)}
.signup small{color:var(--ink-faint); font-size:12.5px}

/* pie */
footer{background:var(--paper); color:var(--ink-soft); padding:0; border-top:1px solid var(--line)}
footer .mark{color:var(--forest)}
footer .mark .sub{color:var(--ink-faint)}
footer .cols{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:38px;
  padding:38px 0; border-top:1px solid var(--line-soft); margin-top:32px;
}
@media (max-width:860px){ footer .cols{grid-template-columns:1fr 1fr; gap:28px} }
footer h4{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--herb); margin:0 0 14px; font-weight:500}
footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
footer a{text-decoration:none; font-size:14px; color:var(--ink-soft)}
footer a:hover{color:var(--green)}
footer .about p{font-size:14px; font-weight:300; line-height:1.65; max-width:320px; margin:0}
footer .legal{
  border-top:1px solid var(--line-soft); padding:20px 0 30px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:var(--ink-faint);
}

/* aviso de prototipo */
.proto{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:90;
  display:flex; align-items:center; gap:14px; max-width:calc(100% - 32px);
  background:#1E2C20; color:#FAF5EC; border-radius:999px;
  padding:10px 12px 10px 20px; font-size:13px; box-shadow:var(--shadow-lift);
}
.proto b{color:#A8C078; font-weight:500}
.proto button{
  border:0; background:rgba(250,245,236,.14); color:inherit; cursor:pointer;
  width:26px; height:26px; border-radius:50%; font-size:15px; line-height:1; flex:none;
}
.proto button:hover{background:rgba(250,245,236,.28)}
@media (max-width:640px){ .proto{font-size:12px; padding:9px 10px 9px 16px} }