:root{
  --green:#38A863; --green-d:#2B8A50; --green-l:#5FC086;
  --brown:#141414; --brown-l:#3D3D3D; --ink:#262626; --ink-soft:#666666;
  --mint:#E7F4EC; --beige:#F7EDE5; --peach:#F6CFAE; --foot:#EEE7E1;
  --red:#D7282F; --white:#FFFFFF; --line:rgba(0,0,0,.12);
  --shadow:0 14px 34px -24px rgba(90,60,40,.45);
  --font:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{overflow-x:clip;scroll-padding-top:calc(96px + env(safe-area-inset-top,0px));scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.lock{overflow:hidden}
img,svg{max-width:100%;display:block}
.ic{display:inline-block;flex:none;line-height:1;font-size:1.2em;vertical-align:-.15em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.wrap{width:min(1400px,100% - clamp(2.5rem,8vw,8rem));margin-inline:auto}

/* ===== Secciones ===== */
.sec{padding:clamp(3rem,7vw,4.5rem) 0}
.sec.mint{background:var(--mint)}
.sec.beige{background:var(--beige)}
.sec.peach{background:var(--peach)}
.sec-head{text-align:center;margin-bottom:2.2rem}
.h2{font-weight:700;color:var(--brown);font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.01em}
.sub-link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.6rem;color:var(--green);font-size:1.05rem}
.sub-link.brown{color:var(--brown-l)}
.sub-link svg{width:18px;height:18px;transition:transform .2s}
.sub-link .ic{font-size:18px;transition:transform .2s}
.sub-link:hover svg{transform:translateX(4px)}
.sub-link:hover .ic{transform:translateX(4px)}

/* ===== Beneficios bajo el slider (tarjeta flotante) ===== */
.perks{position:relative;z-index:5;padding:0 0 1rem}
.perks-card{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-radius:22px;
  margin-inline:clamp(1rem,4vw,3.5rem);padding:1.35rem .5rem;border:1px solid rgba(20,20,20,.06);
  box-shadow:0 30px 60px -36px rgba(20,60,35,.45),0 8px 20px -14px rgba(20,60,35,.18)}
.perks-card li{display:flex;align-items:center;gap:.95rem;padding:.3rem clamp(.9rem,2vw,1.6rem);min-width:0}
.perks-card li + li{border-left:1px solid var(--line)}
.pk-ic{width:48px;height:48px;flex:none;border-radius:14px;background:var(--mint);color:var(--green-d);display:grid;place-items:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.pk-ic .ic{font-size:24px}
.perks-card li:hover .pk-ic{transform:rotate(-8deg) scale(1.08);background:var(--green-d);color:#fff}
.perks-card b{display:block;font-size:1rem;font-weight:700;color:var(--brown);line-height:1.25}
.pk-num{font-variant-numeric:tabular-nums}
.perks-card small{display:block;margin-top:.15rem;font-size:.84rem;color:var(--ink-soft);line-height:1.35}
@media (max-width:1100px){
  .perks-card{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:.4rem;padding:1rem .4rem}
  .perks-card li:nth-child(3){border-left:0}
  .perks-card li:nth-child(n+3){border-top:1px solid var(--line);padding-top:1rem}
  .perks-card li:nth-child(-n+2){padding-bottom:.7rem}
}
@media (max-width:760px){
  .perks-card{margin-inline:.6rem;border-radius:18px}
  .perks-card li{flex-direction:column;align-items:flex-start;gap:.6rem;padding:.4rem .9rem}
  .pk-ic{width:42px;height:42px;border-radius:12px}
  .pk-ic .ic{font-size:21px}
  .perks-card b{font-size:.92rem}
  .perks-card small{font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){.pk-ic{transition:none}}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:60;background:#fff;transition:box-shadow .3s}
.header.scrolled{box-shadow:0 8px 24px -20px rgba(0,0,0,.45)}
.hd{position:relative;display:flex;align-items:center;gap:2rem;height:92px;transition:height .3s}
.header.scrolled .hd{height:72px}
.logo{display:flex;align-items:center;gap:.7rem;color:var(--brown);font-weight:700;font-size:1.45rem;letter-spacing:-.01em;flex:none}
.logo img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2.5px solid var(--green);transition:width .3s,height .3s}
.header.scrolled .logo img{width:52px;height:52px}
.logo b{color:var(--green);font-weight:500}
.logo.sm img{width:48px;height:48px;border-width:2px}
.logo.sm{font-size:1.2rem}
.menu{display:flex;list-style:none;gap:.4rem}
.menu > li{position:relative}
.menu > li > a,.menu > li > button{display:flex;align-items:center;gap:.25rem;padding:.6rem .7rem;font-weight:500;font-size:1rem;color:var(--brown)}
.menu > li > *:hover{color:var(--green)}
.menu svg{width:16px;height:16px}
.menu .ic{font-size:16px}
.mega{
  position:absolute;top:100%;left:-.4rem;min-width:430px;background:#fff;border:1px solid rgba(20,40,25,.08);
  border-radius:16px;padding:.85rem;box-shadow:0 22px 44px -22px rgba(20,60,35,.38),0 4px 12px -8px rgba(20,60,35,.15);
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s
}
.mega > div + div{border-left:1px solid rgba(0,0,0,.07);padding-left:.6rem;margin-left:.6rem}
.mega.one{grid-template-columns:1fr;min-width:250px}
/* Abre por hover o por clic/teclado (clase .open, gestionada en JS). Nunca dos a la vez. */
.menu > li:hover .mega,.menu > li.open .mega{opacity:1;visibility:visible;transform:none}
.menu:hover > li:not(:hover) .mega{transition:none}
.mega h4{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-soft);font-weight:600;margin:.2rem 0 .45rem .45rem}
.mega ul{list-style:none;display:grid;gap:.05rem}
.mega a{display:flex;align-items:center;gap:.6rem;padding:.36rem .45rem;border-radius:10px;color:var(--brown);font-size:.9rem;line-height:1.2;white-space:nowrap;transition:background .15s,color .15s}
.mega a:hover{background:var(--mint);color:var(--green-d)}
.mega a img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none;background:var(--mint)}
.mega a small{margin-left:auto;padding-left:.4rem;font-size:.72rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.mega a.mega-all{color:var(--green-d);font-weight:600;font-size:.84rem;margin-top:.15rem}
.mega a.mega-all::after{content:"→";transition:transform .2s}
.mega a.mega-all:hover::after{transform:translateX(3px)}
.hd-actions{margin-left:auto;display:flex;align-items:center;gap:.4rem}
.icon-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative;color:var(--brown)}
.icon-btn:hover{background:var(--mint);color:var(--green-d)}
.icon-btn svg{width:25px;height:25px;stroke-width:1.6}
.icon-btn .ic{font-size:25px}
.badge{position:absolute;top:3px;right:1px;min-width:19px;height:19px;border-radius:999px;background:var(--green);color:#fff;font-size:.7rem;font-weight:700;display:grid;place-items:center;padding:0 4px}
.burger{display:none}
@media (min-width:1200px){
  .menu{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
}
@media (max-width:1020px){
  .menu{display:none}.burger{display:grid}
  .hd{height:88px;gap:.5rem}.header.scrolled .hd{height:72px}
  .logo img,.header.scrolled .logo img{width:60px;height:60px}
  .logo{font-size:1.2rem}
}
@media (max-width:360px){.hd{gap:.3rem}.icon-btn{width:42px;height:42px}.logo{font-size:1rem;gap:.45rem}.logo img,.header.scrolled .logo img{width:40px;height:40px}}

/* ===== Hero ===== */
.hero{padding:1rem 0 0;position:sticky;top:72px;z-index:1}
/* Telón de plantas: todo lo que sigue al hero sube y lo tapa al bajar */
.over-hero{--cur:230px;position:relative;z-index:2;background:#fff;margin-top:calc(var(--cur) + 3rem)}
.curtain{position:absolute;left:0;right:0;bottom:calc(100% - 2px);height:var(--cur);pointer-events:none}
.curtain .cur{position:absolute;inset:0;width:100%;height:100%;display:block;will-change:transform}
/* Las capas de atrás son un poco más anchas: al mecerse de costado nunca se ve el borde */
.curtain .cur-back,.curtain .cur-mid{left:-4%;width:108%;max-width:none}
@media (max-width:760px){.over-hero{--cur:130px;margin-top:calc(var(--cur) + 2rem)}}
.slider{position:relative;border-radius:32px;overflow:hidden;height:clamp(460px,calc(100svh - 92px - 2.5rem),820px);background:#1F3428;isolation:isolate}
.slide{position:absolute;inset:0;background:#1F3428;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;visibility:hidden;overflow:hidden}
.slide.on{visibility:visible}
/* Fondo: la misma foto, desenfocada, para que los colores siempre combinen */
.slide::before{content:"";position:absolute;inset:0;z-index:0;background:var(--bg,var(--img)) center/cover no-repeat}
/* Sombra para leer el texto + viñeta suave en los bordes */
.slide::after{content:"";position:absolute;inset:0;z-index:0;background:
  radial-gradient(120% 140% at 78% 50%,transparent 35%,rgba(8,14,10,.45) 100%),
  linear-gradient(90deg,rgba(8,14,10,.6) 0%,rgba(8,14,10,.32) 42%,rgba(8,14,10,0) 68%)}
/* Grano muy fino: evita las franjas que aparecen en los degradados grandes */
.slider::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.045;background:url("../img/grano.png") repeat;background-size:160px}
.slide-txt{position:relative;z-index:2;padding:0 clamp(1.5rem,4vw,3rem) 0 clamp(5rem,8vw,7.5rem);max-width:680px}
.slide h1,.slide h2{color:#fff;font-weight:700;font-size:clamp(2.3rem,4.2vw,3.7rem);line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
.slide .heart{font-size:.85em;vertical-align:-.02em}
.slide p{color:rgba(255,255,255,.86);font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.55;margin:1.1rem 0 2rem;max-width:34ch}
.slide .btn{background:#fff;color:var(--brown)}
.slide .btn:hover{background:var(--green-l);color:var(--brown)}
.sl-kicker{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1.1rem;padding:.42rem .9rem .42rem .7rem;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:.86rem;font-weight:600;letter-spacing:.01em;backdrop-filter:blur(6px)}
.sl-kicker .ic{font-size:16px;color:#B9F0C8}
.sl-row{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.sl-price{display:flex;flex-direction:column;line-height:1.15;color:#fff}
.sl-price small{font-size:.8rem;color:rgba(255,255,255,.72);text-transform:uppercase;letter-spacing:.08em}
.sl-price b{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.sl-thumbs{margin-top:2.2rem}
.sl-th-lb{display:block;margin-bottom:.6rem;font-size:.8rem;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.08em}
.sl-th-row{display:flex;align-items:center}
.sl-th{position:relative;width:58px;height:58px;border-radius:50%;overflow:hidden;border:3px solid #fff;background:#2F6B45;margin-left:-12px;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:transform .25s,z-index 0s}
.sl-th:first-child{margin-left:0}
.sl-th img{width:100%;height:100%;object-fit:cover;display:block}
.sl-th:hover{transform:translateY(-4px) scale(1.06);z-index:2}
.sl-th.more{display:grid;place-items:center;background:#fff;color:var(--brown);font-weight:700;font-size:.95rem}
.slide-art{position:relative;z-index:1;height:100%;padding:2.4rem 5.2rem 2.4rem .6rem}
/* Resplandor: la foto "ilumina" el fondo alrededor del panel */
.slide-art::before{content:"";position:absolute;inset:-6%;z-index:0;background:radial-gradient(closest-side,#000 40%,transparent 100%);
  -webkit-mask:radial-gradient(closest-side,#000 35%,transparent 100%);mask:radial-gradient(closest-side,#000 35%,transparent 100%);
  background:var(--glow,var(--img)) center/cover no-repeat;opacity:.75}
.arch{position:relative;z-index:1;width:100%;height:100%;border-radius:22px;background:rgba(255,255,255,.08);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.arch::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.arch-plant{position:absolute;left:12%;right:12%;bottom:4%;height:82%}
.arch-plant svg{width:100%;height:100%}
.arch-plant:has(.photo){inset:0;height:auto}
.arch-plant .photo{z-index:1;object-position:50% 60%}
.sl-arrow{position:absolute;top:50%;z-index:4;width:52px;height:52px;margin-top:-26px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--brown);box-shadow:0 10px 26px -14px rgba(0,0,0,.45);transition:background .2s,color .2s,transform .2s}
.sl-arrow svg{width:22px;height:22px}
.sl-arrow .ic{font-size:22px}
.sl-arrow.prev{left:1.3rem}
.sl-arrow.next{right:1.3rem}
.sl-arrow:hover{background:var(--brown);color:#fff}
.sl-arrow:active{transform:scale(.94)}
@media (max-width:760px){
  .slider{height:clamp(560px,calc(100svh - 88px - 2rem),760px);border-radius:24px}
  .slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start}
  .slide::after{background:radial-gradient(140% 90% at 50% 75%,transparent 30%,rgba(8,14,10,.4) 100%),linear-gradient(180deg,rgba(8,14,10,.55),rgba(8,14,10,0) 55%)}
  .slide-art::before{inset:4% 0 14% 0}
  .slide-txt{padding:2.1rem 1.5rem 0}
  .slide h1,.slide h2{font-size:2.1rem}
  .slide p{margin:.7rem 0 1.2rem;font-size:1rem}
  .slide .btn{padding:.85rem 1.5rem;font-size:1rem}
  .sl-kicker{margin-bottom:.7rem;font-size:.76rem;padding:.32rem .7rem .32rem .55rem}
  .sl-row{gap:1rem}.sl-price b{font-size:1.2rem}.sl-price small{font-size:.68rem}
  .sl-thumbs{display:none}
  .slide-art{padding:1.8rem 1.4rem 5rem}
  .arch{border-radius:18px}
  .sl-arrow{top:auto;bottom:1.2rem;margin-top:0;width:44px;height:44px}
  .sl-arrow.prev{left:1rem}.sl-arrow.next{right:1rem}
}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.9rem;border-radius:999px;font-weight:700;font-size:1.08rem;transition:background .2s,transform .2s}
.btn svg{width:20px;height:20px}
.btn .ic{font-size:20px}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-d)}
.btn-green:hover svg:last-child{transform:translateX(3px)}
.btn-green:hover .ic:last-child{transform:translateX(3px)}
.btn.sm{padding:.7rem 1.2rem;font-size:.98rem;gap:.45rem}

/* ===== Carruseles ===== */
.rail-box{position:relative}
.rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.3rem .2rem 1rem}
.rail::-webkit-scrollbar{display:none}
.rail > *{scroll-snap-align:start;flex:none}
.rail-arrow{position:absolute;top:42%;z-index:3;width:48px;height:48px;border-radius:50%;background:#fff;color:var(--brown);display:grid;place-items:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.35);transition:opacity .2s}
.rail-arrow svg{width:22px;height:22px}
.rail-arrow .ic{font-size:22px}
.rail-arrow.prev{left:-12px}
.rail-arrow.next{right:-12px}
.rail-arrow[hidden]{display:grid;opacity:0;pointer-events:none}
.rail-prog{position:relative;height:2px;background:rgba(0,0,0,.15);width:min(1260px,90%);margin:1.6rem auto 0}
.rail-prog i{position:absolute;top:-1px;left:0;height:4px;border-radius:4px;background:var(--brown);width:10%;transition:left .15s linear}

/* ===== Nuevo en el vivero ===== */
.sec.shop{background:#fff}
.shop-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:2.2rem}
.shop-head .h2{font-size:clamp(2rem,3.8vw,2.9rem);letter-spacing:-.025em}
.shop-sub{margin-top:.6rem;color:var(--ink-soft);font-size:1.05rem;max-width:52ch}
.shop-ctrl{display:flex;align-items:center;gap:.5rem;flex:none}
.shop-all{font-weight:500;color:var(--brown);margin-right:1rem;padding:.4rem 0;border-bottom:1.5px solid var(--green);transition:color .2s}
.shop-all:hover{color:var(--green-d)}
.shop-arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(20,20,20,.16);color:var(--brown);transition:background .2s,border-color .2s,color .2s,opacity .2s}
.shop-arrow svg{width:20px;height:20px}
.shop-arrow .ic{font-size:20px}
.shop-arrow:hover:not(:disabled){background:var(--brown);border-color:var(--brown);color:#fff}
.shop-arrow:disabled{opacity:.35;cursor:default}
.rail.shop-rail{gap:1.5rem;padding:.2rem 0 .6rem}
.shop-prog{width:100%;height:2px;background:rgba(20,20,20,.08);margin-top:2rem}
.shop-prog i{height:2px;top:0;background:var(--green-d)}
@media (max-width:760px){
  .shop-head{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:1.6rem}
  .shop-arrow{display:none}
  .shop-all{margin:0}
  .rail.shop-rail{gap:1rem}
}

/* ===== Tarjeta de producto ===== */
.card{width:clamp(250px,22vw,300px);display:flex;flex-direction:column}
.card .pic{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:22px;background:var(--tint,#EEF2E6);padding:16% 10% 8%}
.card .pic svg{width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.2,1);transform-origin:50% 100%}
.card:hover .pic svg,.card:hover .pic .photo{transform:scale(1.05)}
.card .pic .photo{object-fit:cover;background:var(--tint,#EEF2E6)}
.card .flags{position:absolute;top:.9rem;left:.9rem;display:flex;gap:.35rem;flex-wrap:wrap;z-index:2}
.flag{font-size:.78rem;font-weight:500;padding:.3rem .7rem;border-radius:999px;background:#fff;color:var(--green-d);line-height:1.2}
.flag.sale{background:var(--red);color:#fff}
.flag.out{background:var(--brown);color:#fff}
.card .add{
  position:absolute;right:.8rem;bottom:.8rem;z-index:2;height:40px;min-width:40px;padding:0 11px;border-radius:999px;
  display:flex;align-items:center;gap:0;background:#fff;color:var(--brown);font-weight:600;font-size:.82rem;letter-spacing:.01em;
  box-shadow:0 6px 16px -8px rgba(20,40,25,.4);transition:background .25s,color .25s,gap .3s,padding .3s
}
.card .add svg{width:22px;height:22px;flex:none}
.card .add .ic{font-size:18px;flex:none}
.card .add span{max-width:0;overflow:hidden;white-space:nowrap;transition:max-width .35s cubic-bezier(.2,.7,.2,1)}
.card:hover .add,.card .add:focus-visible{background:var(--green-d);color:#fff;gap:.35rem;padding-right:14px}
.card:hover .add span,.card .add:focus-visible span{max-width:70px}
.card .info{padding:1.05rem .25rem 0}
.card h3{font-size:1.12rem;font-weight:700;color:var(--brown);line-height:1.3}
.card .sci{font-size:.9rem;color:var(--ink-soft);font-style:italic;margin-top:.1rem}
.price{display:flex;gap:.55rem;align-items:baseline;margin-top:.6rem;font-size:1.15rem;font-weight:500;color:var(--brown)}
.price .now.sale{color:var(--red)}
.price s{font-size:.88rem;font-weight:400;color:var(--ink-soft)}
.price .nostock{font-size:.95rem;font-weight:400;color:var(--ink-soft)}
.card.is-out .pic svg,.card.is-out .pic .photo{filter:saturate(.35);opacity:.7}
@media (hover:none){
  .card .add{background:var(--green-d);color:#fff}
}

/* ===== Colecciones (círculos) ===== */
.sec.colls-sec{background:var(--beige)}
.colls{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.coll{display:flex;flex-direction:column;background:#fff;border-radius:50% 50% 24px 24px / 150px 150px 24px 24px;padding:.6rem .6rem 0;color:var(--brown);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.coll-art{position:relative;aspect-ratio:1/1.05;border-radius:50% 50% 18px 18px / 142px 142px 18px 18px;background:var(--tint);overflow:hidden;padding:18% 12% 4%}
.coll-art svg{width:100%;height:100%;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.coll-art .photo{object-fit:cover}
.coll-txt{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:1rem .6rem 1.1rem .7rem}
.coll b{display:block;font-weight:700;font-size:1.1rem;line-height:1.25}
.coll small{display:block;color:var(--ink-soft);font-size:.9rem;margin-top:.15rem}
.coll-go{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(20,20,20,.14);transition:background .25s,color .25s,border-color .25s}
.coll-go svg{width:18px;height:18px}
.coll-go .ic{font-size:18px}
.coll:hover{transform:translateY(-4px);box-shadow:0 22px 40px -28px rgba(70,50,30,.5)}
.coll:hover .coll-art svg{transform:scale(1.06)}
.coll:hover .coll-go{background:var(--green-d);border-color:var(--green-d);color:#fff}
@media (max-width:1020px){.colls{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){
  .colls{grid-template-columns:1fr 1fr;gap:.9rem}
  .coll{padding:.4rem .4rem 0}
  .coll-txt{padding:.75rem .35rem .85rem .45rem}
  .coll b{font-size:.98rem}
  .coll small{font-size:.8rem}
  .coll-go{display:none}
  .coll{border-radius:50% 50% 18px 18px / 90px 90px 18px 18px}
  .coll-art{border-radius:50% 50% 14px 14px / 84px 84px 14px 14px}
}

/* ===== Redes ===== */
.social{position:relative;overflow:hidden;background:#fff;color:var(--brown);border-top:1px solid var(--line);padding:clamp(4rem,8vw,6.5rem) 0 clamp(3rem,6vw,4.5rem)}
.social-bg{display:none}
.social-bg svg{width:100%;height:100%}

.social-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.social-kicker{display:inline-flex;align-items:center;gap:.5rem;color:var(--green-d);font-weight:500;font-size:1.05rem}
.social-kicker svg{width:18px;height:18px}
.social-kicker .ic{font-size:18px}
.handle{font-weight:700;font-size:clamp(2.6rem,6.4vw,5.6rem);line-height:1;letter-spacing:-.04em;margin:.6rem 0 1.2rem;white-space:nowrap;
  background:linear-gradient(100deg,#141414 0%,#141414 45%,#2B8A50 72%,#5FC086 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.social-lead{font-size:1.12rem;color:var(--ink-soft);max-width:46ch}
.nets{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:2.2rem;max-width:620px}
.net{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:.9rem 1rem;border-radius:18px;background:#fff;border:1px solid var(--line);transition:background .25s,border-color .25s,transform .25s,box-shadow .25s}
.net:hover{background:#fff;border-color:var(--green);transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(20,60,35,.45)}
.net b{display:block;font-size:1.05rem;color:var(--brown)}
.net small{display:block;color:var(--ink-soft);font-size:.85rem;line-height:1.3}
.net-ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff}
.net-ic svg{width:22px;height:22px}
.net-ic .ic{font-size:22px}
.net-ic.ig{background:linear-gradient(45deg,#F9A825,#E1306C 50%,#833AB4)}
.net-ic.fb{background:#1877F2}
.net-ic.wa{background:#25D366}
.net .go{width:20px;height:20px;font-size:20px;color:#9AA39D;transition:transform .25s,color .25s}
.net:hover .go{transform:translate(2px,-2px);color:var(--green-d)}

/* Celular */
.phone-stage{position:relative;display:grid;place-items:center;padding:1rem 0}
.phone{position:relative;width:min(330px,82vw);background:#fff;color:#141414;border-radius:44px;padding:2.4rem .95rem 1rem;border:10px solid #111;box-shadow:0 40px 70px -34px rgba(20,50,30,.45);transform:rotate(3deg)}
.notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:92px;height:22px;border-radius:999px;background:#111}
.ig-top{display:flex;justify-content:space-between;align-items:center;font-size:1rem;padding:0 .2rem}
.ig-top svg{width:20px;height:20px}
.ig-top .ic{font-size:20px}
.ig-head{display:flex;align-items:center;gap:.9rem;margin-top:.8rem}
.ig-av{width:72px;height:72px;border-radius:50%;padding:2px;border:1px solid #DBDBDB;flex:none;background:#fff}
.ig-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ig-stats{display:flex;justify-content:space-around;gap:.3rem;flex:1;text-align:center;font-size:.7rem;color:#262626}
.ig-stats b{display:block;color:#141414;font-size:.95rem;font-weight:700}
.ig-bio{margin-top:.65rem;font-size:.76rem;line-height:1.4;color:#262626}
.ig-bio b{display:block;font-size:.8rem;margin-bottom:.1rem}
.ig-bio span{display:block}
.ig-btns{display:grid;grid-template-columns:1fr 1fr auto;gap:.35rem;margin-top:.75rem}
.ig-follow,.ig-msg{display:grid;place-items:center;height:30px;border-radius:8px;font-weight:600;font-size:.78rem}
.ig-follow{background:#4A5DF9;color:#fff}
.ig-follow:hover{background:#3B4EE8}
.ig-msg{background:#EFEFEF;color:#141414}
.ig-msg:hover{background:#E2E2E2}
.ig-add{width:32px;height:30px;border-radius:8px;background:#EFEFEF;color:#141414;display:grid;place-items:center}
.ig-add .ic{font-size:15px}
.ig-tabs{display:flex;justify-content:space-around;border-top:1px solid #eee;margin-top:.9rem;padding-top:.45rem;color:#999}
.ig-tabs svg{width:18px;height:18px}
.ig-tabs .ic{font-size:18px}
.ig-tabs svg:first-child{color:#141414}
.ig-tabs .ic:first-child{color:#141414}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:.45rem -.15rem 0}
.ig-grid a{aspect-ratio:1;position:relative;overflow:hidden;background:var(--c)}
.ig-grid svg{width:100%;height:100%}
.ig-grid a:hover::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.18)}

/* Notificaciones flotantes */
.bubble{position:absolute;z-index:2;display:flex;align-items:center;gap:.6rem;background:#fff;color:#141414;border-radius:16px;padding:.65rem .9rem;font-size:.82rem;line-height:1.3;max-width:240px;box-shadow:0 16px 36px -18px rgba(20,50,30,.4);border:1px solid var(--line);animation:bob 5s ease-in-out infinite}
.bubble svg{width:18px;height:18px;flex:none}
.bubble .ic{font-size:18px;flex:none}
.bubble img{width:30px;height:30px;border-radius:50%;flex:none}
.bubble.b1{top:12%;left:-4%;--r:-4deg}
.bubble.b1 svg{color:#E1306C;fill:#E1306C}
.bubble.b1 .ic{color:#E1306C}
.bubble.b2{top:46%;right:-6%;--r:3deg;animation-delay:-1.6s}
.bubble.b3{bottom:10%;left:0;--r:-2deg;animation-delay:-3.2s;background:var(--green);color:#fff}
.bubble.b3 svg{fill:#fff}
.bubble.b3 .ic{color:#fff}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-10px) rotate(var(--r))}}

/* Cinta de publicaciones */
.reel{position:relative;z-index:1;margin-top:clamp(3rem,6vw,4.5rem);display:grid;gap:1rem;transform:rotate(-2deg) scale(1.04)}
.reel-row{display:flex;gap:1rem;width:max-content;animation:slide 60s linear infinite}
.reel-row.back{animation-direction:reverse;animation-duration:70s}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tile{position:relative;flex:none;width:clamp(150px,15vw,210px);aspect-ratio:1;border-radius:20px;overflow:hidden;background:var(--c);display:block}
.tile svg{width:100%;height:100%}
.tile .photo{z-index:1}
.tile .ov{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:1rem;background:rgba(15,42,26,.55);color:#fff;font-weight:700;opacity:0;transition:opacity .25s}
.tile .ov span{display:flex;align-items:center;gap:.3rem}
.tile .ov svg{width:18px;height:18px;fill:#fff}
.tile .ov .ic{font-size:18px;color:#fff}
.tile:hover .ov{opacity:1}
.tile.txt{background:var(--green);color:#fff;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;font-size:.92rem;line-height:1.35}
.tile.txt b{font-size:.85rem;opacity:.9}

@media (max-width:900px){
  .social-grid{grid-template-columns:minmax(0,1fr)}
  .phone-stage{margin-top:1rem}
  .bubble{font-size:.75rem;max-width:190px}
  .bubble.b1{left:0}.bubble.b2{right:0}
}
@media (max-width:520px){.nets{grid-template-columns:1fr}.ig-stats b{font-size:.8rem}.ig-stats{font-size:.6rem}.ig-av{width:58px;height:58px}.bubble.b1{top:-2%}.bubble.b2{top:40%}}
@media (prefers-reduced-motion: reduce){.reel-row,.bubble{animation:none}}

/* ===== Tipos ===== */
.rail.types{gap:1.4rem}
.type{width:clamp(170px,17vw,236px);text-align:center;color:var(--brown)}
.type .circ{aspect-ratio:1;border-radius:50%;background:#fff;overflow:hidden;position:relative}
.type .circ svg{width:100%;height:100%;transform:scale(.9);transition:transform .4s}
.type .circ .photo{transition:transform .4s}
.type:hover .circ .photo{transform:scale(1.05)}
.type:hover .circ svg{transform:scale(.98)}
.type b{display:block;margin-top:.8rem;font-weight:500;font-size:1.1rem}
.type small{color:var(--ink-soft)}

/* ===== Historia ===== */
.story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.story-art{border-radius:28px;background:var(--mint);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;position:relative}
.story-art img.seed{width:62%;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:6px solid #fff}
.story-art .stamp{position:absolute;right:1.4rem;bottom:1.4rem;background:var(--green);color:#fff;border-radius:50%;width:116px;height:116px;display:grid;place-items:center;text-align:center;font-weight:700;line-height:1.1;font-size:.98rem;padding:.6rem;border:3px dashed rgba(255,255,255,.7);outline:5px solid var(--green)}
.story h2{color:var(--brown);font-weight:700;font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.08}
.story p{color:var(--ink);margin-top:1.1rem;max-width:56ch;font-size:1.06rem}
.story .btn{margin-top:1.6rem}
.story .owner{display:flex;align-items:center;gap:.9rem;margin-top:1.4rem;padding:.7rem 1.2rem .7rem .7rem;background:var(--beige);border-radius:999px;width:max-content;max-width:100%;color:var(--brown);font-size:.95rem;line-height:1.3}
.story .owner b{font-size:1.08rem}
.owner-ic{width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;flex:none}
.owner-ic svg{width:22px;height:22px}
.owner-ic .ic{font-size:22px}
@media (max-width:860px){.story{grid-template-columns:minmax(0,1fr)}.story .owner{width:auto;border-radius:22px}}

/* ===== Opiniones ===== */
.revs-head{text-align:center;margin-bottom:clamp(2rem,4vw,3rem)}
.revs-head p{margin-top:.7rem;color:var(--ink-soft);font-size:1.05rem}
.revs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.rev{background:#fff;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(20,20,20,.06);box-shadow:0 18px 36px -30px rgba(60,40,20,.35);transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.rev:hover{transform:translateY(-4px);box-shadow:0 26px 44px -28px rgba(60,40,20,.42)}
.rev-pic{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--c)}
.rev-pic > svg{position:absolute;inset:0;width:100%;height:100%;padding:10% 0 0}
.rev-pic .photo{z-index:1;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.rev:hover .rev-pic .photo{transform:scale(1.04)}
.rev-tag{position:absolute;left:.8rem;bottom:.8rem;z-index:2;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.94);color:var(--green-d);font-size:.78rem;font-weight:600;backdrop-filter:blur(4px)}
.rev-tag .ic{font-size:14px}
.rev-body{display:flex;flex-direction:column;flex:1;padding:1.3rem 1.4rem 1.4rem}
.stars{display:flex;gap:.12rem;color:#F2B01E}
.stars svg{width:16px;height:16px;fill:currentColor}
.stars .ic{font-size:16px}
.rev h3{margin-top:.75rem;font-size:1.05rem;font-weight:700;color:var(--brown);line-height:1.35}
.rev p{margin:.55rem 0 1.3rem;color:var(--ink-soft);font-size:.94rem;line-height:1.6}
.rev-by{margin-top:auto;display:flex;align-items:center;gap:.7rem;padding-top:1rem;border-top:1px solid var(--line)}
.rev-ini{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green-d);font-weight:700;font-size:.8rem;letter-spacing:.02em}
.rev-by b{display:block;font-size:.9rem;color:var(--brown);line-height:1.2}
.rev-by small{display:block;font-size:.8rem;color:var(--ink-soft);margin-top:.1rem}
@media (max-width:1100px){.revs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.revs{grid-template-columns:1fr}.rev-pic{aspect-ratio:16/10}}

/* ===== Newsletter ===== */
.news{position:relative;overflow:hidden;background:#fff;color:var(--brown);padding:clamp(4rem,8vw,6.5rem) 0;border-top:1px solid var(--line)}
.news-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.news-copy{max-width:600px}
.news-copy h2{font-weight:700;font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.02;letter-spacing:-.025em;color:var(--brown);text-wrap:balance}
.news-lead{margin-top:1.2rem;font-size:clamp(1.02rem,1.3vw,1.12rem);line-height:1.65;color:var(--ink-soft);max-width:50ch}
.news-form{display:flex;gap:.5rem;margin-top:2rem;padding:.45rem;background:#fff;border:1.5px solid rgba(20,20,20,.14);border-radius:999px;box-shadow:0 20px 40px -30px rgba(20,60,35,.35);transition:box-shadow .25s,border-color .25s,transform .25s}
.news-form:hover{border-color:rgba(43,138,80,.45);transform:translateY(-2px);box-shadow:0 24px 44px -28px rgba(20,60,35,.4)}
.news-form:focus-within{border-color:var(--green-d);box-shadow:0 0 0 4px rgba(95,192,134,.25),0 24px 44px -28px rgba(20,60,35,.4)}
.news-form.err{border-color:var(--red);box-shadow:0 0 0 4px rgba(215,40,47,.15)}
.news-field{flex:1;min-width:0;display:flex;align-items:center;gap:.65rem;padding-left:1rem;cursor:text}
.news-field svg{width:20px;height:20px;color:#7A8A80;flex:none}
.news-field .ic{font-size:20px;color:#7A8A80;flex:none}
.news-field input{flex:1;min-width:0;border:0;background:none;outline:none;font:inherit;font-size:1.05rem;color:var(--ink);padding:.75rem 0}
.news-field input::placeholder{color:#9AA59E}
.news-btn{flex:none;background:var(--green);color:#fff;font-weight:700;font-size:1rem;padding:.85rem 1.6rem;border-radius:999px;transition:background .2s,transform .2s}
.news-btn:active{transform:scale(.97)}
.news-btn:hover{background:var(--green-d)}
.news-btn:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.news-msg{min-height:1.4em;margin-top:.8rem;font-size:.95rem;color:var(--green-d)}
.news-msg.err{color:var(--red)}
.news-notes{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin-top:.6rem;font-size:.92rem;color:var(--ink-soft)}
.news-notes li{display:flex;align-items:center;gap:.45rem}
.news-notes svg{width:17px;height:17px;color:var(--green-d)}
.news-notes .ic{font-size:17px;color:var(--green-d)}
.news-notes .m-only{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Etiqueta de vivero */
.news-tag-wrap{--sw:-5deg;--piv:150px;position:relative;justify-self:center;padding-top:110px;margin-top:-110px}
.news-twine{position:absolute;left:50%;top:-40px;width:60px;height:186px;transform-origin:50% 0;transform:translateX(-50%) rotate(var(--sw))}
.news-tag{
  position:relative;width:min(260px,70vw);aspect-ratio:260/430;background:#1D4A2C;color:#fff;cursor:grab;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:3.4rem 1.4rem 0;
  clip-path:polygon(16% 0,84% 0,100% 9%,100% 76%,50% 100%,0 76%,0 9%);
  transform-origin:50% calc(var(--piv) * -1);transform:rotate(var(--sw));filter:drop-shadow(0 26px 26px rgba(20,60,35,.28));transition:filter .35s
}
.news-hole{position:absolute;top:1.3rem;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #3A7F4F}
.news-brand{display:flex;align-items:center;gap:.35rem;font-size:.9rem;font-weight:500;color:#9BE0B4}
.news-brand svg{width:16px;height:16px}
.news-brand .ic{font-size:16px}
.news-pct{font-weight:700;font-size:6.2rem;line-height:.9;letter-spacing:-.05em;margin-top:1rem;color:#fff}
.news-pct small{font-size:.45em;letter-spacing:0;vertical-align:.95em;margin-left:.04em}
.news-off{font-size:1rem;color:rgba(255,255,255,.75);margin-top:.5rem}
.news-code{display:block;width:100%;margin-top:1.4rem;padding:.8rem 0;border-top:1.5px dashed rgba(255,255,255,.25);border-bottom:1.5px dashed rgba(255,255,255,.25)}
.news-code-lbl{display:block;font-size:.78rem;color:rgba(255,255,255,.6)}
.news-code-val{display:block;font-weight:700;font-size:1.3rem;letter-spacing:.12em;color:rgba(255,255,255,.35);margin-top:.15rem;transition:color .3s}
.news-tag.done .news-code-val{color:#9BE0B4}
.news-tag-wrap.hot .news-tag{filter:drop-shadow(0 34px 30px rgba(20,60,35,.36))}
.news-fine{font-size:.74rem;color:rgba(255,255,255,.55);margin-top:.9rem;max-width:18ch;line-height:1.35}

@media (max-width:860px){
  .news-in{grid-template-columns:1fr;gap:3rem}
  .news-copy{max-width:none;text-align:center;margin-inline:auto}
  .news-lead{margin-inline:auto}
  .news-notes{justify-content:center}
  .news-tag-wrap{--piv:100px;order:-1;padding-top:70px;margin-top:-70px}
  .news-twine{height:120px;top:-30px}
  .news-tag{width:220px;padding-top:2.8rem}
  .news-fine{display:none}
  .news-notes .m-only{display:flex}
  .news-pct{font-size:4.8rem}
}
@media (max-width:480px){
  .news-form{flex-direction:column;border-radius:20px;padding:.5rem}
  .news-field{padding:0 .6rem}
  .news-btn{width:100%;padding:.95rem}
}

/* ===== Beneficios ===== */
.how{background:var(--green-d);color:#fff}
.how-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:2rem 0}
.how-title{font-size:clamp(1.15rem,1.8vw,1.4rem);font-weight:700;letter-spacing:-.01em;max-width:12ch;line-height:1.2}
.how-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;counter-reset:none}
.how-steps li{position:relative;display:flex;align-items:center;gap:.9rem}
.how-n{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:1rem;background:#fff;color:var(--green-d)}
.how-steps b{display:block;font-size:1rem}
.how-steps span:not(.how-n){display:block;font-size:.86rem;opacity:.85;line-height:1.35}
@media (max-width:900px){.how-in{grid-template-columns:1fr;gap:1.2rem}.how-title{max-width:none}}
@media (max-width:640px){.how-steps{grid-template-columns:1fr;gap:1rem}}

/* ===== Footer ===== */
footer{background:#163A24;color:rgba(255,255,255,.72);padding-top:clamp(3.5rem,6vw,5rem)}
footer a{transition:color .2s}
.foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr);gap:clamp(2.5rem,6vw,6rem)}
.foot-logo{display:inline-flex;align-items:center;gap:.8rem;color:#fff;font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.foot-logo img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--green-l)}
.foot-logo b{color:var(--green-l);font-weight:500}
.foot-brand > p{margin-top:1.1rem;max-width:40ch;line-height:1.65}
.foot-contact{list-style:none;display:grid;gap:.65rem;margin-top:1.6rem}
.foot-contact li{display:flex;align-items:flex-start;gap:.75rem}
.foot-contact svg{width:18px;height:18px;flex:none;margin-top:.2rem;color:var(--green-l)}
.foot-contact .ic{font-size:18px;flex:none;margin-top:.2rem;color:var(--green-l)}
.foot-contact a:hover{color:#fff}
.foot-wa{display:inline-flex;align-items:center;gap:.55rem;margin-top:1.8rem;padding:.8rem 1.4rem;border-radius:999px;background:var(--green);color:#fff;font-weight:700;transition:background .2s}
.foot-wa svg{width:19px;height:19px}
.foot-wa .ic{font-size:19px}
.foot-wa:hover{background:var(--green-d)}
.foot-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem}
footer h4{color:#fff;font-weight:700;font-size:1rem;margin-bottom:1.1rem}
.foot-links ul{list-style:none;display:grid;gap:.7rem}
.foot-links a:hover{color:#fff}
.foot-pay{display:flex;align-items:center;gap:2.5rem;margin-top:clamp(3rem,5vw,4rem);padding:1.8rem 0;border-top:1px solid rgba(255,255,255,.12)}
.foot-pay h4{margin:0;flex:none}
.foot-pay ul{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem}
.foot-pay li{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.1rem .6rem .6rem;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.pay-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(95,192,134,.16);color:var(--green-l);flex:none}
.pay-ic svg{width:20px;height:20px}
.pay-ic .ic{font-size:20px}
.foot-pay b{display:block;color:#fff;font-size:.95rem;line-height:1.25}
.foot-pay small{display:block;font-size:.82rem;color:rgba(255,255,255,.6)}
.legal{background:#112E1C;font-size:.88rem;color:rgba(255,255,255,.6)}
.legal-in{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;padding:1.1rem 0}
.legal-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.legal-links a:hover{color:#fff}
.socials{display:flex;gap:.4rem;margin-left:auto}
.socials a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.14);transition:background .2s,color .2s,border-color .2s}
.socials a:hover{background:#fff;border-color:#fff;color:#163A24}
.socials svg{width:19px;height:19px}
.socials .ic{font-size:19px}
footer :focus-visible{outline-color:var(--green-l)}
@media (max-width:1020px){
  .foot{grid-template-columns:1fr}
  .foot-pay{flex-direction:column;align-items:flex-start;gap:1rem}
}
@media (max-width:640px){
  .foot-links{grid-template-columns:1fr 1fr;gap:2rem 1.2rem}
  .foot-pay ul{flex-direction:column;width:100%}
  .legal-in{flex-direction:column;align-items:flex-start}
  .socials{margin-left:0}
}

/* ===== WhatsApp flotante ===== */
.wa-float{position:fixed;right:1.2rem;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));z-index:70;width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px -10px rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.85);transition:opacity .35s,visibility .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
/* Aparece solo donde hace falta (lo maneja js/main.js) */
.wa-float.show{opacity:1;visibility:visible;transform:none}
.wa-float.show:hover{transform:scale(1.07)}
.wa-float svg{width:28px;height:28px}
.wa-float .ic{font-size:28px}

/* ===== Paneles laterales (carrito / menú) ===== */
.scrim{position:fixed;inset:0;background:rgba(40,28,20,.45);z-index:80;opacity:0;visibility:hidden;transition:.3s}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;bottom:0;z-index:90;width:min(420px,92vw);background:#fff;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.drawer.right{right:0;transform:translateX(105%)}
.drawer.left{left:0;transform:translateX(-105%)}
.drawer.on{transform:none}
.dr-head{display:flex;justify-content:space-between;align-items:center;padding:1.1rem 1.4rem;border-bottom:1px solid var(--line)}
.dr-head h3{font-size:1.35rem;color:var(--brown)}
.dr-body{flex:1;overflow:auto;padding:1rem 1.4rem}
.dr-foot{border-top:1px solid var(--line);padding:1.2rem 1.4rem;display:grid;gap:.8rem;background:var(--beige)}
.line-item{display:grid;grid-template-columns:72px 1fr auto;gap:.9rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--line);color:var(--brown)}
.line-item .th{width:72px;height:72px;border-radius:10px;overflow:hidden;background:var(--mint);position:relative}
.line-item .th svg{width:100%;height:100%}
.line-item b{font-size:.95rem;display:block}
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--green);border-radius:999px;margin-top:.4rem;color:var(--green-d)}
.qty button{width:30px;height:30px;display:grid;place-items:center}
.qty svg{width:14px;height:14px}
.qty .ic{font-size:14px}
.qty span{min-width:22px;text-align:center;font-weight:700;font-size:.9rem}
.total{display:flex;justify-content:space-between;font-weight:700;font-size:1.15rem;color:var(--brown)}
.empty{text-align:center;padding:3rem 1rem;color:var(--ink-soft)}
.empty svg{width:44px;height:44px;margin:0 auto 1rem;color:var(--green)}
.empty .ic{font-size:44px;margin:0 auto 1rem;color:var(--green)}
.mob-nav{list-style:none;color:var(--brown)}
.mob-nav details{border-bottom:1px solid var(--line)}
.mob-nav summary{list-style:none;display:flex;justify-content:space-between;padding:1rem 0;font-weight:700;font-size:1.1rem;cursor:pointer}
.mob-nav summary::-webkit-details-marker{display:none}
.mob-nav details ul{list-style:none;padding:0 0 1rem;display:grid;gap:.6rem;color:var(--ink)}
.mob-nav > li > a{display:block;padding:1rem 0;font-weight:700;font-size:1.1rem;border-bottom:1px solid var(--line)}

/* ===== Búsqueda ===== */
/* ===== Búsqueda ===== */
.search{position:fixed;inset:0;z-index:95;visibility:hidden;pointer-events:none}
.search.on{visibility:visible;pointer-events:auto}
.s-scrim{position:absolute;inset:0;background:rgba(14,32,22,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .3s}
.search.on .s-scrim{opacity:1}
.s-panel{position:relative;background:#fff;max-height:min(88vh,860px);overflow:auto;overscroll-behavior:contain;border-radius:0 0 28px 28px;
  padding:calc(1.4rem + env(safe-area-inset-top,0px)) 0 2rem;box-shadow:0 30px 60px -30px rgba(10,30,18,.45);
  transform:translateY(-24px);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s}
.search.on .s-panel{transform:none;opacity:1}
.s-bar{display:flex;align-items:center;gap:.9rem;height:64px;padding:0 .6rem 0 1.4rem;border-radius:18px;background:#F4F6F3;border:1.5px solid transparent;transition:border-color .2s,background .2s,box-shadow .2s;color:var(--brown)}
.s-bar:focus-within{background:#fff;border-color:var(--green-d);box-shadow:0 0 0 4px rgba(95,192,134,.18)}
.s-bar > .ic{font-size:24px;flex:none;color:var(--green-d)}
.s-bar input{flex:1;min-width:0;height:100%;font:inherit;font-size:clamp(1.05rem,2.2vw,1.3rem);font-weight:500;background:none;border:0;outline:none;color:var(--brown)}
.s-bar input::placeholder{color:#9AA39D;font-weight:400}
.s-bar input::-webkit-search-cancel-button{display:none}
.s-clear{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#E6EAE5;color:var(--brown);flex:none}
.s-clear[hidden]{display:none}
.s-clear .ic{font-size:14px}
.s-clear:hover{background:#D7DDD6}
.s-kbd{font:inherit;font-size:.75rem;font-weight:500;color:var(--ink-soft);border:1px solid rgba(20,20,20,.14);border-bottom-width:2px;border-radius:7px;padding:.15rem .45rem;background:#fff;flex:none}
.s-close{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--brown);flex:none;transition:background .2s}
.s-close .ic{font-size:20px}
.s-close:hover{background:#E6EAE5}
.s-clear:focus-visible,.s-close:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.s-body{margin-top:1.8rem}
.s-sec + .s-sec{margin-top:2rem}
.s-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.s-h h3{font-size:.95rem;font-weight:600;color:var(--brown)}
.s-h a,.s-h span{font-size:.88rem;color:var(--ink-soft)}
.s-h a{display:inline-flex;align-items:center;gap:.3rem;color:var(--green-d);font-weight:500}
.s-h a:hover{text-decoration:underline;text-underline-offset:3px}
.s-h a .ic{font-size:15px}
.s-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.s-chip{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .95rem;border-radius:999px;border:1px solid rgba(20,20,20,.12);font-size:.9rem;color:var(--brown);background:#fff;transition:border-color .2s,background .2s,color .2s}
.s-chip .ic{font-size:15px;color:var(--ink-soft)}
.s-chip:hover{border-color:var(--green-d);color:var(--green-d);background:var(--mint)}
.s-chip:hover .ic{color:var(--green-d)}
.s-cats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.8rem}
.s-cat{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--mint);display:block}
.s-cat .photo{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.s-cat::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(8,26,15,.72),rgba(8,26,15,0) 60%)}
.s-cat b{position:absolute;left:.9rem;right:.9rem;bottom:.75rem;z-index:2;color:#fff;font-size:.95rem;font-weight:600;line-height:1.2}
.s-cat small{display:block;font-weight:400;font-size:.76rem;opacity:.8;margin-top:.1rem}
.s-cat:hover .photo{transform:scale(1.06)}
.s-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .9rem}
.s-item{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:.9rem;padding:.55rem;border-radius:14px;color:var(--brown);transition:background .15s}
.s-item:hover,.s-item.act{background:#F2F6F1}
.s-th{position:relative;width:64px;height:72px;border-radius:12px;overflow:hidden;background:var(--tint,#EEF2E6)}
.s-th > svg{position:absolute;inset:0;width:100%;height:100%;padding:12% 8% 4%}
.s-th .photo{z-index:1}
.s-txt{min-width:0}
.s-txt b{display:block;font-size:.98rem;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-txt b mark{background:#D9F0E1;color:inherit;border-radius:4px;padding:0 .08em}
.s-txt small{display:block;font-size:.8rem;color:var(--ink-soft);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-meta{display:flex;align-items:center;gap:.4rem;margin-top:.25rem;font-size:.88rem;font-weight:600;font-variant-numeric:tabular-nums}
.s-meta .sale{color:var(--red)}
.s-meta s{font-weight:400;font-size:.78rem;color:var(--ink-soft)}
.s-meta .no{font-weight:400;color:var(--ink-soft);font-size:.82rem}
.s-add{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(20,20,20,.12);color:var(--brown);background:#fff;transition:background .2s,color .2s,border-color .2s}
.s-add .ic{font-size:17px}
.s-add:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.s-empty{text-align:center;padding:2.5rem 1rem 1rem}
.s-empty .ce-art{margin-bottom:1.2rem}
.s-empty h3{font-size:1.15rem;color:var(--brown)}
.s-empty p{margin:.45rem auto 1.4rem;max-width:42ch;color:var(--ink-soft);font-size:.95rem}
.s-empty a{display:inline-flex;align-items:center;gap:.5rem;height:46px;padding:0 1.3rem;border-radius:999px;background:var(--green-d);color:#fff;font-weight:600;font-size:.95rem}
.s-empty a .ic{font-size:19px}
.s-empty a:hover{background:#226F40}
@media (max-width:900px){.s-cats{grid-template-columns:repeat(3,minmax(0,1fr))}.s-cats .s-cat:nth-child(n+4){display:none}.s-list{grid-template-columns:1fr}}
@media (max-width:600px){
  .s-panel{max-height:100vh;height:100%;border-radius:0}
  .s-bar{height:56px;padding-left:1rem;gap:.6rem}
  .s-kbd{display:none}
  .s-cats{grid-template-columns:repeat(2,minmax(0,1fr))}.s-cats .s-cat:nth-child(n+4){display:block}.s-cats .s-cat:nth-child(5){display:none}
}
@media (prefers-reduced-motion:reduce){.s-panel,.s-scrim{transition:none}}

/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:calc(1.4rem + env(safe-area-inset-bottom,0px));z-index:99;width:max-content;max-width:min(420px,calc(100vw - 2rem));
  display:flex;align-items:center;gap:.75rem;padding:.5rem .55rem .5rem .5rem;border-radius:18px;background:#16271C;color:#fff;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5);transform:translate(-50%,calc(100% + 3rem));opacity:0;visibility:hidden;
  transition:transform .45s cubic-bezier(.2,.9,.25,1.15),opacity .3s,visibility .45s}
.toast.on{transform:translate(-50%,0);opacity:1;visibility:visible}
.t-img{width:44px;height:44px;border-radius:12px;object-fit:cover;flex:none;background:#2F6B45}
.toast > .ic{font-size:22px;color:var(--green-l);margin-left:.3rem}
.t-txt{display:grid;min-width:0;line-height:1.25}
.t-txt small{display:flex;align-items:center;gap:.3rem;font-size:.72rem;color:#9FE0B5;font-weight:600}
.t-txt small .ic{font-size:13px;color:#9FE0B5}
.t-txt b{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-go{flex:none;margin-left:.2rem;padding:.55rem .95rem;border-radius:12px;background:var(--green);color:#fff;font-weight:700;font-size:.82rem}
.t-go:hover{background:var(--green-l)}
/* celular: aparece arriba, debajo del encabezado, de borde a borde (no choca con el botón de WhatsApp) */
@media (max-width:760px){
  .toast{left:.75rem;right:.75rem;bottom:auto;top:calc(76px + env(safe-area-inset-top,0px));width:auto;max-width:none;transform:translateY(-140%)}
  .toast.on{transform:none}
  .t-img{width:40px;height:40px}
  .t-txt b{font-size:.86rem}
}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* ===== Intro ===== */
.intro{position:fixed;inset:0;z-index:200;background:transparent;color:#fff;display:grid;place-items:center;overflow:hidden;
  padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);animation:introSafety 0s 7s forwards}
@keyframes introSafety{to{visibility:hidden;opacity:0}}
.intro.done{display:none}
.intro-center{display:flex;flex-direction:column;align-items:center;text-align:center}
.intro-mark{position:relative;width:clamp(120px,22vw,170px);aspect-ratio:1}
.intro-mark img{position:absolute;inset:12%;width:76%;height:76%;border-radius:50%;object-fit:cover}
.intro-mark svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.intro-name{font-weight:700;font-size:clamp(2.6rem,8vw,5rem);line-height:1;letter-spacing:-.02em;margin-top:1.6rem;display:flex;gap:.25em;overflow:hidden;padding-bottom:.08em}
.intro-name .w{display:flex}
.intro-name .ch{display:inline-block}
.intro-name .sc{font-weight:400;opacity:.85}
.intro-tag{margin-top:.9rem;font-size:clamp(.95rem,2vw,1.1rem);color:rgba(255,255,255,.8);overflow:hidden}
.intro-tag span{display:inline-block}
.intro-foot{position:absolute;left:0;right:0;bottom:calc(2rem + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;font-size:.9rem;color:rgba(255,255,255,.7)}
.intro-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:#fff;transform-origin:left;transform:scaleX(0)}
/* Hojas que cubren la pantalla y se abren */
.intro-leaves{position:absolute;inset:0;z-index:0;pointer-events:none;contain:strict}
.intro-bg{position:absolute;inset:0;z-index:0;background:#0E2818}
.i-leaf{position:absolute;left:0;top:0;display:block;max-width:none;will-change:transform;transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;user-select:none;pointer-events:none}
.intro-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(closest-side at 50% 50%,rgba(9,28,17,.88) 0%,rgba(9,28,17,.62) 45%,rgba(9,28,17,0) 100%);
  width:min(900px,120vw);height:min(900px,120vw);left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
.intro-center,.intro-foot,.intro-bar{z-index:2}
.intro-center{position:relative}
.intro:not(.go) .intro-center,.intro:not(.go) .intro-foot{opacity:0}

/* ===== Fotos reales (si existen reemplazan a la ilustración) ===== */
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card .pic .photo{object-fit:cover;background:var(--tint,#EEF2E6)}
@media (max-width:600px){.sub-link{font-size:.95rem}}


/* ===== Catálogo ===== */
.menu a[aria-current="page"]{color:var(--green-d)}
.cat-hero{padding:clamp(1.2rem,3vw,2rem) 0 clamp(.6rem,1.5vw,1rem)}
.crumbs{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--ink-soft)}
.crumbs a:hover{color:var(--green-d)}
.crumbs .ic{font-size:12px}
.cat-hero h1{font-weight:700;color:var(--brown);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1.05;letter-spacing:-.025em}
.cat-hero p{margin-top:.7rem;color:var(--ink-soft);font-size:1.05rem;max-width:60ch}
.cat-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:clamp(1.8rem,3.5vw,3.2rem);align-items:start;padding-bottom:clamp(3rem,6vw,5rem)}

/* Panel de filtros */
.cat-aside{position:sticky;top:96px;max-height:calc(100vh - 116px);overflow:auto;padding-right:.4rem;
  scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable;transition:scrollbar-color .3s}
.cat-aside:hover,.cat-aside:focus-within{scrollbar-color:rgba(20,20,20,.18) transparent}
.cat-aside::-webkit-scrollbar{width:6px}
.cat-aside::-webkit-scrollbar-track{background:transparent}
.cat-aside::-webkit-scrollbar-thumb{background:transparent;border-radius:999px}
.cat-aside:hover::-webkit-scrollbar-thumb,.cat-aside:focus-within::-webkit-scrollbar-thumb{background:rgba(20,20,20,.18)}
.f-head,.f-foot{display:none}
.f-search{display:flex;align-items:center;gap:.6rem;border:1.5px solid rgba(20,20,20,.14);border-radius:999px;padding:0 1rem;transition:border-color .2s}
.f-search:focus-within{border-color:var(--green-d)}
.f-search .ic{font-size:18px;color:var(--ink-soft)}
.f-search input{flex:1;min-width:0;border:0;outline:none;background:none;font:inherit;font-size:.95rem;padding:.75rem 0;color:var(--ink)}
.fg{border-bottom:1px solid var(--line)}
.fg summary{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 0 .9rem;font-weight:600;font-size:.98rem;color:var(--brown);cursor:pointer;list-style:none}
.fg summary::-webkit-details-marker{display:none}
.fg summary .ic{font-size:16px;color:var(--ink-soft);transition:transform .25s}
.fg[open] summary .ic{transform:rotate(180deg)}
.fg-body{display:grid;gap:.15rem;padding-bottom:1rem}
.chk{position:relative;display:flex;align-items:center;gap:.7rem;padding:.42rem 0;cursor:pointer;font-size:.93rem;color:var(--ink)}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk .box{width:18px;height:18px;flex:none;border:1.5px solid #BFC9C2;border-radius:5px;display:grid;place-items:center;transition:background .15s,border-color .15s}
.chk .box::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.chk input:checked + .box{background:var(--green-d);border-color:var(--green-d)}
.chk input:checked + .box::after{opacity:1}
.chk input:focus-visible + .box{outline:3px solid var(--green);outline-offset:2px}
.chk.radio .box{border-radius:50%}
.chk.radio .box::after{width:8px;height:8px;border:0;border-radius:50%;background:#fff;transform:none}
.chk .lb{flex:1}
.chk .n{font-size:.78rem;color:var(--ink-soft);background:#F2F4F1;border-radius:999px;padding:.1rem .5rem;min-width:1.7rem;text-align:center}
.chk.off{opacity:.45}
.chk:hover .box{border-color:var(--green-d)}
.toggles{display:grid;gap:.4rem;padding:1rem 0;border-bottom:0}
.tgl{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem 0;cursor:pointer;font-size:.93rem}
.tgl input{position:absolute;opacity:0;pointer-events:none}
.tgl .sw{position:relative;width:40px;height:24px;flex:none;border-radius:999px;background:#D5DBD6;transition:background .2s}
.tgl .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.tgl input:checked + .sw{background:var(--green-d)}
.tgl input:checked + .sw::after{transform:translateX(16px)}
.tgl input:focus-visible + .sw{outline:3px solid var(--green);outline-offset:2px}

/* Barra superior, chips y grilla */
.cat-bar{display:flex;align-items:center;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.cat-total{font-weight:600;color:var(--brown)}
.cat-sort{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--ink-soft)}
.cat-sort select{font:inherit;font-size:.92rem;color:var(--brown);font-weight:500;border:1.5px solid rgba(20,20,20,.14);border-radius:999px;padding:.55rem 2.2rem .55rem 1rem;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1rem center;appearance:none;cursor:pointer}
.cat-sort select:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.f-open{display:none;align-items:center;gap:.5rem;font-weight:600;font-size:.92rem;color:var(--brown);border:1.5px solid rgba(20,20,20,.14);border-radius:999px;padding:.55rem 1rem}
.f-open .ic{font-size:18px}
.f-count{min-width:20px;height:20px;border-radius:999px;background:var(--green-d);color:#fff;font-size:.72rem;display:grid;place-items:center;padding:0 5px}
.cat-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0 1.6rem}
.cat-chips:empty{margin:.4rem 0 1.4rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:500;color:var(--green-d);background:var(--mint);border-radius:999px;padding:.4rem .7rem .4rem .9rem;transition:background .2s}
.chip .ic{font-size:13px}
.chip:hover{background:#D4EBDD}
.chip-clear{font-size:.85rem;font-weight:500;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;padding:.4rem .3rem}
.chip-clear:hover{color:var(--brown)}
.is-catalog .wrap{width:min(1500px,100% - clamp(2.5rem,6vw,6rem))}
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.25rem}
.cat-grid .card{width:auto}
.cat-grid .card .pic{aspect-ratio:5/6;border-radius:20px}
.cat-grid .card .info{padding-top:.9rem}
.cat-grid .card h3{font-size:1.05rem}
.cat-grid .card .sci{font-size:.85rem}
.cat-grid .price{font-size:1.08rem;flex-wrap:wrap;gap:.1rem .5rem}
.cat-empty{text-align:center;padding:3.5rem 1rem;border:1.5px dashed rgba(20,20,20,.14);border-radius:24px}
.cat-empty > .ic{font-size:44px;color:var(--green-d)}
.cat-empty h3{margin-top:.8rem;font-size:1.25rem;color:var(--brown)}
.cat-empty p{margin:.5rem auto 1.4rem;max-width:44ch;color:var(--ink-soft)}
@media (max-width:1279px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px) and (min-width:1021px){.cat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1rem}}
@media (max-width:760px){.cat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1020px){
  .cat-layout{grid-template-columns:1fr}
  .f-open{display:inline-flex}
  .cat-sort span{display:none}
  .cat-aside{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:90;max-height:88vh;padding:0;background:#fff;border-radius:24px 24px 0 0;
    display:flex;flex-direction:column;transform:translateY(105%);transition:transform .35s cubic-bezier(.2,.7,.2,1);box-shadow:0 -20px 40px -20px rgba(0,0,0,.3)}
  .cat-aside.on{transform:none}
  .f-head{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem .6rem 1.5rem;border-bottom:1px solid var(--line)}
  .f-head h2{font-size:1.15rem;color:var(--brown)}
  .f-body{flex:1;overflow:auto;padding:1rem 1.5rem}
  .f-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.5rem calc(.9rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
  .f-foot .btn{flex:1;justify-content:center;padding:.85rem 1.2rem;font-size:1rem}
}
@media (max-width:560px){
  .cat-grid{gap:1.6rem .9rem}
  .cat-grid .card h3{font-size:.98rem}
  .cat-grid .card .sci{font-size:.8rem}
  .cat-grid .price{font-size:1rem;flex-wrap:wrap;gap:.1rem .5rem}
  .cat-grid .card .add{right:.55rem;bottom:.55rem}
  .cat-bar{gap:.5rem}
  .cat-total{font-size:.88rem;white-space:nowrap}
  .f-open{padding:.5rem .8rem;font-size:.85rem}
  .cat-sort select{font-size:.85rem;padding:.5rem 1.9rem .5rem .8rem;background-position:right .75rem center;max-width:150px}
}
@media (prefers-reduced-motion:reduce){.cat-aside{transition:none}}
.f-count[hidden]{display:none}

/* ===== Carrito ===== */
.drawer.cart{width:min(440px,94vw);background:#fff}
.cart-head{padding:1.35rem 1.6rem 1.2rem;border-bottom:1px solid var(--line)}
.cart-ttl{display:flex;align-items:baseline;gap:.5rem}
.cart-ttl h3{font-size:1.35rem;font-weight:700;letter-spacing:-.015em;color:var(--brown)}
.cart-n{font-size:.95rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.cart-x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#F3F4F1;color:var(--brown);transition:background .2s,color .2s,transform .2s}
.cart-x .ic{font-size:18px}
.cart-x:hover{background:var(--mint);color:var(--green-d);transform:rotate(90deg)}
.cart-body{padding:.3rem 1.6rem 1rem}

.ci{display:grid;grid-template-columns:84px minmax(0,1fr);gap:1.05rem;padding:1.25rem 0;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci-th{position:relative;width:84px;height:100px;border-radius:14px;overflow:hidden}
.ci-th > svg{position:absolute;inset:0;width:100%;height:100%;padding:14% 10% 6%}
.ci-th .photo{z-index:1}
.ci-main{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.ci-top{display:flex;justify-content:space-between;gap:.9rem;align-items:flex-start}
.ci-name{min-width:0}
.ci-name h4{font-size:.98rem;font-weight:600;line-height:1.3;color:var(--brown)}
.ci-name span{display:block;margin-top:.15rem;font-size:.82rem;font-style:italic;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-price{text-align:right;flex:none}
.ci-price b{display:block;font-size:.98rem;font-weight:600;color:var(--brown);font-variant-numeric:tabular-nums}
.ci-price small{display:block;margin-top:.15rem;font-size:.76rem;color:var(--ink-soft)}
.ci-bot{display:flex;align-items:center;margin-top:.8rem}
.stepper{display:inline-flex;align-items:center;height:36px;border:1px solid rgba(20,20,20,.14);border-radius:999px;padding:0 3px;background:#fff}
.stepper button{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--brown);transition:background .15s,color .15s}
.stepper button:hover{background:var(--mint);color:var(--green-d)}
.stepper button:has(.ph-trash):hover{background:#FCE9E9;color:var(--red)}
.stepper .ic{font-size:15px}
.stepper span{min-width:26px;text-align:center;font-weight:600;font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--brown)}

.cart-body.is-empty{display:grid;place-items:center}
.cart-empty{text-align:center;max-width:290px;padding:2rem 0 4rem}
.ce-art{width:96px;height:96px;margin:0 auto 1.4rem;border-radius:50%;background:var(--mint);display:grid;place-items:center;color:var(--green-d)}
.ce-art .ic{font-size:44px}
.cart-empty h4{font-size:1.15rem;font-weight:700;color:var(--brown)}
.cart-empty p{margin-top:.45rem;font-size:.93rem;line-height:1.55;color:var(--ink-soft)}
.ce-btn{display:inline-flex;margin-top:1.5rem;padding:.8rem 1.6rem;border-radius:999px;border:1.5px solid var(--brown);font-weight:600;font-size:.95rem;color:var(--brown);transition:background .2s,color .2s}
.ce-btn:hover{background:var(--brown);color:#fff}

.cart-foot{background:#fff;border-top:1px solid var(--line);padding:1.25rem 1.6rem calc(1.35rem + env(safe-area-inset-bottom,0px));gap:0;box-shadow:0 -18px 30px -24px rgba(20,40,25,.25)}
.cart-foot[hidden]{display:none}
.cart-sum{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.cart-lbl{display:block;font-weight:600;font-size:1rem;color:var(--brown)}
.cart-sub{display:block;font-size:.82rem;color:var(--ink-soft);margin-top:.1rem}
.cart-total{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--brown);font-variant-numeric:tabular-nums}
.cart-cta{margin-top:1.15rem;height:54px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:.55rem;background:var(--green-d);color:#fff;font-weight:600;font-size:1rem;transition:background .2s,transform .2s}
.cart-cta .ic{font-size:21px}
.cart-cta:hover{background:#226F40}
.cart-cta:active{transform:scale(.985)}
.cart-cta:focus-visible,.ce-btn:focus-visible,.cart-x:focus-visible,.stepper button:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.cart-note{margin-top:.75rem;text-align:center;font-size:.8rem;color:var(--ink-soft)}
@media (max-width:420px){.cart-head,.cart-foot{padding-inline:1.2rem}.cart-body{padding-inline:1.2rem}.ci{grid-template-columns:72px minmax(0,1fr)}.ci-th{width:72px;height:88px}}

/* ================================================================
   Ajustes para celular
   ================================================================ */
@media (max-width:760px){
  /* Header más compacto, con la marca visible */
  .hd,.header.scrolled .hd{height:66px;gap:.25rem}
  .logo img,.header.scrolled .logo img{width:44px;height:44px;border-width:2px}
  .logo{font-size:1.12rem;gap:.55rem}
  .hd .icon-btn{width:42px;height:42px}
  .hd .icon-btn .ic{font-size:23px}

  /* Carrusel principal */
  .slider{height:590px}
  .slide-art{padding-bottom:5.6rem}
  .slide h1,.slide h2{font-size:2rem;line-height:1.08}

  /* Redes: celular derecho y centrado, sin desbordes */
  .phone-stage{padding:2.6rem 0 2rem;margin-top:.5rem}
  .phone{transform:none;width:min(292px,80vw);border-width:8px;border-radius:38px;padding:2.1rem .8rem .9rem}
  .notch{width:80px;height:20px;top:6px}
  .ig-av{width:62px;height:62px}
  .ig-stats{font-size:.64rem}.ig-stats b{font-size:.88rem}
  .bubble{font-size:.74rem;max-width:200px;padding:.55rem .75rem}
  .bubble.b1{top:0;left:0;right:auto}
  .bubble.b2{display:none}
  .bubble.b3{bottom:.4rem;top:auto;left:auto;right:0}
  .reel{margin-top:2.5rem;transform:rotate(-2deg) scale(1.06)}

  /* Opiniones: se deslizan de costado */
  .revs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:.9rem;
    margin-inline:calc((100vw - 100%) / -2);padding:0 calc((100vw - 100%) / 2) .6rem;scroll-padding-inline:calc(clamp(2.5rem,8vw,8rem) / 2);scrollbar-width:none}
  .revs::-webkit-scrollbar{display:none}
  .rev{flex:0 0 84%;scroll-snap-align:start}
  .rev:hover{transform:none}

  /* Botón flotante de WhatsApp más discreto */
  .wa-float{width:52px;height:52px;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px))}
  .wa-float .ic{font-size:25px}

  /* Etiqueta del 10% un poco más chica */
  .news-tag{width:200px}
  .news-pct{font-size:4.4rem}
}
@media (max-width:380px){
  .slide h1,.slide h2{font-size:1.8rem}
  .bubble{max-width:170px}
}

/* Hero en pantallas bajitas (notebooks): todo entra sin apretarse */
@media (min-width:761px) and (max-height:820px){
  .slide h1,.slide h2{font-size:clamp(2.1rem,min(4.2vw,6.4vh),3.7rem)}
  .slide p{margin:.8rem 0 1.4rem}
  .sl-kicker{margin-bottom:.8rem}
  .sl-thumbs{margin-top:1.4rem}.sl-th-lb{display:none}
}
@media (min-width:761px) and (max-height:700px){ .sl-thumbs{display:none} }

/* Títulos que aparecen palabra por palabra */
.rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.rw-i{display:inline-block}

/* Ramas decorativas a los costados del hero */
.hero .wrap{position:relative}
.branch{--bw:clamp(110px,16vw,300px);position:absolute;z-index:3;width:var(--bw);height:auto;aspect-ratio:300/560;pointer-events:none;overflow:visible}
.branch.l{left:calc(var(--bw) * -.74);top:-1.2rem}
.branch.r{right:calc(var(--bw) * -.74);bottom:-1.6rem}
.br-stem{fill:none;stroke:#4A5E2E;stroke-linecap:round}
.br-sway{transform-box:view-box;animation:brSway 7s ease-in-out infinite}
.branch.l .br-sway{transform-origin:285px 18px}
.branch.r .br-sway{transform-origin:15px 542px;animation-delay:-3.5s}
@keyframes brSway{0%,100%{transform:rotate(0)}50%{transform:rotate(2.2deg)}}
@media (max-width:760px){.branch{--bw:96px}.branch.l{top:-.6rem}.branch.r{bottom:-.8rem}}
@media (prefers-reduced-motion:reduce){.br-sway{animation:none}}

/* ===== Botón hamburguesa ===== */
.bars{display:grid;gap:5px;width:22px}
.bars i{display:block;height:2px;border-radius:2px;background:currentColor;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.bars i:nth-child(2){width:70%}
.bars i:nth-child(3){width:45%}
.burger:hover .bars i{width:100%}

/* ===== Menú del celular ===== */
.scrim{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.drawer.mm{width:min(390px,88vw);border-radius:0 26px 26px 0;overflow:hidden;
  background:#fff;box-shadow:20px 0 60px -30px rgba(10,40,20,.45)}
.mm .dr-head{border-bottom:0;padding:1rem 1.2rem .4rem}
.mm .dr-head .icon-btn{background:#fff;box-shadow:0 4px 14px -6px rgba(20,60,35,.35)}
.mm .dr-body{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:1.3rem}
.mm-a{opacity:0;transform:translateX(-16px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1)}
.drawer.mm.on .mm-a{opacity:1;transform:none;transition-delay:calc(var(--i,0) * 40ms + 140ms)}
.mm-search{display:flex;align-items:center;gap:.6rem;width:100%;padding:.85rem 1rem;border-radius:14px;background:#fff;border:1px solid rgba(20,40,25,.1);
  color:var(--ink-soft);font-size:.95rem;text-align:left;box-shadow:0 6px 18px -14px rgba(20,60,35,.4)}
.mm-search .ic{font-size:19px;color:var(--green-d)}
.mm-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.65rem}
.mm-h h5{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft);font-weight:700}
.mm-h a{font-size:.82rem;font-weight:600;color:var(--green-d)}
.mm-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.mm-type{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45rem;padding:.75rem .3rem .65rem;border-radius:16px;background:#fff;
  border:1px solid rgba(20,40,25,.08);color:var(--brown);min-width:0;transition:background .2s,border-color .2s,transform .2s}
.mm-type:active{transform:scale(.97)}
.mm-type:active,.mm-type:hover{background:var(--mint);border-color:transparent}
.mm-type img{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;background:var(--mint);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(56,168,99,.25)}
.mm-type span{min-width:0}
.mm-type b{display:block;font-size:.8rem;line-height:1.2}
.mm-type small{display:block;margin-top:.1rem;font-size:.7rem;color:var(--ink-soft)}
.mm-chips{display:flex;gap:.45rem;overflow-x:auto;margin:0 -1.2rem;padding:0 1.2rem .2rem;scrollbar-width:none}
.mm-chips::-webkit-scrollbar{display:none}
.mm-chip{flex:none;padding:.5rem .9rem;border-radius:99px;background:#fff;border:1px solid rgba(20,40,25,.12);font-size:.84rem;font-weight:500;color:var(--brown);white-space:nowrap}
.mm-chip:active,.mm-chip:hover{background:var(--green-d);border-color:var(--green-d);color:#fff}
.mm-links{display:grid;gap:0}
.mm-link{display:flex;align-items:center;gap:1rem;padding:1rem .6rem;border-radius:16px;color:var(--brown)}
.mm-link{position:relative}
.mm-link + .mm-link::before{content:"";position:absolute;top:0;left:4.6rem;right:.6rem;height:1px;background:rgba(20,40,25,.08)}
.mm-link:active,.mm-link:hover,.mm-link[aria-current]{background:var(--mint)}
.mm-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--mint);color:var(--green-d);flex:none}
.mm-link[aria-current] .mm-ic{background:var(--green-d);color:#fff}
.mm-ic .ic{font-size:23px}
.mm-link b{display:block;font-size:1.08rem;line-height:1.25}
.mm-link small{display:block;margin-top:.15rem;font-size:.82rem;color:var(--ink-soft)}
.mm-go{margin-left:auto;display:grid;color:var(--ink-soft)}.mm-go .ic{font-size:16px}
.mm-foot{margin-top:auto;display:grid;gap:.8rem;padding-top:.4rem}
.mm-wa{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.9rem 1rem;border-radius:99px;background:#25D366;color:#fff;font-weight:700;font-size:.95rem;box-shadow:0 12px 24px -14px rgba(37,211,102,.9)}
.mm-wa .ic{font-size:20px}
.mm-social{display:flex;align-items:center;gap:.4rem;color:var(--ink-soft);font-size:.76rem}
.mm-social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(20,40,25,.12);color:var(--brown)}
.mm-social a .ic{font-size:18px}
.mm-social span{margin-left:auto;display:flex;align-items:center;gap:.3rem;text-align:right;white-space:nowrap;font-size:.72rem}
@media (prefers-reduced-motion:reduce){.mm-a{transition:none;opacity:1;transform:none}}

/* ===== Celular ===== */
@media (max-width:760px){
  .branch{display:none}                       /* sin ramas en el hero */
  html,body{touch-action:pan-x pan-y}         /* sin zoom con dos dedos ni doble toque */
  input,select,textarea{font-size:16px !important} /* evita que iPhone haga zoom al escribir */
}
.mm-help{margin-top:auto;padding:1.3rem 1.2rem 1.2rem;border-radius:22px;background:var(--mint);text-align:center}
.mm-help b{display:block;font-size:1.05rem;color:var(--brown)}
.mm-help p{margin:.35rem auto 1rem;max-width:26ch;font-size:.88rem;line-height:1.45;color:var(--ink-soft)}
.mm-help .mm-wa{white-space:nowrap;font-size:.92rem;padding:.9rem .8rem}

/* ===== Ficha de planta (todo entra en pantalla, sin desplazarse) ===== */
.card .pic,.card h3{cursor:pointer}
.pv{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:1.5rem;visibility:hidden;pointer-events:none}
.pv.on{visibility:visible;pointer-events:auto}
.pv-scrim{position:absolute;inset:0;background:rgba(18,28,22,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .3s}
.pv.on .pv-scrim{opacity:1}
.pv-card{position:relative;width:min(960px,100%);height:min(620px,calc(100vh - 3rem));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.5);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity .3s,transform .45s cubic-bezier(.2,.8,.2,1)}
.pv.on .pv-card{opacity:1;transform:none}
.pv-x{position:absolute;top:.8rem;right:.8rem;z-index:3;width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 6px 18px -8px rgba(0,0,0,.4);color:var(--brown)}
.pv-x .ic{font-size:20px}
.pv-media{position:relative;overflow:hidden;background:var(--mint);cursor:zoom-in}
.pv-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.pv-media.zoom{cursor:zoom-out}
.pv-media.zoom img{transform:scale(2.3)}
.pv-hint{position:absolute;left:.8rem;bottom:.8rem;display:flex;align-items:center;gap:.35rem;padding:.38rem .7rem;border-radius:99px;background:rgba(20,20,20,.55);color:#fff;font-size:.76rem;backdrop-filter:blur(6px);pointer-events:none}
.pv-hint .ic{font-size:14px}
.pv-info{display:flex;flex-direction:column;padding:1.6rem 1.6rem 1.4rem;overflow:hidden;color:var(--ink);min-height:0}
.pv-cat{align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-d);background:var(--mint);padding:.25rem .6rem;border-radius:99px}
.pv-info h2{margin-top:.55rem;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.15;color:var(--brown);letter-spacing:-.02em;padding-right:2.6rem}
.pv-sci{margin-top:.15rem;font-style:italic;color:var(--ink-soft);font-size:.85rem}
.pv-price{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .7rem;margin-top:.7rem}
.pv-price b{font-size:1.45rem;color:var(--brown);font-variant-numeric:tabular-nums}
.pv-price s{color:var(--ink-soft)}
.pv-ok{display:inline-flex;align-items:center;gap:.25rem;font-size:.8rem;font-weight:600;color:var(--green-d)}
.pv-ok .ic{font-size:15px}
.pv-no{font-weight:700;color:var(--ink-soft);font-size:1rem}
.pv-tags{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem}
.pv-tags li{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .6rem;border-radius:99px;border:1px solid var(--line);font-size:.76rem;color:var(--brown)}
.pv-tags .ic{font-size:14px;color:var(--green-d)}
.pv-care{margin-top:.7rem;color:var(--ink-soft);font-size:.85rem;line-height:1.45}
.pv-btns{display:grid;grid-template-columns:1.4fr 1fr;gap:.5rem;margin-top:.9rem}
.pv-btns.one{grid-template-columns:1fr}
.pv-btns .btn{justify-content:center;width:100%;padding:.75rem .8rem;font-size:.9rem}
.pv-wa{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.7rem .8rem;border-radius:99px;border:1.5px solid #25D366;color:#128C4A;font-weight:700;font-size:.9rem}
.pv-wa:hover{background:#25D366;color:#fff}
.pv-wa .ic{font-size:18px}
.pv-colls{margin-top:.7rem;font-size:.78rem;color:var(--ink-soft)}
.pv-colls a{color:var(--green-d);font-weight:600}
.pv-rel{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.pv-rel h3{font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5rem}
.pv-rel > div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.pv-rel button{text-align:left;color:var(--brown);min-width:0}
.pv-rel img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--mint);transition:transform .25s;display:block}
.pv-rel button:hover img{transform:scale(1.04)}
.pv-rel b{display:block;margin-top:.25rem;font-size:.7rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-rel small{display:block;font-size:.66rem;color:var(--ink-soft)}
.pv-rel img{max-height:88px}
/* pantallas bajitas: se achica lo secundario */
@media (min-width:761px) and (max-height:640px){ .pv-care,.pv-colls{display:none} .pv-rel img{max-height:64px} }
/* celular: hoja que sube desde abajo; la foto se achica sola para que entre todo */
@media (max-width:760px){
  .pv{padding:0;place-items:end stretch}
  .pv-card{display:flex;flex-direction:column;width:100%;height:auto;max-height:calc(100svh - 8px);border-radius:22px 22px 0 0;transform:translateY(40px)}
  .pv-media{flex:1 1 40svh;min-height:24svh;touch-action:none}
  .pv-info{flex:none;padding:.9rem 1.1rem calc(1rem + env(safe-area-inset-bottom,0px))}
  .pv-info h2{padding-right:0;font-size:1.25rem;margin-top:.45rem}
  .pv-price{margin-top:.45rem}.pv-price b{font-size:1.3rem}
  .pv-tags{margin-top:.5rem}
  .pv-care{margin-top:.5rem;font-size:.82rem}
  .pv-btns{margin-top:.7rem}
  .pv-colls{display:none}
  .pv-rel{margin-top:.8rem;padding-top:.7rem}
  .pv-rel h3{margin-bottom:.4rem}
  .pv-rel img{max-height:none;aspect-ratio:1.25}
  .pv-rel small{display:none}
  .pv-x{top:.6rem;right:.6rem}
}
@media (max-width:760px) and (max-height:700px){ .pv-care{display:none} }
.pv-btns .btn,.pv-wa{white-space:nowrap}
@media (max-width:380px){ .pv-btns{grid-template-columns:1.25fr 1fr} .pv-btns .btn,.pv-wa{font-size:.82rem;padding:.7rem .5rem;gap:.3rem} .pv-btns .btn .ic,.pv-wa .ic{font-size:16px} }

/* ===== Teléfono de redes: los cartelitos acompañan la inclinación del celular ===== */
.phone-wrap{position:relative;transform:rotate(3deg)}
.phone-wrap .phone{transform:none}
.phone-wrap .bubble{--r:0deg;display:flex;align-items:center;gap:.65rem;width:max-content;max-width:250px;padding:.55rem .95rem .55rem .55rem;border-radius:18px;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 22px 44px -22px rgba(20,50,30,.5),0 3px 10px -4px rgba(20,50,30,.12);font-size:.8rem;line-height:1.25;color:#141414}
.phone-wrap .bubble img{width:34px;height:34px;border-radius:50%;border:2px solid var(--mint)}
.bb-t{display:grid;gap:.1rem;min-width:0}
.bb-t b{font-size:.82rem;font-weight:700}
.bb-t small{font-size:.74rem;color:var(--ink-soft)}
.bb-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none}
.bb-ic .ic{font-size:17px}
.bb-ic.like{background:linear-gradient(135deg,#FF6F91,#E1306C);color:#fff;box-shadow:0 6px 14px -6px rgba(225,48,108,.7)}
.phone-wrap .bubble.b1 .ic{color:#fff}
.phone-wrap .bubble.b3{background:linear-gradient(135deg,#2B8A50,#3FB56C);border-color:transparent;color:#fff}
.phone-wrap .bubble.b3 small{color:rgba(255,255,255,.85)}
.bb-ic.play{background:#fff;color:var(--green-d)}
.phone-wrap .bubble.b3 .ic{color:var(--green-d)}
/* posiciones: pegadas a los bordes del celular, asomando hacia afuera */
.phone-wrap .bubble.b1{top:15%;bottom:auto;left:auto;right:calc(100% - 44px)}
.phone-wrap .bubble.b2{top:49%;bottom:auto;right:auto;left:calc(100% - 40px);display:flex}
.phone-wrap .bubble.b3{top:auto;bottom:12%;left:auto;right:calc(100% - 52px)}
@media (max-width:760px){
  .phone-wrap{transform:none}
  .phone-wrap .bubble{max-width:200px;font-size:.74rem;padding:.45rem .75rem .45rem .45rem}
  .bb-ic,.phone-wrap .bubble img{width:30px;height:30px}
  .phone-wrap .bubble.b1{top:-1.4rem;right:auto;left:-1.2rem}
  .phone-wrap .bubble.b2{display:none}
  .phone-wrap .bubble.b3{bottom:1.2rem;left:auto;right:-1.2rem}
}
.bb-t b{white-space:nowrap}
.phone-wrap .bubble.b2{max-width:280px}

/* Ficha: fondo desenfocado de la misma foto (se ve cuando la foto entra completa) */
.pv-bg{position:absolute;inset:-10%;background:center/cover no-repeat;filter:blur(26px) saturate(1.1);opacity:.85;transform:scale(1.1)}
.pv-media img{z-index:1}
@media (max-width:760px){
  .pv{place-items:stretch}
  /* Ocupa justo la pantalla visible (con o sin la barra del navegador): sin franja vacía abajo */
  .pv-card{height:100%;max-height:none;border-radius:0}
  .pv-media{flex:1 1 auto;min-height:30svh}
  .pv-media img{object-fit:contain}
  .pv-x{top:calc(.7rem + env(safe-area-inset-top,0px))}
  .pv-hint{z-index:2}
}

/* Sin intro en visitas repetidas: no se muestra ni un instante */
.no-intro .intro{display:none}

/* ===== Ramas: nunca se salen de la pantalla =====
   --side = espacio libre a cada costado del hero. Las ramas usan ese espacio y, si no alcanza,
   se corren hacia adentro. En pantallas donde el costado es muy angosto (tablets, notebooks chicas) no se muestran. */
.hero .wrap{--side:max(clamp(1.25rem,4vw,4rem), calc((100vw - 1400px) / 2))}
.branch.l{left:calc(-1 * min(var(--bw) * .74, var(--side) - 14px))}
.branch.r{right:calc(-1 * min(var(--bw) * .74, var(--side) - 14px))}
@media (max-width:1499px){ .branch{display:none} }
.hero{overflow-x:clip}

/* ===== Tablets y pantallas intermedias ===== */
@media (max-width:1100px){
  .colls{grid-template-columns:repeat(3,minmax(0,1fr))}
  .social-grid{grid-template-columns:minmax(0,1fr)}
  .social-txt{max-width:680px}
  .phone-stage{margin-top:1rem}
  .foot{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:860px){
  .story-art{width:100%;max-width:420px;margin-inline:auto}
}
@media (max-width:760px){
  .colls{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Tablets en vertical: hero con el texto arriba y la foto abajo (como en el celular, pero más grande) */
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .slider{height:clamp(640px,calc(100svh - 92px - 3rem),900px)}
  .slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start}
  .slide::after{background:radial-gradient(140% 90% at 50% 75%,transparent 30%,rgba(8,14,10,.4) 100%),linear-gradient(180deg,rgba(8,14,10,.55),rgba(8,14,10,0) 55%)}
  .slide-art::before{inset:4% 0 14% 0}
  .slide-txt{padding:2.8rem 3rem 0;max-width:none}
  .slide h1,.slide h2{font-size:clamp(2.4rem,5.4vw,3rem)}
  .slide p{margin:.8rem 0 1.4rem;max-width:44ch}
  .sl-thumbs{display:none}
  .slide-art{padding:1.8rem 2.4rem 5.6rem}
  .sl-arrow{top:auto;bottom:1.4rem;margin-top:0}
  .sl-arrow.prev{left:1.4rem}.sl-arrow.next{right:1.4rem}
}

/* ===== Rendimiento del hero =====
   Sin desenfoques ni mezclas calculadas en vivo; las capas que se mueven van directo a la placa de video. */
.sl-kicker{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.16)}
.slider{transform:translateZ(0)}
/* (Antes había will-change fijo en .hero .wrap, .slide y .arch-plant: 9 capas de pantalla completa con fotos
   que en celular agotan la memoria de video y hacen parpadear las imágenes. GSAP ya acelera mientras anima.) */

/* ===== Hero en celular y tablet vertical: la foto de la planta se ve entera =====
   El recuadro es más ancho que alto y las fotos son verticales: con "cover" se recortaban mucho (parecía zoom).
   Ahora la foto entra completa y los costados se rellenan con la misma foto desenfocada (ya hecha, sin costo). */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .arch{background:var(--bg,#1F3428) center/cover no-repeat}
  .arch-plant .photo{object-fit:contain;object-position:50% 50%}
}
/* Más alto para la foto: las flechas pasan a estar sobre las esquinas de abajo de la foto */
@media (max-width:760px){
  .slide-art{padding:1.3rem 1.1rem 1.1rem}
  .sl-arrow{bottom:1.8rem;width:40px;height:40px}
  .sl-arrow.prev{left:1.8rem}.sl-arrow.next{right:1.8rem}
  .slide p{margin:.6rem 0 1rem}
}
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .slide-art{padding:1.8rem 2.4rem 1.6rem}
  .sl-arrow{bottom:2.6rem}
  .sl-arrow.prev{left:3.2rem}.sl-arrow.next{right:3.2rem}
}
/* La foto llena todo el recuadro (sin franjas), pero con el recuadro más alto el recorte es mucho menor */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .arch-plant .photo{object-fit:cover;object-position:50% 55%}
}
@media (max-width:760px){
  .slider{height:clamp(560px,min(calc(100svh - 88px - 2rem),172vw),760px)}
}
/* Celulares bajitos: se oculta la frase descriptiva para darle más lugar a la foto */
@media (max-width:760px) and (max-height:740px){
  .slide p{display:none}
  .sl-row{margin-top:1rem}
}
@media (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .slider{height:clamp(640px,calc(100svh - 92px - 3rem),1040px)}
}

/* Celulares muy altos (Samsung S20 FE 412×914, Pixel, etc.): el alto del hero también depende del ANCHO,
   así no queda angosto y larguísimo. 172vw ≈ proporción 1:1,7, parecida a una foto vertical. */

/* ===== Notebooks: todo se ve como con el zoom del navegador al 75 % ===== */
@media (min-width:1024px) and (max-width:1600px) and (hover:hover) and (pointer:fine){
  html{zoom:.75}
  /* Con el zoom, "100% del alto de pantalla" mediría 75 %: se compensa dividiendo por 0,75 */
  .slider{height:clamp(460px,calc(100vh / .75 - 92px - 2.5rem),1100px)}
  .cat-aside{max-height:calc(100vh / .75 - 116px)}
  .pv-card{height:min(760px,calc(100vh / .75 - 4rem))}
}

/* ===== Fotos sin parpadeo =====
   Causa: debajo de cada foto se dibuja la ilustración SVG (respaldo por si falta la foto). Mientras la foto
   carga (loading="lazy", y en celular la red es más lenta) se veía la ilustración y de golpe la foto encima:
   ese cambio era el parpadeo, en todas las tarjetas, colecciones, tipos, reseñas, redes, carrito y buscador.
   Ahora, si hay foto, la ilustración no se pinta: mientras carga se ve el color de fondo de la tarjeta.
   Si la foto no existe, main.js la quita y la ilustración vuelve a aparecer sola. */
:has(> img.photo) > svg{visibility:hidden}
.photo{background-color:var(--tint,var(--c,#EEF2E6))}
.arch-plant .photo{background-color:transparent}
/* El zoom al pasar el mouse solo en computadoras: en celular la transición de transform
   peleaba con las animaciones de entrada de GSAP y la foto "saltaba" */
@media (hover:none),(pointer:coarse){
  .photo,.type .circ .photo,.rev-pic .photo,.s-cat .photo,.pv-rel img{transition:none}
}
/* Cinta de redes: se pausa fuera de pantalla */
.reel.is-off .reel-row{animation-play-state:paused}

/* ===== Menú del celular: estilo editorial, sin íconos =====
   Tipografía grande, numeración fina y líneas divisorias: se lee como el menú de un sitio, no de una app. */
.mm .dr-body{padding:.4rem 1.6rem 1.3rem;gap:1.5rem}
.mm-links{display:block;border-top:1px solid rgba(20,40,25,.1)}
.mm-link{display:flex;align-items:baseline;gap:1.1rem;padding:.85rem 0;border-radius:0;color:var(--brown);
  border-bottom:1px solid rgba(20,40,25,.1);background:none!important}
.mm-link + .mm-link::before{content:none}
.mm-n{flex:none;width:1.6rem;font-size:.72rem;font-weight:600;letter-spacing:.06em;color:var(--green-d);font-variant-numeric:tabular-nums;transform:translateY(-.45rem)}
.mm-t{min-width:0}
.mm-link b{display:inline-block;font-size:1.6rem;font-weight:600;line-height:1.05;letter-spacing:-.03em;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-bottom:.12rem;transition:background-size .35s cubic-bezier(.2,.8,.2,1),color .2s}
.mm-link small{display:block;margin-top:.2rem;font-size:.82rem;color:var(--ink-soft)}
.mm-link:hover b,.mm-link:focus-visible b{background-size:100% 2px}
.mm-link:active b{color:var(--green-d)}
.mm-link[aria-current] b{color:var(--green-d);background-size:100% 2px}
.mm-kinds h5{margin-bottom:.7rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-soft);font-weight:700}
.mm-kinds ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1rem}
.mm-kinds a{white-space:nowrap;font-size:.93rem;font-weight:500;color:var(--brown);background:linear-gradient(var(--green),var(--green)) 0 100%/0 1.5px no-repeat;padding-bottom:.1rem;transition:background-size .3s,color .2s}
.mm-kinds a:hover,.mm-kinds a:active{color:var(--green-d);background-size:100% 1.5px}
.mm-help{margin-top:auto;padding:1.2rem 0 0;border-radius:0;background:none;text-align:left;border-top:1px solid rgba(20,40,25,.1)}
.mm-help b{font-size:1.1rem;letter-spacing:-.01em}
.mm-help p{margin:.25rem 0 .9rem;max-width:32ch;font-size:.85rem}
.mm-help .mm-wa{width:100%;padding:1rem;font-size:.95rem;letter-spacing:.01em}
@media (max-height:760px){.mm .dr-body{gap:1.2rem}.mm-link{padding:.7rem 0}.mm-link b{font-size:1.45rem}.mm-help p{display:none}}
@media (max-height:680px){.mm-link small{display:none}.mm-link{padding:.6rem 0}.mm-n{transform:translateY(-.3rem)}.mm-kinds li:nth-child(n+7){display:none}.mm .dr-body{gap:1rem}}

/* ===== Menú del celular: solo secciones + ayuda, espacios repartidos =====
   Sin logo, sin numeración y sin "Explorá por tipo". La cruz queda arriba a la derecha,
   las secciones ocupan el centro con aire y la ayuda queda abajo. */
.mm .dr-head{justify-content:flex-end;padding:calc(1rem + env(safe-area-inset-top,0px)) 1.2rem 0}
.mm .dr-body{padding:1.2rem 1.8rem calc(1.6rem + env(safe-area-inset-bottom,0px));gap:0}
.mm-links{border-top:0;margin-top:clamp(.5rem,4vh,2.5rem)}
.mm-link{padding:clamp(1rem,2.6vh,1.5rem) 0}
.mm-link:first-child{padding-top:0}
.mm-link:last-child{border-bottom:0}
.mm-link b{font-size:clamp(1.7rem,8vw,2.1rem)}
.mm-link small{margin-top:.35rem;font-size:.88rem}
.mm-help{margin-top:auto;padding-top:1.6rem}
.mm-help p{display:block}
@media (max-height:680px){
  .mm-links{margin-top:0}
  .mm-link{padding:.8rem 0}
  .mm-link b{font-size:1.6rem}
  .mm-link small{display:block;font-size:.8rem}
  .mm-help{padding-top:1.1rem}
  .mm-help p{display:none}
}
/* Las secciones se centran en el alto libre: mismo aire arriba (bajo la cruz) y abajo (antes de la ayuda) */
.mm-links{flex:1;display:flex;flex-direction:column;justify-content:center;margin-top:0;padding:.5rem 0 1.5rem}
@media (max-height:680px){.mm-links{padding:0 0 .8rem}}

/* ===== Nuevo en el vivero: grilla en filas y columnas (antes era un carrusel de tarjetas grandes) =====
   Computadora 4 columnas (3 filas), tablet 3, celular 2 (se muestran 8 para no hacer la sección eterna). */
.shop-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem 1.4rem}
.shop-grid .card{width:auto;min-width:0}
.shop-grid .card .pic{aspect-ratio:4/5;border-radius:20px}
.shop-grid .card .info{padding:.85rem .15rem 0}
.shop-grid .card h3{font-size:1.02rem;line-height:1.25}
.shop-grid .card .sci{font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-grid .price{margin-top:.4rem;font-size:1.05rem;flex-wrap:wrap;gap:.1rem .5rem}
.shop-grid .flag{font-size:.72rem;padding:.25rem .6rem}
.shop-more{display:flex;justify-content:center;margin-top:2.6rem}
@media (max-width:1100px){.shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1100px) and (min-width:761px){.shop-grid > .card:nth-child(n+10){display:none}}
@media (max-width:760px){
  .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.6rem .85rem}
  .shop-grid > .card:nth-child(n+9){display:none}
  .shop-grid .card .pic{border-radius:16px}
  .shop-grid .card .flags{top:.6rem;left:.6rem}
  .shop-grid .flag{font-size:.68rem;padding:.22rem .5rem}
  .shop-grid .card .info{padding-top:.7rem}
  .shop-grid .card h3{font-size:.95rem}
  .shop-grid .card .sci{font-size:.78rem}
  .shop-grid .price{font-size:.98rem;margin-top:.3rem}
  .shop-grid .price s{font-size:.78rem}
  .shop-grid .card .add{right:.55rem;bottom:.55rem;height:36px;min-width:36px;padding:0 9px}
  .shop-more{margin-top:2rem}
  .shop-more .btn{width:100%;justify-content:center;font-size:1rem;padding:.95rem 1.4rem}
  #nuevos .shop-ctrl{display:none}
}

/* ===== Buscá por tipo de planta: grilla de círculos (antes carrusel) =====
   Computadora 6 columnas (2 filas), tablet 4 (3 filas), celular 3 (4 filas). */
.types-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2.2rem 1.6rem;max-width:1100px;margin:0 auto}
.types-grid .type{width:auto;min-width:0}
.types-grid .type .circ{box-shadow:0 10px 24px -18px rgba(60,40,20,.45);transition:box-shadow .3s,transform .3s}
.types-grid .type:hover .circ{transform:translateY(-4px);box-shadow:0 16px 30px -18px rgba(60,40,20,.55)}
.types-grid .type b{margin-top:.75rem;font-size:1rem;line-height:1.25;font-weight:600}
.types-grid .type small{display:block;margin-top:.1rem;font-size:.84rem}
@media (max-width:1020px){.types-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 1.4rem}}
@media (max-width:760px){
  .types-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem .9rem}
  .types-grid .type b{margin-top:.55rem;font-size:.86rem}
  .types-grid .type small{font-size:.72rem}
  .types-grid .type .circ{box-shadow:0 8px 18px -14px rgba(60,40,20,.5)}
}
@media (max-width:340px){.types-grid{gap:1.3rem .6rem}.types-grid .type b{font-size:.8rem}}

/* ===== Opiniones =====
   Celular y tablet: tarjetas apiladas. Al bajar, cada una queda pegada debajo del encabezado y la
   siguiente se le superpone; la de atrás se achica apenas (main.js), como un mazo de cartas.
   Computadora: las cuatro en abanico, solapadas y levemente giradas; la que señalás pasa al frente. */
.rev{position:relative}
.rev-shade{position:absolute;inset:0;z-index:5;background:#1d2a20;opacity:0;pointer-events:none;border-radius:inherit}
@media (max-width:760px){
  .revs{display:block;margin-inline:0;padding:0 0 .5rem;overflow:visible;scroll-snap-type:none}
  .rev{position:sticky;top:calc(66px + 1rem + var(--k,0) * 14px);margin-bottom:1.1rem;transform-origin:50% 0;
    display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:1rem;align-items:start;padding:1.1rem;border-radius:22px;
    border:1px solid rgba(20,20,20,.05);box-shadow:0 -6px 24px -14px rgba(60,40,20,.35),0 18px 36px -26px rgba(60,40,20,.45)}
  .rev:last-child{margin-bottom:0}
  .rev:hover{transform:none}
  .rev-pic{aspect-ratio:1;width:88px;border-radius:14px}
  .rev-pic > svg{padding:6% 0 0}
  .rev-tag{display:none}
  .rev-body{padding:0;height:100%}
  .stars .ic{font-size:13px}
  .rev h3{margin-top:.35rem;font-size:.98rem;line-height:1.3}
  .rev p{margin:.35rem 0 .8rem;font-size:.88rem;line-height:1.5}
  .rev-by{padding-top:.7rem;gap:.55rem}
  .rev-ini{width:30px;height:30px;font-size:.7rem}
  .rev-by b{font-size:.84rem}
  .rev-by small{font-size:.74rem}
}
@media (min-width:601px) and (max-width:760px){
  .revs{max-width:560px;margin-inline:auto}
  .rev{grid-template-columns:120px minmax(0,1fr)}
  .rev-pic{width:120px}
}
@media (min-width:1101px){
  .revs{display:flex;justify-content:center;align-items:flex-start;gap:0;padding:1rem 0 1.5rem}
  .rev{flex:0 0 min(300px,26%);margin-left:-2.2rem;rotate:var(--rot,0deg);translate:0 var(--dy,0);
    box-shadow:0 26px 50px -30px rgba(60,40,20,.5);
    transition:rotate .45s cubic-bezier(.2,.8,.2,1),translate .45s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
  .rev:first-child{margin-left:0}
  .rev:nth-child(1){--rot:-4deg;--dy:14px;z-index:1}
  .rev:nth-child(2){--rot:-1.2deg;--dy:-6px;z-index:2}
  .rev:nth-child(3){--rot:1.5deg;--dy:4px;z-index:3}
  .rev:nth-child(4){--rot:4deg;--dy:18px;z-index:4}
  .rev:hover{transform:none;rotate:0deg;translate:0 -14px;z-index:10;box-shadow:0 40px 60px -30px rgba(60,40,20,.55)}
  .revs:hover .rev:not(:hover){filter:saturate(.85)}
}

/* ===== Carrito con bordes redondeados (como el menú) ===== */
.drawer.cart{border-radius:26px 0 0 26px;overflow:hidden;box-shadow:-20px 0 60px -30px rgba(10,40,20,.45)}

/* ===== Celular de redes: alterna entre Instagram y Facebook ===== */
.scrs{display:grid;overflow:hidden;margin:0 -.2rem;padding:0 .2rem}
.scr{grid-area:1/1;min-width:0;transition:opacity .5s ease,translate .6s cubic-bezier(.2,.8,.2,1)}
.scr:not(.on){opacity:0;pointer-events:none}
.scr-ig:not(.on){translate:-14% 0}
.scr-fb:not(.on){translate:14% 0}
/* Facebook */
.fb-top{display:flex;justify-content:space-between;align-items:center;padding:0 .2rem}
.fb-logo{font-size:1.32rem;font-weight:800;letter-spacing:-.04em;color:#1877F2;line-height:1}
.fb-ics{display:flex;gap:.35rem}
.fb-ics .ic{width:28px;height:28px;border-radius:50%;background:#F0F2F5;display:grid;place-items:center;font-size:15px;color:#141414}
.fb-cover{margin:.65rem -.2rem 0;height:96px;border-radius:10px;overflow:hidden;background:#DDE9D7}
.fb-cover img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.fb-id{display:flex;align-items:flex-end;gap:.6rem;margin-top:-30px;padding:0 .35rem}
.fb-av{width:66px;height:66px;flex:none;border-radius:50%;border:3px solid #fff;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.fb-av img{width:100%;height:100%;object-fit:cover;display:block}
.fb-name{padding-bottom:.2rem;min-width:0}
.fb-name b{display:block;font-size:1rem;line-height:1.15}
.fb-name small{display:block;font-size:.68rem;color:#65676B}
.fb-btns{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;margin-top:.7rem}
.fb-btns a{display:flex;align-items:center;justify-content:center;gap:.3rem;height:30px;border-radius:8px;font-weight:600;font-size:.76rem}
.fb-btns .ic{font-size:15px}
.fb-like{background:#1877F2;color:#fff}.fb-like:hover{background:#166FE5}
.fb-msg{background:#E4E6EB;color:#141414}.fb-msg:hover{background:#D8DADF}
.fb-tabs{display:flex;gap:.9rem;margin-top:.75rem;border-top:1px solid #E4E6EB;padding-top:.5rem;font-size:.7rem;font-weight:600;color:#65676B}
.fb-tabs .on{color:#1877F2;box-shadow:0 2px 0 #1877F2;padding-bottom:.3rem}
.fb-post{margin:.55rem -.2rem 0;padding:.6rem .5rem .55rem;border-radius:10px;background:#fff;border:1px solid #E4E6EB}
.fb-ph{display:flex;align-items:center;gap:.45rem}
.fb-ph img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.fb-ph b{display:block;font-size:.74rem;line-height:1.2}
.fb-ph small{display:flex;align-items:center;gap:.2rem;font-size:.62rem;color:#65676B}
.fb-ph small .ic{font-size:10px}
.fb-ph > .ic{margin-left:auto;font-size:16px;color:#65676B}
.fb-post p{margin:.45rem 0;font-size:.74rem;line-height:1.4;color:#1C1E21}
.fb-pics{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:2px;height:156px;border-radius:6px;overflow:hidden;margin:0 -.5rem}
.fb-pics img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.fb-pics img:first-child{grid-row:1/3}
.fb-react{display:flex;justify-content:space-between;align-items:center;margin-top:.45rem;font-size:.64rem;color:#65676B}
.fb-react > span:first-child{display:flex;align-items:center;gap:.25rem}
.fb-r{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1.5px solid #fff}
.fb-r .ic{font-size:8px}
.fb-r.l{background:#1877F2}.fb-r.h{background:#F33E58;margin-left:-6px}
/* Burbujas: cambian de texto con un fundido */
.phone-wrap .bubble .bb-t,.phone-wrap .bubble .bb-ic{transition:opacity .25s}
.phone-wrap .bubble.swap .bb-t,.phone-wrap .bubble.swap .bb-ic{opacity:0}
.phone-stage.is-fb .bb-ic.like{background:linear-gradient(135deg,#4C9BFF,#1877F2);box-shadow:0 6px 14px -6px rgba(24,119,242,.7)}
.phone-stage.is-fb .phone-wrap .bubble.b3{background:linear-gradient(135deg,#1877F2,#4C9BFF)}
.phone-stage.is-fb .bb-ic.play .ic{color:#1877F2}
/* Selector Instagram / Facebook debajo del celular */
.scr-switch{position:relative;z-index:3;display:flex;gap:.3rem;margin-top:1.6rem;padding:.3rem;border-radius:999px;background:#fff;border:1px solid rgba(20,40,25,.1);box-shadow:0 10px 26px -18px rgba(20,50,30,.45)}
.scr-switch button{position:relative;display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:999px;font:inherit;font-size:.86rem;font-weight:600;color:var(--ink-soft);background:none;border:0;cursor:pointer;overflow:hidden;transition:background .3s,color .3s}
.scr-switch button .ic{font-size:17px}
.scr-switch button.on{color:#fff}
.scr-switch button[data-net="ig"].on{background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF)}
.scr-switch button[data-net="fb"].on{background:#1877F2}
.scr-switch .t{position:absolute;left:0;bottom:0;height:2px;width:100%;background:rgba(255,255,255,.75);transform:scaleX(0);transform-origin:left}
.scr-switch button.on .t{animation:scrT var(--scr-dur,5.5s) linear forwards}
.scr-switch.paused button.on .t{animation-play-state:paused}
@keyframes scrT{to{transform:scaleX(1)}}
@media (max-width:760px){.scr-switch{margin-top:1.3rem}.scr-switch button{padding:.45rem .85rem;font-size:.8rem}.fb-cover{height:88px}.fb-pics{height:150px}}
@media (prefers-reduced-motion:reduce){.scr{transition:opacity .3s}.scr:not(.on){translate:none}.scr-switch .t{display:none}}

/* Facebook: como el perfil real (portada tipográfica, foto centrada, sin cantidad de amigos) */
.fb-cover{position:relative;height:92px;margin:.65rem -.2rem 0;border-radius:10px;overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%,#F7F5F1,#E9E6E0);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:.55rem}
.fb-cv-t{font-family:'Great Vibes','Brush Script MT','Segoe Script',cursive;font-size:2.05rem;line-height:1;color:#2C3B2F}
.fb-cv-s{margin-top:.15rem;font-family:Georgia,'Times New Roman',serif;font-weight:700;font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:#8A4B3B}
.fb-id{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-26px;padding:0}
.fb-av{width:70px;height:70px;border:3px solid #fff}
.fb-nm{margin-top:.3rem;font-size:1.05rem;line-height:1.15}
.fb-loc{display:flex;align-items:center;gap:.2rem;margin-top:.15rem;font-size:.68rem;color:#65676B}
.fb-loc .ic{font-size:12px}
.fb-btns{grid-template-columns:1fr auto;margin-top:.6rem}
.fb-more{width:38px;background:#E4E6EB;color:#141414}.fb-more:hover{background:#D8DADF}
.fb-tabs{margin-top:.6rem}
.fb-pics{height:118px}
@media (max-width:760px){.fb-cover{height:86px}.fb-cv-t{font-size:1.9rem}.fb-pics{height:112px}}
.fb-id{position:relative;z-index:1}

/* ===== Botón "Ver todas las plantas" / "Buscar por tipo": antes era texto subrayado, ahora es un botón =====
   Píldora con borde y una flecha en un círculo verde; al pasar el mouse se rellena y la flecha avanza. */
.shop-all{display:inline-flex;align-items:center;gap:.75rem;margin:0;padding:.4rem .4rem .4rem 1.25rem;border:1.5px solid rgba(20,20,20,.16);
  border-radius:999px;background:#fff;color:var(--brown);font-weight:600;font-size:.95rem;line-height:1;white-space:nowrap;
  box-shadow:0 8px 20px -16px rgba(20,40,25,.45);transition:background .3s,border-color .3s,color .3s,box-shadow .3s,transform .2s}
.shop-all .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--green-d);color:#fff;font-size:17px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.shop-all:hover{background:var(--brown);border-color:var(--brown);color:#fff;box-shadow:0 14px 28px -16px rgba(20,40,25,.55)}
.shop-all:hover .ic{background:#fff;color:var(--brown);transform:translateX(3px) rotate(-45deg)}
.shop-all:active{transform:scale(.97)}
.shop-all:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.sec.beige .shop-all{background:#fff}
@media (max-width:760px){
  #nuevos .shop-ctrl{display:flex}
  .shop-ctrl{width:100%}
  .shop-all{font-size:.9rem;padding:.35rem .35rem .35rem 1.1rem;gap:.6rem}
  .shop-all .ic{width:32px;height:32px;font-size:15px}
}

/* ===== Ajustes de responsive detectados al revisar todas las medidas ===== */
/* Tablet vertical (768–900): la burbuja de comentario se salía del borde derecho */
@media (min-width:761px) and (max-width:900px){
  .phone-wrap .bubble.b2{left:auto;right:-2rem;max-width:210px}
  .phone-wrap .bubble.b2 .bb-t b,.phone-wrap .bubble.b2 .bb-t small{white-space:normal}
}
/* Celulares angostos (320–374): en el catálogo, el total pasa arriba y "Filtrar" + "Ordenar" quedan en una fila */
@media (max-width:374px){
  .cat-bar{flex-wrap:wrap;row-gap:.6rem}
  .cat-total{flex:1 0 100%}
  .cat-sort{min-width:0}
  .cat-sort select{max-width:150px}
  .shop-all{font-size:.86rem}
}

/* ===== Intro: el nombre con los mismos colores que la barra de la página =====
   "Plantae" negro y "SC" verde, como en el encabezado. Para que el negro se lea sobre las hojas,
   el resplandor del centro ahora es claro (luz que entra entre el follaje) en lugar de oscuro. */
.intro-name{color:var(--brown)}
.intro-name .sc{color:var(--green);font-weight:500;opacity:1}
.intro-tag{color:var(--brown-l)}
.intro-glow{background:radial-gradient(closest-side at 50% 50%,rgba(250,248,242,.97) 0%,rgba(250,248,242,.9) 40%,rgba(250,248,242,.55) 62%,rgba(250,248,242,0) 100%);
  width:min(980px,150vw);height:min(980px,150vw)}

/* ===== Hero ancho: el carrusel aprovecha los costados en pantallas grandes =====
   El encabezado usa el mismo ancho para que el logo quede alineado con el carrusel.
   Las ramas animadas se apagan porque ya no les queda lugar a los costados. */
@media (min-width:1101px){
  .hero .wrap{width:min(1880px,100% - clamp(1.5rem,2.6vw,3rem))}
  /* El encabezado usa el mismo ancho que el contenido de la página (logo, lupa y carrito más al centro) */
  .header .wrap{width:min(1400px,100% - clamp(2.5rem,8vw,8rem))}
}
.branch{display:none}

/* ===== Hero: fondo verde con resplandor del color de cada planta =====
   Reemplaza la foto desenfocada de fondo, que con algunas plantas quedaba marrón y apagada. */
.slide{background:#13291C}
.slide::before{background:
  radial-gradient(60% 95% at 72% 50%,var(--tono,rgba(120,190,140,.34)),transparent 75%),
  radial-gradient(45% 70% at 4% 108%,rgba(56,168,99,.22),transparent 70%),
  linear-gradient(135deg,#183A27 0%,#11261A 60%,#0E2016 100%)}

/* ===== Hero: escenario de la foto (la foto grande, la segunda variedad y la tarjeta) ===== */
.sl-stage{position:relative;width:100%;height:100%}
.sl-stage .arch{width:100%;height:100%}
.sl-mini,.sl-card{display:none}

/* ===== Barra de portadas con nombres y progreso ===== */
.sl-nav{position:absolute;z-index:4;left:clamp(5rem,8vw,7.5rem);bottom:1.7rem;display:flex;gap:1.6rem}
.sl-nav button{background:none;border:0;padding:.35rem 0;color:rgba(255,255,255,.6);font:inherit;font-size:.84rem;font-weight:600;letter-spacing:.01em;text-align:left;min-width:112px;cursor:pointer;transition:color .2s}
.sl-nav button:hover,.sl-nav button.on{color:#fff}
.sl-nav i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.22);margin-top:.5rem;overflow:hidden}
.sl-nav b{display:block;height:100%;width:100%;background:#fff;border-radius:inherit;transform:scaleX(0);transform-origin:left}
.sl-nav .on b{transform:scaleX(1)}
@keyframes slFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Celular y tablet vertical: barritas finas arriba, sin nombres (las flechas ocupan abajo) */
@media (max-width:760px), (min-width:761px) and (max-width:1024px) and (orientation:portrait){
  .sl-nav{left:1rem;right:1rem;top:.8rem;bottom:auto;gap:6px}
  .sl-nav button{flex:1;min-width:0;padding:0}
  .sl-nav span{display:none}
  .sl-nav i{margin:0;height:3px}
}

/* ===== Pantallas grandes: la foto con su forma real (vertical 4:5), sin zoom ===== */
@media (min-width:1025px){
  .slider{container-type:size}
  .slide{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .slide-art{height:100%;padding:3rem 6.4rem 3rem 2rem;display:flex;align-items:center;justify-content:center}
  .slide-art::before{inset:4% 6% 4% -4%}
  /* Alto del escenario = alto del carrusel menos márgenes; ancho = 4/5 del alto, sin pasar el 45 % del carrusel */
  .sl-stage{--h:min(calc(100cqh - 6rem),calc(45cqw));height:var(--h);width:calc(var(--h) * .8);flex:none}
  .sl-stage .arch{border-radius:24px}
  .sl-stage .arch-plant .photo{object-fit:cover;object-position:50% 50%}
  .slide-txt{align-self:center;margin-top:-2.2rem}

  /* Tarjeta destacada: apoyada sobre la esquina de abajo de la foto */
  .sl-card{display:flex;align-items:center;gap:.8rem;position:absolute;z-index:3;right:-1.4rem;bottom:2rem;max-width:300px;
    padding:.6rem 1rem .6rem .6rem;border-radius:18px;background:#fff;color:var(--ink);text-decoration:none;
    box-shadow:0 22px 40px -18px rgba(0,0,0,.55);transition:transform .25s}
  .sl-card:hover{transform:translateY(-3px)}
  .sl-card img{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:none;background:#EEF3E8}
  .sl-card span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
  .sl-card small{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-d)}
  .sl-card b{font-size:.92rem;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .sl-card em{font-style:normal;font-weight:700;font-size:.95rem;color:var(--green-d);margin-top:.1rem}
  .sl-card .ic,.sl-card svg{font-size:18px;width:18px;height:18px;color:var(--ink-soft);flex:none;align-self:flex-start}
}
/* Segunda foto del collage: solo donde sobra lugar al costado */
@media (min-width:1280px){
  .sl-mini{display:block;position:absolute;z-index:2;width:42%;aspect-ratio:4/5;left:-27%;top:16%;border-radius:18px;overflow:hidden;
    border:5px solid #fff;rotate:-5deg;background:#EEF3E8;box-shadow:0 26px 50px -22px rgba(0,0,0,.6)}
  .sl-mini img{width:100%;height:100%;object-fit:cover;display:block}
}

/* ===== Hero en pantallas táctiles: sin "hover pegado" =====
   En celular, después de tocar una flecha quedaba pintada de oscuro hasta tocar otra cosa. */
@media (hover:none),(pointer:coarse){
  .sl-arrow:hover{background:#fff;color:var(--brown)}
  .sl-arrow:active{background:var(--brown);color:#fff}
  .sl-nav button:hover{color:rgba(255,255,255,.6)}
  .sl-nav button.on{color:#fff}
}

/* ===== Colecciones: "invernadero de noche" =====
   Panel verde profundo con bordes redondeados (mismo ancho que el hero), un resplandor detrás de las
   tarjetas y una luz suave que sigue al mouse en computadoras. */
.sec.colls-sec{position:relative;isolation:isolate;overflow:hidden;
  width:min(1880px,100% - clamp(1.5rem,2.6vw,3rem));margin:clamp(1rem,3vw,2.5rem) auto;border-radius:32px;
  padding:clamp(4rem,8vw,6.5rem) 0;color:#fff;
  background:
    radial-gradient(55% 45% at 50% 58%,rgba(95,192,134,.20),transparent 72%),
    radial-gradient(40% 40% at 92% 100%,rgba(240,128,104,.12),transparent 70%),
    radial-gradient(35% 35% at 6% 0%,rgba(185,240,200,.10),transparent 70%),
    linear-gradient(160deg,#183A27 0%,#11261A 55%,#0C1C13 100%)}
/* Grano fino (como el hero): evita franjas en los degradados grandes */
.sec.colls-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background:url("../img/grano.png") repeat;background-size:160px}
.colls-sec > .wrap{position:relative;z-index:2}
.colls-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
/* Luz que sigue al mouse: un círculo difuso que se mueve con transform (no redibuja el fondo) */
.colls-light{position:absolute;left:-350px;top:-350px;width:700px;height:700px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(170,235,190,.16),rgba(170,235,190,0));opacity:0;transition:opacity .5s}
.colls-sec.lit .colls-light{opacity:1}

/* Textos sobre el fondo oscuro */
.colls-sec .h2{color:#fff}
.colls-sec .shop-sub{color:rgba(255,255,255,.72)}
.colls-sec .shop-all{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.colls-sec .shop-all:hover{background:#fff;border-color:#fff;color:var(--brown)}
.colls-sec .shop-all:hover .ic{background:var(--green-d);color:#fff}

/* Tarjetas: más profundidad sobre el verde, y un halo verde al pasar el mouse */
.colls-sec .coll{box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.06)}
@media (hover:hover) and (pointer:fine){
  .colls-sec .coll:hover{transform:translateY(-6px);
    box-shadow:0 36px 70px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.5),0 0 70px -12px rgba(120,215,155,.45)}
}

@media (max-width:760px){
  .sec.colls-sec{width:calc(100% - 1rem);border-radius:24px;padding:3.2rem 0}
  .colls-sec > .wrap{width:calc(100% - 1.6rem)}
}

/* ===== Opiniones: panel cálido de atardecer =====
   Misma forma que el panel de colecciones (redondeado, con margen a los costados) pero en crema y durazno,
   con un resplandor dorado detrás del abanico de tarjetas, como luz de sol de tarde. */
/* Sin overflow:hidden: rompería el apilado "sticky" de las tarjetas en celular. Todo el decorado queda adentro
   del panel por sí solo (inset:0 + border-radius), así no hace falta recortar nada. */
.sec.beige.revs-sec{position:relative;isolation:isolate;overflow:visible;
  width:min(1880px,100% - clamp(1.5rem,2.6vw,3rem));margin:clamp(1rem,3vw,2.5rem) auto;border-radius:32px;
  padding:clamp(4rem,8vw,6.5rem) 0;
  background:
    radial-gradient(45% 55% at 88% 0%,rgba(255,236,190,.85),transparent 70%),
    radial-gradient(40% 45% at 6% 100%,rgba(246,190,160,.38),transparent 70%),
    linear-gradient(172deg,#FCF6EE 0%,#F8EBDC 55%,#F3DFCB 100%)}
/* Grano fino para que los degradados no hagan franjas */
.sec.beige.revs-sec::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.06;border-radius:inherit;
  background:url("../img/grano.png") repeat;background-size:160px}
.revs-sec > .wrap{position:relative;z-index:2}
/* Resplandor dorado detrás de las tarjetas */
.revs-glow{position:absolute;z-index:0;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(min(600px,55%) min(300px,30%) at 50% 60%,rgba(255,196,112,.7),rgba(255,212,145,.28) 55%,rgba(255,214,150,0))}

/* Comillas gigantes como marca de agua detrás del título */
.revs-head{position:relative}
.revs-quote{position:absolute;left:50%;top:-.42em;translate:-50% 0;z-index:-1;pointer-events:none;user-select:none;
  font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:clamp(11rem,20vw,19rem);line-height:1;color:rgba(43,138,80,.09)}

/* Insignia debajo del subtítulo */
.revs-badge{display:inline-flex;align-items:center;gap:.65rem;margin-top:1.2rem;padding:.5rem 1.1rem .5rem .9rem;border-radius:999px;
  background:rgba(255,255,255,.75);border:1px solid rgba(255,255,255,.9);color:var(--brown);font-weight:600;font-size:.92rem;
  box-shadow:0 12px 28px -18px rgba(150,90,30,.45)}
.revs-badge .stars{gap:.08rem}

/* Tarjetas: sombra cálida para que floten sobre la luz */
.revs-sec .rev{box-shadow:0 26px 50px -30px rgba(140,80,30,.45),0 0 0 1px rgba(255,255,255,.6)}

@media (max-width:760px){
  .sec.beige.revs-sec{width:calc(100% - 1rem);border-radius:24px;padding:3.2rem 0}
  .revs-sec > .wrap{width:calc(100% - 1.6rem)}
  .revs-glow{background:radial-gradient(90% 45% at 50% 60%,rgba(255,196,112,.6),rgba(255,212,145,.24) 55%,rgba(255,214,150,0))}
  .revs-badge{font-size:.84rem;margin-top:1rem}
  .revs-quote{top:-.3em}
}

/* ===== Cinta de publicaciones: solo decorativa =====
   Se mueve sola y nada más: no se puede tocar, no se pausa con el mouse y no muestra likes al pasar. */
.reel{pointer-events:none;user-select:none;-webkit-user-select:none}
.tile .ov{display:none}
.tile.txt{padding:1.1rem;font-size:.95rem;line-height:1.38;font-weight:600;letter-spacing:-.005em}
.tile.txt b{font-weight:700}
.tile.txt.t1{background:var(--green);color:#fff}
.tile.txt.t2{background:#16301F;color:#EAF6EE}
.tile.txt.t2 b{color:#7FD3A0;opacity:1}
.tile.txt.t3{background:#F6CFAE;color:#4A2A12}
.tile.txt.t4{background:#FBF3E6;color:#1F3A2A;box-shadow:inset 0 0 0 1px rgba(31,58,42,.08)}
.tile.txt.t4 b{color:var(--green-d);opacity:1}
.tile.txt.t5{background:#F4C6D3;color:#4D1F2E}
@media (max-width:760px){ .tile.txt{font-size:.84rem;padding:.9rem} }

/* ===== Nosotros: panel con foto de esquejes brotando =====
   La foto de fondo cuenta la historia ("desde semilla o esqueje"). Encima, un velo de tierra oscura del
   lado del texto que se aclara hacia el otro lado, viñeta suave y grano fino. Al entrar en pantalla la foto
   se acerca muy despacio y al bajar se desplaza apenas (solo transform: no afecta los FPS). */
.sec.story-sec{position:relative;isolation:isolate;overflow:hidden;
  width:min(1880px,100% - clamp(1.5rem,2.6vw,3rem));margin:clamp(1rem,3vw,2.5rem) auto;border-radius:32px;
  padding:clamp(4.5rem,9vw,7.5rem) 0;background:#1A140F;color:#fff;
  clip-path:inset(0 round 32px)} /* asegura las esquinas redondeadas en Safari con la foto animada */
.story-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.story-bg-in{position:absolute;inset:-8% 0;will-change:transform}
.story-bg picture,.story-bg img{display:block;width:100%;height:100%;max-width:none}
.story-bg img{object-fit:cover;object-position:50% 50%}
.story-shade{position:absolute;inset:0;
  background:
    linear-gradient(270deg,rgba(16,12,8,.94) 0%,rgba(16,12,8,.86) 34%,rgba(16,12,8,.45) 58%,rgba(16,12,8,.12) 80%,rgba(16,12,8,.2) 100%),
    radial-gradient(120% 120% at 25% 50%,transparent 45%,rgba(10,8,5,.55) 100%)}
.sec.story-sec::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background:url("../img/grano.png") repeat;background-size:160px}
.story-sec .story{position:relative;z-index:2}

/* Lado izquierdo: el logo y el sello flotan sobre la tierra */
.story-sec .story-art{background:none;overflow:visible;aspect-ratio:1/1}
.story-sec .story-art img.seed{width:min(58%,320px);border:6px solid rgba(255,255,255,.95);
  box-shadow:0 40px 70px -28px rgba(0,0,0,.85),0 0 0 14px rgba(255,255,255,.08),0 0 0 15px rgba(255,255,255,.14)}
.story-sec .story-art .stamp{right:12%;bottom:14%;box-shadow:0 22px 40px -16px rgba(0,0,0,.7)}

/* Textos sobre la foto */
.story-sec h2{color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.story-sec p{color:rgba(255,255,255,.84)}
.story-sec .owner{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.story-sec .owner b{color:#fff}
.story-sec .btn-green{box-shadow:0 18px 36px -16px rgba(56,168,99,.65)}

@media (max-width:860px){
  .sec.story-sec{width:calc(100% - 1rem);border-radius:24px;padding:3.2rem 0 3.6rem;clip-path:inset(0 round 24px)}
  /* La foto ocupa la parte de arriba (logo y título) y se funde en la tierra oscura: así no se agranda de más */
  .story-bg-in{inset:-5% 0 38% 0}
  .story-sec > .wrap{width:calc(100% - 2.4rem)}
  /* Celular: la foto arriba con el logo, y el texto abajo sobre la tierra oscura */
  .story-shade{background:
    linear-gradient(180deg,rgba(16,12,8,.12) 0%,rgba(16,12,8,.3) 24%,rgba(16,12,8,.82) 44%,#100C08 60%,#100C08 100%)}
  .story-sec .story-art{max-width:300px}
  .story-sec .story-art .stamp{width:96px;height:96px;font-size:.86rem;right:2%;bottom:6%}
}

/* =========================================================================
   Cartilla de plantas en el resto del sitio: menú, menú del celular, portada y catálogo
   ========================================================================= */
/* Etiqueta "Nuevo" */
.menu-tag{display:inline-flex;align-items:center;margin-left:.4rem;padding:.12rem .45rem;border-radius:999px;background:var(--mint);color:var(--green-d);
  font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.3;vertical-align:middle}
.menu > li > a.menu-ct{gap:0}
.mm-link .menu-tag{transform:translateY(-.45rem);margin-left:.55rem;font-size:.6rem}

/* Portada: sección de la cartilla */
.ctp{position:relative;overflow:hidden;background:
  radial-gradient(60% 80% at 85% 40%,rgba(56,168,99,.16),transparent 70%),
  linear-gradient(180deg,#F6FAF5 0%,#EDF5EF 100%)}
.ctp::before{content:"";position:absolute;inset:0;opacity:.05;background:url("../img/grano.png") repeat;background-size:160px;pointer-events:none}
.ctp-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center}
/* Encabezado tipo revista impresa: número de edición en un recuadro doble, como el sello de tapa,
   y la fecha al lado, separados del título por una línea fina */
.ctp-mast{display:flex;align-items:center;gap:1rem;max-width:30rem;padding-bottom:1rem;border-bottom:1px solid rgba(20,40,25,.16)}
.ctp-mast-no{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;width:58px;height:58px;margin:4px;
  border:1.5px solid var(--green-d);outline:1.5px solid var(--green-d);outline-offset:3px;border-radius:3px;color:var(--green-d);line-height:1}
.ctp-mast-no small{font-size:.6rem;font-weight:600;letter-spacing:.14em}
.ctp-mast-no b{margin-top:.15rem;font-size:1.45rem;font-weight:800;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ctp-mast-txt{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ctp-mast-txt small{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6E7A6C}
.ctp-mast-txt b{font-size:1.15rem;font-weight:700;letter-spacing:-.01em;color:var(--brown)}
.ctp .h2{margin-top:1.1rem;font-size:clamp(2rem,3.8vw,2.9rem);letter-spacing:-.025em}
.ctp-lead{margin-top:.9rem;color:var(--ink-soft);font-size:1.06rem;max-width:46ch}
.ctp-feats{list-style:none;display:grid;gap:.95rem;margin-top:1.6rem}
.ctp-feats li{display:flex;align-items:center;gap:.9rem}
.ctp-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:#fff;color:var(--green-d);
  box-shadow:0 1px 2px rgba(20,40,25,.06),0 10px 20px -14px rgba(20,40,25,.5)}
.ctp-ic .ic{font-size:22px}
.ctp-feats b{display:block;font-size:.98rem;color:var(--brown)}
.ctp-feats small{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.35}
.ctp-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:2rem}
.ctp-btn{box-shadow:0 14px 26px -14px rgba(43,138,80,.9)}
.ctp-btn .ic{font-size:20px}
.ctp-btn:hover{background:var(--green-d)}
.ctp-alt{display:inline-flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem;color:var(--brown);
  background:linear-gradient(var(--green),var(--green)) 0 100%/0 2px no-repeat;padding-bottom:.15rem;transition:background-size .3s,color .2s}
.ctp-alt:hover{color:var(--green-d);background-size:100% 2px}
/* Revista de muestra (dibujada con HTML, usa las mismas fotos del vivero) */
.ctp-art{position:relative;display:block;perspective:1600px;padding:1rem 0}
.ctp-book{display:grid;grid-template-columns:1fr 1fr;width:min(100%,580px);margin-inline:auto;border-radius:6px;
  transform:rotateX(7deg) rotateY(-13deg) rotate(-2deg);transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 2px 3px rgba(20,40,25,.12),0 40px 60px -30px rgba(20,40,25,.55),0 18px 30px -24px rgba(20,40,25,.4)}
.ctp-art:hover .ctp-book,.ctp-art:focus-visible .ctp-book{transform:rotateX(2deg) rotateY(-4deg) rotate(-.5deg)}
.ctp-page{position:relative;aspect-ratio:1/1.38;overflow:hidden;container-type:inline-size;display:block}
.ctp-cover{border-radius:6px 0 0 6px;background:var(--green-d);color:#fff}
.ctp-cover > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ctp-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,40,24,.75) 0%,rgba(14,40,24,.1) 40%,rgba(14,40,24,.2) 62%,rgba(14,40,24,.85) 100%)}
.ctp-cover-in{position:absolute;inset:0;z-index:1;padding:8cqw 7cqw;display:flex;flex-direction:column}
.ctp-brand{display:flex;align-items:center;gap:2.4cqw;font-size:4.6cqw;font-weight:600}
.ctp-brand img{width:10cqw;height:10cqw;border-radius:50%;border:.8cqw solid #fff}
.ctp-brand b{color:#8FDCA9;font-weight:600}
.ctp-title{margin-top:5cqw;font-size:16cqw;font-weight:800;line-height:.9;letter-spacing:-.04em;text-shadow:0 1cqw 5cqw rgba(0,0,0,.35)}
.ctp-title small{display:block;font-size:8cqw;font-weight:600;letter-spacing:-.02em;margin-top:1.6cqw}
.ctp-sticker{position:absolute;right:7cqw;bottom:10cqw;width:22cqw;height:22cqw;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:#F6C343;color:#3B2A05;font-weight:800;font-size:4.2cqw;line-height:1.05;rotate:12deg;border:1cqw dashed rgba(255,255,255,.7);outline:1.2cqw solid #F6C343}
.ctp-inner{border-radius:0 6px 6px 0;background:radial-gradient(120% 90% at 50% 40%,#FFFEFA 0%,#F8F4EA 100%);padding:7% 6% 8%;display:flex;flex-direction:column}
.ctp-inner::before{content:"";position:absolute;top:0;bottom:0;left:0;width:10cqw;background:linear-gradient(90deg,rgba(0,0,0,.14),transparent);pointer-events:none}
.ctp-run{display:flex;justify-content:space-between;font-size:2.6cqw;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:#8A8F87;
  padding-bottom:2.6cqw;border-bottom:1px solid rgba(20,40,25,.1)}
.ctp-run span:last-child{color:var(--green-d)}
.ctp-row{position:relative;flex:1;min-height:0;display:flex;align-items:center;gap:5cqw;margin-top:4cqw}
.ctp-row + .ctp-row{border-top:1px solid rgba(20,40,25,.08);padding-top:4cqw}
.ctp-row img{flex:none;width:38%;aspect-ratio:3/4;object-fit:cover;border-radius:3.6cqw;box-shadow:0 3cqw 5cqw -3cqw rgba(30,40,20,.6)}
.ctp-lines{flex:1;display:flex;flex-direction:column;gap:2.4cqw}
.ctp-lines i{display:block;height:3.2cqw;border-radius:2cqw;background:#1F241E;width:85%}
.ctp-lines i + i{height:2.4cqw;width:60%;background:#C9CDC5}
.ctp-lines em{margin-top:2cqw;display:grid;place-items:center;height:9cqw;border-radius:999px;background:linear-gradient(180deg,#3DB06A,#2E9558);color:#fff;
  font-style:normal;font-size:3.4cqw;font-weight:700}
.ctp-row b{position:absolute;left:calc(38% - 20cqw);bottom:2cqw;padding:1.2cqw 2.4cqw;border-radius:1.6cqw;background:var(--green-d);color:#fff;font-size:3.6cqw;rotate:-3deg;
  box-shadow:0 1.4cqw 3cqw -1.4cqw rgba(0,0,0,.6)}
.ctp-open{position:absolute;right:max(0px,calc(50% - 300px));bottom:-.4rem;display:inline-flex;align-items:center;gap:.35rem;padding:.55rem 1rem;border-radius:999px;
  background:var(--brown);color:#fff;font-size:.85rem;font-weight:600;box-shadow:0 10px 20px -10px rgba(0,0,0,.5);transition:transform .3s,background .2s}
.ctp-art:hover .ctp-open{transform:translateY(-3px);background:var(--green-d)}
@media (max-width:900px){
  .ctp-in{grid-template-columns:1fr}
  .ctp-art{order:-1;max-width:520px;width:100%;margin-inline:auto}
  .ctp-open{right:0}
}
@media (max-width:520px){
  .ctp-feats{gap:.8rem}
  .ctp-cta .btn{width:100%;justify-content:center}
  .ctp-cta{justify-content:center}
}
@media (prefers-reduced-motion:reduce){ .ctp-book{transition:none} }

/* Catálogo: acceso a la cartilla al lado del título */
.cat-hero-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem 1.5rem}
.ct-link{display:inline-flex;align-items:center;gap:.75rem;padding:.5rem 1rem .5rem .5rem;border-radius:999px;background:#fff;color:var(--brown);
  border:1px solid rgba(20,40,25,.08);box-shadow:0 1px 2px rgba(20,40,25,.06),0 10px 22px -16px rgba(20,40,25,.5);transition:border-color .2s,transform .2s}
.ct-link:hover{border-color:var(--green);transform:translateY(-1px)}
.ct-link-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--green-d);flex:none}
.ct-link-ic .ic{font-size:20px}
.ct-link b{display:block;font-size:.88rem;line-height:1.2}
.ct-link small{display:block;font-size:.78rem;color:var(--ink-soft);line-height:1.2}
.ct-link > .ic{font-size:16px;color:var(--green-d)}
@media (max-width:520px){ .ct-link{width:100%} .ct-link > .ic{margin-left:auto} }

/* =========================================================================
   Menú del celular: entra siempre entero (sin scroll) y efecto al elegir una sección
   Todo se mide con el alto de la pantalla (dvh): en un celular chico o acostado los títulos y
   espacios se achican y los textos secundarios se esconden, en vez de aparecer una barra de scroll.
   ========================================================================= */
.drawer.mm{height:100vh;height:100dvh;max-height:100dvh}
.mm .dr-head{flex:none;padding:calc(clamp(.5rem,1.8dvh,1rem) + env(safe-area-inset-top,0px)) 1.2rem 0}
.mm .dr-head .icon-btn{width:clamp(38px,5.6dvh,46px);height:clamp(38px,5.6dvh,46px)}
.mm .dr-body{flex:1 1 auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:0;
  padding:clamp(.2rem,1.4dvh,1rem) 1.8rem calc(clamp(.8rem,2.6dvh,1.6rem) + env(safe-area-inset-bottom,0px))}
.mm-links{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center;padding:0;margin:0;isolation:isolate}
.mm-link,.mm-link:first-child{flex:0 1 auto;min-height:0;align-items:center;padding:clamp(.4rem,1.9dvh,1.35rem) 0}
.mm-link b{font-size:clamp(1.2rem,min(8vw,4.7dvh),2.1rem)}
.mm-link small{font-size:clamp(.74rem,1.75dvh,.88rem);margin-top:clamp(.1rem,.5dvh,.35rem)}
.mm-help{flex:none;margin-top:0;padding-top:clamp(.7rem,2.4dvh,1.6rem)}
.mm-help .mm-wa{padding:clamp(.7rem,1.9dvh,1rem) 1rem}
@media (max-height:760px){ .mm-help p{display:none} }
@media (max-height:600px){ .mm-link small{display:none} .mm-help b{display:none} .mm-help{padding-top:.7rem} }
@media (max-height:420px){ .mm-link b{font-size:clamp(1.05rem,5.2dvh,1.4rem)} .mm .dr-body{padding-inline:1.4rem} }

/* Efecto al elegir */
.mm-link{position:relative;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.mm-link::after{content:"";position:absolute;top:2px;bottom:2px;left:-1.8rem;right:-1.8rem;z-index:-1;
  background:linear-gradient(90deg,#DDF1E4 0%,#EAF6EE 55%,rgba(234,246,238,0) 100%);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mm-t{transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mm-arrow{position:relative;margin-left:auto;flex:none;width:clamp(30px,4.6dvh,38px);height:clamp(30px,4.6dvh,38px);border-radius:50%;
  background:var(--green-d);opacity:0;transform:translateX(-14px) scale(.6);transition:opacity .25s,transform .45s cubic-bezier(.2,.8,.2,1)}
.mm-arrow::before{content:"";position:absolute;left:28%;right:30%;top:50%;height:2px;margin-top:-1px;background:#fff;border-radius:2px}
.mm-arrow::after{content:"";position:absolute;right:28%;top:50%;width:28%;height:28%;border:solid #fff;border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg);border-radius:1px}
.mm-link.is-going::after{transform:scaleX(1)}
.mm-link.is-going .mm-t{transform:translateX(8px)}
.mm-link.is-going b{color:var(--green-d);background-size:100% 2px}
.mm-link.is-going .mm-arrow{opacity:1;transform:none;animation:mmGo .5s .2s cubic-bezier(.5,0,.75,0) forwards}
@keyframes mmGo{to{transform:translateX(12px);opacity:0}}
.drawer.mm.on.is-leaving .mm-a:not(.is-going){opacity:.28;transform:translateX(-6px);transition-delay:0s}
.drawer.mm.is-leaving .mm-help{opacity:.28;transition:opacity .3s}
/* Toque: se hunde apenas al apoyar el dedo */
.mm-link:active:not(.is-going) .mm-t{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){
  .mm-link,.mm-link::after,.mm-t,.mm-arrow{transition:none}
  .mm-link.is-going .mm-arrow{animation:none}
}

/* =========================================================================
   Carrito en dos pasos (main.js → "Carrito en dos pasos")
   ========================================================================= */
.cart-body{scroll-behavior:smooth}
/* Pasos */
.ck-steps{list-style:none;display:flex;align-items:center;gap:.5rem;padding:.9rem 0 .4rem;font-size:.8rem;font-weight:600;color:#9AA096}
.ck-steps li{display:flex;align-items:center;gap:.45rem}
.ck-steps li + li::before{content:"";width:28px;height:1.5px;background:currentColor;opacity:.35;margin-right:.1rem}
.ck-steps span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;border:1.5px solid currentColor}
.ck-steps li.on{color:var(--green-d)}
.ck-steps li.on span{background:var(--green-d);border-color:var(--green-d);color:#fff}
.ck-steps li.ok{color:var(--green-d)}
/* Envío gratis */
.ck-free{margin:.6rem 0 .2rem;padding:.85rem 1rem;border-radius:16px;background:#F3F7F1}
.ck-free-t{display:flex;align-items:center;gap:.55rem;font-size:.86rem;color:var(--ink)}
.ck-free-t .ic{font-size:19px;color:var(--green-d);flex:none}
.ck-free-t b{color:var(--brown)}
.ck-bar{margin-top:.6rem;height:7px;border-radius:99px;background:#E1E9DE;overflow:hidden}
.ck-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green-l),var(--green-d));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ck-free.ok{background:#E3F4E9}
.ck-free.ok b{color:var(--green-d)}
/* Cupón */
.ck-cupon-wrap{padding:.9rem 0 1.2rem;border-top:1px solid var(--line)}
.ck-cupon-btn{display:inline-flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:600;color:var(--green-d);padding:.3rem 0}
.ck-cupon-btn .ic{font-size:18px}
.ck-cupon-row{display:flex;gap:.5rem}
.ck-cupon-row .ck-in{flex:1;text-transform:uppercase;letter-spacing:.06em}
.ck-cupon-go{flex:none;padding:0 1.1rem;border-radius:12px;background:var(--brown);color:#fff;font-weight:600;font-size:.9rem}
.ck-msg{margin-top:.45rem;font-size:.8rem;color:var(--ink-soft)}
.ck-cupon-on{display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem .7rem 1rem;border-radius:14px;border:1.5px dashed rgba(43,138,80,.45);background:#F2F9F4}
.ck-cupon-on > .ic{font-size:20px;color:var(--green-d);flex:none}
.ck-cupon-on span{flex:1;min-width:0;font-size:.85rem;color:var(--ink)}
.ck-cupon-on b{display:block;color:var(--green-d);letter-spacing:.04em}
.ck-cupon-on small{display:block;color:#A65A00;font-size:.76rem}
.ck-cupon-on button{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-soft)}
.ck-cupon-on button:hover{background:#fff}
/* Campos */
.ck-in{width:100%;padding:.8rem .95rem;border-radius:12px;border:1.5px solid rgba(20,40,25,.14);background:#fff;font:inherit;font-size:16px;color:var(--brown);transition:border-color .2s,box-shadow .2s}
.ck-in::placeholder{color:#A3A8A0}
.ck-in:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(56,168,99,.15)}
textarea.ck-in{resize:none;line-height:1.45}
.ck-back{display:inline-flex;align-items:center;gap:.4rem;margin:.2rem 0 .3rem;font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.ck-back .ic{font-size:16px}
.ck-back:hover{color:var(--green-d)}
.ck-form{display:grid;gap:1.05rem;padding:.6rem 0 1.4rem}
.ck-f{border:0;margin:0;padding:0;min-width:0}
.ck-f > label,.ck-f > legend{display:block;margin-bottom:.45rem;font-size:.86rem;font-weight:600;color:var(--brown);padding:0}
.ck-f > label span{font-weight:400;color:var(--ink-soft)}
.ck-e{font-size:.78rem;color:var(--red);margin-top:.35rem}
.ck-e:empty{display:none}
.ck-f.bad .ck-in{border-color:var(--red);box-shadow:0 0 0 4px rgba(215,40,47,.1)}
.ck-f.bad .ck-opt{border-color:rgba(215,40,47,.45)}
.ck-f[hidden]{display:none}
/* Opciones (envío / pago) */
.ck-opts{display:grid;gap:.5rem}
.ck-opts.two{grid-template-columns:1fr 1fr}
.ck-opt{position:relative;display:flex;align-items:center;gap:.7rem;margin:0;padding:.75rem .8rem;border-radius:14px;border:1.5px solid rgba(20,40,25,.12);background:#fff;cursor:pointer;
  transition:border-color .2s,background .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.ck-opt input{position:absolute;opacity:0;pointer-events:none}
.ck-opt-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#F1F4EF;color:var(--brown);transition:background .2s,color .2s}
.ck-opt-ic .ic{font-size:20px}
.ck-opt-t{flex:1;min-width:0;line-height:1.25}
.ck-opt-t b{display:block;font-size:.88rem;color:var(--brown)}
.ck-opt-t small{display:block;margin-top:.1rem;font-size:.74rem;color:var(--ink-soft)}
.ck-opt-dot{flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(20,40,25,.25);transition:border .2s}
.ck-opt.on{border-color:var(--green-d);background:#F2F9F4;box-shadow:0 6px 16px -12px rgba(43,138,80,.8)}
.ck-opt.on .ck-opt-ic{background:var(--green-d);color:#fff}
.ck-opt.on .ck-opt-dot{border:5.5px solid var(--green-d)}
.ck-opt:has(input:focus-visible){outline:3px solid var(--green);outline-offset:2px}
.ck-opts.two .ck-opt{flex-direction:column;align-items:flex-start;gap:.55rem}
.ck-opts.two .ck-opt-dot{position:absolute;top:.8rem;right:.8rem}
.ck-priv{display:flex;gap:.5rem;font-size:.76rem;color:var(--ink-soft);line-height:1.4}
.ck-priv .ic{font-size:16px;color:var(--green-d);flex:none;margin-top:.05rem}
/* Resumen */
.ck-sum{display:grid;gap:.35rem;margin:0}
.ck-sum div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-size:.88rem;color:var(--ink-soft)}
.ck-sum dt,.ck-sum dd{margin:0}
.ck-sum dd{color:var(--brown);font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.ck-sum dd.free{color:var(--green-d);font-weight:600}
.ck-sum .desc dd{color:var(--green-d)}
.ck-sum .tot{margin-top:.4rem;padding-top:.6rem;border-top:1px dashed rgba(20,40,25,.18)}
.ck-sum .tot dt{font-weight:700;font-size:1rem;color:var(--brown)}
.ck-sum .tot dt small{font-weight:500;font-size:.75rem;color:var(--ink-soft)}
.ck-sum .tot dd{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1}
.ck-err{margin-top:.8rem;padding:.65rem .8rem;border-radius:12px;background:#FCECEC;color:#A11B21;font-size:.84rem}
.cart-cta[disabled]{opacity:.7;cursor:progress}
button.cart-cta{width:100%;border:0;cursor:pointer;font-family:inherit}
.ck-send{background:#1FA855}
.ck-send:hover{background:#178F47}
/* Listo */
.ck-done{text-align:center;padding:2.2rem .4rem 2rem;display:flex;flex-direction:column;align-items:center}
.ck-done-ic{width:84px;height:84px;margin-bottom:1.1rem}
.ck-done-ic svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ck-done-ic circle{stroke:var(--green);stroke-width:3;fill:#E7F4EC;stroke-dasharray:151;stroke-dashoffset:151;animation:ckDraw .6s .05s ease-out forwards}
.ck-done-ic path{stroke:var(--green-d);stroke-width:4;stroke-dasharray:40;stroke-dashoffset:40;animation:ckDraw .4s .5s ease-out forwards}
@keyframes ckDraw{to{stroke-dashoffset:0}}
.ck-done h4{font-size:1.4rem;font-weight:700;color:var(--brown);letter-spacing:-.015em}
.ck-code{margin-top:.5rem;display:inline-block;padding:.35rem .8rem;border-radius:8px;background:#F3F7F1;font-size:.86rem;color:var(--ink-soft)}
.ck-code b{color:var(--brown);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ck-done p:not(.ck-code){margin-top:.8rem;max-width:30ch;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.ck-done p b{color:var(--brown)}
.ck-wa{width:100%;margin-top:1.4rem;background:#1FA855}
.ck-done .ce-btn{margin-top:.8rem}
@media (max-width:380px){ .ck-opts.two{grid-template-columns:1fr} .ck-opts.two .ck-opt{flex-direction:row;align-items:center} .ck-opts.two .ck-opt-dot{position:static} }
@media (prefers-reduced-motion:reduce){ .ck-done-ic circle,.ck-done-ic path{animation:none;stroke-dashoffset:0} }
@media (max-height:700px){ .cart-foot .cart-note{display:none} .ck-sum{gap:.2rem} .ck-sum .tot dd{font-size:1.3rem} }

/* El carrito y el menú siempre por encima de la ficha de la planta (95) y del buscador (95) */
.scrim{z-index:96}
.drawer{z-index:97}
/* El panel de filtros del celular también va por encima del fondo oscuro (si no, queda tapado y borroso) */
@media (max-width:1020px){ .cat-aside{z-index:97} }

/* =========================================================================
   Foto a pantalla completa (main.js → FOTO): catálogo, portada, ficha y cartilla
   ========================================================================= */
.ct-zoom{position:fixed;inset:0;z-index:200;background:#070B08;touch-action:none;
  opacity:0;visibility:hidden;transition:opacity .28s,visibility 0s .28s;-webkit-tap-highlight-color:transparent}
.ct-zoom.on{opacity:1;visibility:visible;transition:opacity .28s}
.ct-zoom img{position:fixed;left:0;top:0;max-width:none;border-radius:6px;transform-origin:0 0;will-change:transform;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
.ct-zoom-x{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:2;
  width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ct-zoom-x .ic{font-size:22px}
.ct-zoom-x:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ct-zoom{z-index:300}
@media (prefers-reduced-motion:reduce){ .ct-zoom{transition:none} }
/* Botón "ver en grande" en las tarjetas: siempre visible en celular, al pasar el mouse en compu */
.card .pic-zoom{position:absolute;top:.8rem;right:.8rem;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--brown);box-shadow:0 6px 14px -8px rgba(20,40,25,.45);transition:opacity .25s,transform .25s,background .2s;cursor:zoom-in}
.card .pic-zoom .ic{font-size:17px}
.card .pic-zoom:hover{background:#fff;color:var(--green-d)}
.card .pic-zoom:focus-visible{outline:3px solid var(--green);outline-offset:2px;opacity:1;transform:none}
@media (hover:hover) and (pointer:fine){
  .card .pic-zoom{opacity:0;transform:scale(.85)}
  .card:hover .pic-zoom{opacity:1;transform:none}
}
/* Ficha: la foto invita a verse completa */
.pv-media{cursor:zoom-in}
.pv-media:focus-visible{outline:3px solid var(--green);outline-offset:-3px}


/* ===== Créditos de desarrollo (pie) ===== */
.legal-dev{font-size:.8rem;color:rgba(255,255,255,.5)}
.legal-dev a{color:rgba(255,255,255,.75);text-decoration:underline;text-underline-offset:2px}
.legal-dev a:hover{color:#fff}

/* ===== Ficha: tamaño de flor y guía de cuidados ===== */
.pv-tags li.pv-flor{border-color:var(--peach);background:var(--beige)}
.pv-guia{margin-top:.7rem;font-size:.8rem}
.pv-guia a{display:inline-flex;align-items:center;gap:.35rem;color:var(--green-d);font-weight:600}
.pv-guia a:hover{text-decoration:underline}

/* ===== Guía de cuidados: Corona de Cristo ===== */
.guia{padding-bottom:clamp(3rem,6vw,5rem)}
.guia-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1.2rem,3vw,2.2rem) 0 clamp(1.5rem,3vw,2.5rem)}
.guia-kicker{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green-d);margin-bottom:.6rem}
.guia-hero h1{font-weight:700;color:var(--brown);font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-.03em}
.guia-hero h1 em{font-style:italic;font-weight:400;color:var(--ink-soft);font-size:.55em;display:block;margin-top:.4rem;letter-spacing:0}
.guia-hero p{margin-top:1rem;color:var(--ink-soft);font-size:1.05rem;max-width:58ch}
.guia-hero img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;box-shadow:var(--shadow)}
.guia-ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem;margin-top:1.4rem}
.guia-ficha div{background:var(--mint);border-radius:14px;padding:.7rem .9rem}
.guia-ficha small{display:block;font-size:.72rem;color:var(--ink-soft)}
.guia-ficha b{font-weight:600;font-size:.9rem;color:var(--brown)}
.guia h2{font-weight:700;color:var(--brown);font-size:clamp(1.4rem,2.6vw,1.9rem);letter-spacing:-.02em;line-height:1.15}
.guia-sec{padding:clamp(1.8rem,4vw,3rem) 0;border-top:1px solid var(--line)}
.guia-sec > p.lead{margin-top:.6rem;color:var(--ink-soft);max-width:68ch}
.guia-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1rem;margin-top:1.4rem}
.guia-card{border:1px solid var(--line);border-radius:18px;padding:1.2rem 1.25rem;display:flex;flex-direction:column;gap:.55rem;background:#fff}
.guia-card h3{display:flex;align-items:center;gap:.55rem;font-size:1.08rem;font-weight:600;color:var(--brown)}
.guia-card h3 .ic{width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--green-d);display:grid;place-items:center;font-size:20px}
.guia-card p{color:var(--ink-soft);font-size:.93rem;line-height:1.55}
.guia-tip{margin-top:auto;background:var(--beige);border-radius:12px;padding:.65rem .8rem;font-size:.86rem;color:var(--brown-l);line-height:1.45}
.guia-tip b{color:var(--brown);font-weight:600}
.guia-tamanos{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-top:1.4rem}
.guia-tamanos div{border:1px solid var(--line);border-radius:16px;padding:.9rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.guia-tamanos .dot{border-radius:50%;background:radial-gradient(circle at 50% 50%,#E8742A 0 14%,#F6CFAE 15% 100%);border:2px solid #E8A27A}
.guia-tamanos b{font-weight:600;color:var(--brown);font-size:.95rem}
.guia-tamanos small{color:var(--ink-soft);font-size:.8rem}
.guia-nota{margin-top:1rem;font-size:.82rem;color:var(--ink-soft);max-width:75ch}
.guia-tabla{width:100%;border-collapse:collapse;margin-top:1.3rem;font-size:.92rem}
.guia-tabla th,.guia-tabla td{text-align:left;padding:.8rem .9rem;border-bottom:1px solid var(--line);vertical-align:top}
.guia-tabla th{font-weight:600;color:var(--brown);background:var(--mint)}
.guia-tabla td:first-child{font-weight:600;color:var(--brown);white-space:nowrap}
.guia-tabla td{color:var(--ink-soft)}
.guia-cta{margin-top:clamp(1.8rem,4vw,3rem);background:var(--green-d);color:#fff;border-radius:22px;padding:clamp(1.4rem,3vw,2.2rem);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.guia-cta h2{color:#fff}
.guia-cta p{color:rgba(255,255,255,.85);margin-top:.3rem}
.guia-cta a{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--green-d);font-weight:600;border-radius:99px;padding:.75rem 1.3rem}
@media (max-width:760px){
  .guia-hero{grid-template-columns:1fr}
  .guia-hero img{aspect-ratio:16/11;order:-1}
  .guia-tabla thead{display:none}
  .guia-tabla tr{display:block;border-bottom:1px solid var(--line);padding:.6rem 0}
  .guia-tabla td{display:block;border:0;padding:.2rem 0}
}

/* ===== Celulares: menú y carrito a pantalla completa (sin franja vacía al costado) ===== */
@media (max-width:760px){
  .drawer,.drawer.cart,.drawer.mm{width:100%;max-width:none;border-radius:0;box-shadow:none}
}

/* ===== Con el menú, el carrito, la ficha o los filtros abiertos, la página de atrás no se mueve ===== */
html:has(body.lock),html:has(body.ct-zoom-open){overflow:hidden}
body.lock{overscroll-behavior:none}
.dr-body,.cart-body,.f-body,.s-body,.pv-card,.pv-info,.cat-aside{overscroll-behavior:contain}