/* Plantas Pequeñas · tienda — Jardineros en Lima */
/* Layout: tienda online de una columna en celular; ficha de producto en dos columnas (foto | compra) desde 860px.
   Mismo lenguaje visual de la landing: verde Jardineros, naranja para precios y acción, títulos condensados en cursiva. */
:root{
  --verde:#1f7a2e; --verde-osc:#0d4d16; --verde-claro:#eef6ec; --verde-sel:#e3f2df;
  --naranja:#d97300; --naranja-osc:#b25e00; --amarillo:#ffc94a;
  --texto:#1f2a21; --gris:#5a6a5d; --borde:#d9e2d6; --fondo:#ffffff; --fondo-2:#f5f7f2;
  --wa:#1a8a46; --wa-osc:#146e38; --aviso:#fff4e0; --aviso-txt:#6b4300; --rojo:#b3261e;
  --titulo:"Fira Sans Extra Condensed","Arial Narrow",sans-serif;
  --cuerpo:Lato,"Segoe UI",system-ui,sans-serif;
  --num:"Fira Sans",Lato,system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
body{margin:0;font-family:var(--cuerpo);color:var(--texto);background:var(--fondo);font-size:16px;line-height:1.5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--fondo)}
input,select,button,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--verde)}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px}
.envoltura{max-width:1160px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{text-wrap:balance}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}


/* ---------- Encabezado ---------- */
.cab{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--fondo);box-shadow:0 2px 10px rgba(13,77,22,.10)}
.cab .envoltura{display:flex;align-items:center;gap:16px;padding-block:10px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;border:0;background:none;padding:0}
.logo img{width:44px;height:44px}
.logo b{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:23px;line-height:.95;color:var(--verde-osc);text-align:left}
.logo b span{display:block;color:var(--verde)}
.menu{display:flex;gap:26px;margin-left:auto;align-items:center}
.menu button{border:0;background:none;padding:6px 0;font-weight:700;color:var(--texto);font-size:15px;border-bottom:2px solid transparent}
.menu button:hover,.menu button.on{color:var(--verde);border-bottom-color:var(--verde)}
.carrito{position:relative;display:flex;align-items:center;gap:8px;border:1.5px solid var(--borde);background:var(--fondo);border-radius:999px;padding:7px 14px 7px 10px;font-weight:900;color:var(--verde-osc)}
.carrito svg{width:22px;height:22px}
.carrito .cnt{min-width:22px;height:22px;border-radius:11px;background:var(--naranja);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.carrito .cnt[data-n="0"]{background:var(--borde);color:var(--gris)}
@media (max-width:760px){ .menu{display:none} .carrito{margin-left:auto} .carrito .lbl{display:none} }

/* ---------- Migas ---------- */
.migas{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;color:var(--gris);padding-block:18px 6px}
.migas button{border:0;background:var(--fondo-2);border-radius:6px;padding:5px 10px;color:var(--gris);font-size:13px}
.migas button:hover{color:var(--verde)}
.migas .sep{color:var(--verde);font-weight:900}

/* ---------- Catálogo ---------- */
.portada{background:linear-gradient(160deg,#2f9a3e 0%,#1f7a2e 45%,#0d4d16 100%);color:#fff}
.portada .envoltura{display:flex;align-items:center;gap:14px;padding-block:18px}
.portada .hoja-ico{flex:none;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
.portada .hoja-ico svg{width:24px;height:24px;color:#fff}
.portada h1{font-family:"Fira Sans",Lato,system-ui,sans-serif;font-style:normal;font-weight:500;font-size:clamp(17px,2.2vw,26px);line-height:1.25;letter-spacing:-.005em;margin:0;color:#fff;text-wrap:balance}
.portada h1 b{font-weight:700}
.portada h1 span{color:inherit}
@media (max-width:640px){ .portada .envoltura{padding-block:12px;gap:10px} .portada .hoja-ico{width:32px;height:32px;border-radius:10px} .portada .hoja-ico svg{width:19px;height:19px} }
.portada p{margin:0;max-width:56ch;font-size:17px;opacity:.95}
.confianza{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;font-weight:700}
.confianza span{display:flex;align-items:center;gap:6px}
.confianza svg{width:18px;height:18px;color:var(--amarillo)}
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-block:22px 6px}
.paso{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--gris)}
.paso b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--verde-claro);color:var(--verde);display:flex;align-items:center;justify-content:center;font-family:var(--num)}
.paso strong{display:block;color:var(--texto);font-size:15px}
@media (max-width:640px){
  .pasos{gap:6px;padding-block:14px 0}
  .paso{flex-direction:column;align-items:center;text-align:center;gap:4px;font-size:12px}
  .paso strong{font-size:12.5px;line-height:1.2}
  .paso .sub{display:none}
  .paso b{width:24px;height:24px;font-size:13px}
}
.barra-cat{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;padding-block:22px 14px}
.h2{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:clamp(28px,4vw,36px);color:var(--verde-osc);margin:0;line-height:1}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--borde);background:var(--fondo);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;color:var(--gris)}
.chip[aria-pressed="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.grilla{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1000px){ .grilla{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:720px){ .grilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} }
.prod{display:flex;flex-direction:column;border:1px solid var(--borde);border-radius:14px;background:var(--fondo);overflow:hidden;text-align:center;min-width:0;transition:box-shadow .15s,transform .15s}
.prod:hover{box-shadow:0 10px 24px rgba(13,77,22,.12);transform:translateY(-2px)}
.prod .foto{border:0;padding:0;background:#fff;aspect-ratio:1/1;width:100%;max-width:100%;display:block}
.prod .foto img{width:100%;height:100%;object-fit:contain;display:block}
.prod .info{display:flex;flex-direction:column;gap:3px;padding:10px 12px 14px;flex:1}
.prod .cat{font-size:12px;font-weight:700;color:var(--verde)}
.prod h3{margin:0;font-size:16px;font-weight:900;line-height:1.25}
.prod .det{font-size:13px;color:var(--gris)}
.prod .desde{font-size:13px;color:var(--gris);margin-top:4px}
.prod .desde b{display:block;font-family:var(--num);font-size:22px;color:var(--naranja);line-height:1.1}
.prod .ops{font-size:12px;color:var(--gris)}
.prod .chips-p{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;min-height:24px}
.prod .tam-chip{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:700;color:var(--verde-osc);background:#eaf4e6;border-radius:999px;padding:3px 9px}
.prod .tam-chip svg{width:13px;height:13px}
.prod .mayor-b{margin:8px 0 2px;background:#fff6d6;border:1px solid #f3d36b;border-radius:10px;padding:6px 8px;display:flex;flex-direction:column;align-items:center;line-height:1.25}
.prod .mayor-b span{font-size:12.5px;color:#5b4300}
.prod .mayor-b b{font-family:var(--num);font-size:15px;color:var(--naranja-osc)}
.prod .mayor-b small,.prod .mayor-b small span{font-size:11px;color:#7a6420}
.prod .nw{white-space:nowrap}
.prod{display:flex;flex-direction:column}
.prod .ver{margin-top:auto}
.prod .mayor-b{margin-bottom:10px}
@media (max-width:520px){ .prod .mayor-b{padding:6px 4px} .prod .mayor-b span{font-size:12px} .prod .mayor-b b{display:block;font-size:16px} .prod .mayor-b small{font-size:10.5px} .prod .ops{font-size:11.5px} .prod .ops .nw{display:block} .prod .chips-p{flex-direction:column;justify-content:flex-start;gap:3px;min-height:46px} .prod .tam-chip{font-size:11.5px;padding:3px 7px} }
.prod .ver{margin-top:auto;border:0;border-radius:999px;background:var(--verde);color:#fff;font-weight:900;padding:10px;margin-top:10px}
.prod .ver:hover{background:var(--verde-osc)}
.prod.otra{border:2px dashed var(--verde);justify-content:center;gap:8px;padding:18px 14px;background:var(--verde-claro)}
.banner-cot{margin-top:14px;background:linear-gradient(110deg,#f08a1c 0%,var(--naranja) 60%,#c26400 100%);color:#fff;border-radius:14px;padding:10px 12px 10px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;box-shadow:0 4px 12px rgba(217,115,0,.18)}
.banner-cot .bc-ico{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center}
.banner-cot .bc-ico svg{width:21px;height:21px}
.banner-cot .bc-txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
.banner-cot h2{margin:0;font-family:var(--titulo);font-style:italic;font-weight:800;font-size:21px;line-height:1.1}
.banner-cot p{margin:0;font-size:14px;opacity:.95;line-height:1.35}
.bc-btn{border:0;border-radius:999px;background:var(--amarillo);color:#3a2600;font-weight:900;font-size:14px;padding:9px 16px;white-space:nowrap;box-shadow:0 3px 0 #c99a1e}
.bc-btn:hover{background:#ffd56e}
@media (max-width:700px){ .banner-cot{padding:9px 10px;gap:10px;margin-top:12px;border-radius:12px} .banner-cot .bc-ico{width:30px;height:30px;border-radius:9px} .banner-cot .bc-ico svg{width:18px;height:18px} .banner-cot h2{font-size:16.5px} .banner-cot p{display:none} .bc-btn{padding:8px 12px;font-size:13px} .bc-largo{display:none} }
.prod.otra svg{width:42px;height:42px;color:var(--verde);margin:0 auto}
.prod.otra p{margin:0;font-size:14px;color:var(--gris)}

/* calculadora de cerco */
.menu .m-calc{display:flex;align-items:center;gap:7px;background:#fff4e0;color:var(--naranja-osc);border:1.5px solid #f3c98e;border-radius:999px;padding:7px 14px;font-weight:900}
.menu .m-calc svg{width:18px;height:18px}
.menu .m-calc:hover{background:#ffe9c7;border-color:var(--naranja);color:var(--naranja-osc)}
.calcu{margin-block:34px 10px;border-radius:20px;background:var(--fondo-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;padding:24px;scroll-margin-top:90px}
@media (max-width:820px){ .calcu{grid-template-columns:1fr;padding:18px;gap:16px} }
.calcu .izq,.calcu .der{display:flex;flex-direction:column;gap:14px;min-width:0}
.calcu .eti{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;background:#fff4e0;color:var(--naranja-osc);font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:5px 12px}
.calcu .eti svg{width:15px;height:15px}
.calcu h2{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:clamp(28px,3.6vw,36px);line-height:1.02;color:var(--verde-osc);margin:0}
.calcu .intro{margin:0;color:var(--gris);font-size:14.5px;max-width:52ch}
.calcu .campo label .opc{font-weight:400}
.res-caja{background:var(--verde-osc);color:#fff;border-radius:16px;padding:16px 18px;text-align:center;font-size:16px;font-weight:700;line-height:1.5}
.res-caja .big{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:44px;line-height:1;vertical-align:-4px;margin:0 4px}
.res-caja .big.am{color:var(--amarillo)}
.res-caja .sug{display:block;margin-top:6px;font-size:13px;font-weight:400;opacity:.9}
.dens{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.den{border:1.5px solid var(--borde);background:var(--fondo);border-radius:12px;padding:10px 8px;font-weight:900;font-size:15px;color:var(--texto);line-height:1.25}
.den small{display:block;font-weight:400;font-size:12.5px;color:var(--gris)}
.den[aria-pressed="true"]{border-color:var(--verde);background:var(--verde-sel);color:var(--verde-osc);box-shadow:inset 0 0 0 1px var(--verde)}
.regla{background:var(--fondo);border:1px solid var(--borde);border-radius:16px;padding:14px 14px 10px}
.regla svg{width:100%;height:auto;display:block}
.regla-txt{margin:8px 0 0;text-align:center;font-size:15px;font-weight:700;color:var(--texto)}
.regla-txt b{color:var(--verde)}
.regla-txt em{font-style:normal;color:var(--naranja)}

/* ---------- Campos ---------- */
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-weight:900;font-size:14px}
.campo label .opc{font-weight:400;color:var(--gris)}
.campo input,.campo select,.campo textarea{height:46px;border:1.5px solid var(--borde);border-radius:12px;padding:0 12px;background:var(--fondo);width:100%}
.campo textarea{height:auto;min-height:80px;padding:10px 12px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px var(--verde-sel)}
.campo small{font-size:12px;color:var(--gris)}
.campo .err{color:var(--rojo);font-size:13px;font-weight:700}
.tel{display:flex}
.tel span{display:flex;align-items:center;padding:0 12px;border:1.5px solid var(--borde);border-right:0;border-radius:12px 0 0 12px;background:var(--fondo-2);font-weight:700}
.tel input{border-radius:0 12px 12px 0}

/* ---------- Ficha de producto ---------- */
.ficha{display:grid;grid-template-columns:1fr;gap:26px;padding-block:6px 10px}
@media (min-width:860px){ .ficha{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px} }
.galeria{display:flex;flex-direction:column;gap:12px;min-width:0}
.galeria .grande{border:1px solid var(--borde);border-radius:16px;background:#fff;aspect-ratio:1/1;max-width:100%;overflow:hidden}
.galeria .grande img,.galeria .grande svg{width:100%;height:100%;object-fit:contain;display:block}
.galeria .grande{position:relative}
.galeria .leyenda{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.92);color:var(--verde-osc);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:900}
.miniaturas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mini{border:1.5px solid var(--borde);border-radius:12px;background:#fff;padding:0;overflow:hidden;aspect-ratio:1/1;max-width:100%;display:flex;flex-direction:column}
.mini img,.mini svg{width:100%;flex:1;min-height:0;object-fit:contain;display:block}
.mini span{font-size:11px;font-weight:700;color:var(--gris);padding:3px 2px;background:var(--fondo-2)}
.mini[aria-current="true"]{border-color:var(--verde);box-shadow:inset 0 0 0 1px var(--verde)}
.mini[aria-current="true"] span{background:var(--verde-sel);color:var(--verde-osc)}
.gal-nota{font-size:12px;color:var(--gris);margin:0}
.colores{display:flex;flex-wrap:wrap;gap:10px}
.color{border:1.5px solid var(--borde);background:var(--fondo);border-radius:12px;padding:6px 12px 6px 6px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--texto)}
.color i{width:30px;height:30px;border-radius:8px;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.color[aria-checked="true"]{border-color:var(--verde);background:var(--verde-sel);box-shadow:inset 0 0 0 1px var(--verde)}
.color-sel{font-size:14px;color:var(--gris)}
.color-sel b{color:var(--texto)}
.compra{display:flex;flex-direction:column;gap:14px;min-width:0}
.compra .cat{display:inline-flex;align-self:flex-start;background:var(--verde);color:#fff;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:4px 10px}
.compra h1{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:clamp(32px,4.4vw,44px);line-height:1;color:var(--verde-osc);margin:0}
.datos{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:14px;margin:0}
.datos dt{font-weight:900}
.datos dd{margin:0;color:var(--gris)}
.datos dd i{color:var(--texto)}
.mas-info{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:2px 0;color:var(--verde);font-weight:900;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.mas-info svg{width:16px;height:16px}
.detalle{scroll-margin-top:80px}
.compra .resumen{margin:0;color:var(--gris);font-size:15px}
.desde-ficha{font-size:15px;color:var(--gris)}
.desde-ficha b{font-family:var(--num);font-size:30px;color:var(--naranja)}

.bloque{border:1.5px solid var(--borde);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:14px;background:var(--fondo)}
.bloque-t{display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;margin:0}
.bloque-t b{width:26px;height:26px;border-radius:50%;background:var(--verde);color:#fff;font-family:var(--num);font-size:14px;display:flex;align-items:center;justify-content:center;flex:none}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.linea .col{display:inline-flex;align-items:center;gap:5px}
.linea .col i{width:12px;height:12px;border-radius:3px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.tab{border:1.5px solid var(--borde);background:var(--fondo);border-radius:12px;padding:10px 8px;font-weight:900;font-size:15px;color:var(--gris);line-height:1.2}
.tab small{display:block;font-weight:400;font-size:12px}
.tab[aria-selected="true"]{border-color:var(--verde);background:var(--verde-sel);color:var(--verde-osc);box-shadow:inset 0 0 0 1px var(--verde)}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.packs.dos{grid-template-columns:repeat(2,minmax(0,1fr))}
.pack{position:relative;border:1.5px solid var(--borde);background:var(--fondo);border-radius:12px;padding:12px 8px 10px;text-align:center;display:flex;flex-direction:column;gap:2px;align-items:center}
.pack .n{font-weight:900;font-size:17px;line-height:1.15}
.pack .tp{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--gris)}
.pack .pr{font-family:var(--num);font-weight:700;font-size:20px;color:var(--naranja);line-height:1.2}
.pack .cu{font-size:12px;color:var(--gris)}
.pack .ahorro{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--amarillo);color:#3a2600;font-size:11px;font-weight:900;border-radius:999px;padding:2px 8px}
.pack[aria-checked="true"]{border-color:var(--naranja);background:#fff7ec;box-shadow:inset 0 0 0 1px var(--naranja)}
.cant{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cant > span{font-weight:700;font-size:14px}
.stepper{display:flex;align-items:center;border:1.5px solid var(--borde);border-radius:12px;overflow:hidden}
.stepper button{width:44px;height:42px;border:0;background:var(--fondo-2);font-size:22px;font-weight:900;color:var(--verde)}
.stepper button:disabled{color:var(--borde);cursor:default}
.stepper output{min-width:46px;text-align:center;font-family:var(--num);font-weight:700;font-size:18px}
.tramos{width:100%;border-collapse:collapse;font-size:14px}
.tramos td{padding:8px 10px;border-top:1px solid var(--borde)}
.tramos td:last-child{text-align:right;font-family:var(--num);font-weight:700}
.tramos tr.on td{background:var(--verde-sel);color:var(--verde-osc)}
.aviso{background:var(--aviso);color:var(--aviso-txt);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700}

.totalbox{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.totalbox .lbl{font-size:14px;color:var(--gris)}
.totalbox .lbl b{display:block;color:var(--texto);font-size:15px}
.totalbox .monto{font-family:var(--num);font-weight:700;font-size:34px;color:var(--naranja);line-height:1;text-align:right}
.totalbox .monto small{display:block;font-family:var(--cuerpo);font-size:12px;font-weight:700;color:var(--gris);margin-top:4px}
.acciones{display:grid;grid-template-columns:1fr;gap:10px}
.btn{border:0;border-radius:999px;padding:14px 18px;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;gap:8px}
.btn svg{width:20px;height:20px}
.btn.prim{background:var(--naranja);color:#fff}
.btn.prim:hover{background:var(--naranja-osc)}
.btn.sec{background:var(--fondo);border:2px solid var(--verde);color:var(--verde)}
.btn.sec:hover{background:var(--verde-claro)}
.btn.wa{background:var(--wa);color:#fff}
.btn.wa:hover{background:var(--wa-osc)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.nota-envio{display:flex;gap:8px;font-size:13px;color:var(--gris);align-items:flex-start}
.nota-envio svg{flex:none;width:18px;height:18px;color:var(--verde);margin-top:1px}

.detalle{display:grid;grid-template-columns:1fr;gap:24px;padding-block:30px 6px;border-top:1px solid var(--borde);margin-top:24px}
@media (min-width:860px){ .detalle{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:44px} }
.detalle h2{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:28px;color:var(--verde-osc);margin:0 0 8px}
.detalle p{margin:0;max-width:65ch}
.destacados{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.destacados li{display:flex;gap:10px;align-items:flex-start}
.destacados svg{flex:none;width:20px;height:20px;color:var(--verde);margin-top:2px}

.otros{padding-block:34px 20px}
.otros .h2{text-align:center;margin-bottom:20px}

/* ---------- Pedido ---------- */
.pedido{display:grid;grid-template-columns:1fr;gap:22px;padding-block:6px 30px}
@media (min-width:900px){ .pedido{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start} }
.pedido h1{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:clamp(32px,4.4vw,44px);color:var(--verde-osc);margin:0 0 4px;line-height:1}
.etapas{display:flex;gap:8px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--gris);margin-bottom:12px}
.etapas span{display:flex;align-items:center;gap:6px}
.etapas b{width:22px;height:22px;border-radius:50%;background:var(--borde);color:var(--texto);display:flex;align-items:center;justify-content:center;font-family:var(--num);font-size:12px}
.etapas .on b{background:var(--verde);color:#fff}
.lineas{display:flex;flex-direction:column}
.linea{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding-block:14px;border-bottom:1px solid var(--borde)}
.linea img{width:64px;height:64px;object-fit:contain;border:1px solid var(--borde);border-radius:10px;background:#fff}
.linea .ph{width:64px;height:64px;border-radius:10px;background:var(--verde-claro);display:flex;align-items:center;justify-content:center;color:var(--verde)}
.linea .ph svg{width:28px;height:28px}
.linea h3{margin:0;font-size:15px;font-weight:900}
.linea .d{font-size:13px;color:var(--gris)}
.linea .der{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.linea .t{font-family:var(--num);font-weight:700;font-size:17px}
.linea .t.cot{font-family:var(--cuerpo);font-size:12px;font-weight:900;color:var(--naranja);text-transform:uppercase}
.linea .stepper button{width:34px;height:32px;font-size:18px}
.linea .stepper output{min-width:32px;font-size:15px}
.quitar{border:0;background:none;color:var(--gris);font-size:13px;text-decoration:underline;padding:0}
.vacio{padding:26px;text-align:center;color:var(--gris);border:2px dashed var(--borde);border-radius:16px;display:flex;flex-direction:column;gap:12px;align-items:center}
.totales{display:flex;flex-direction:column;gap:4px;padding-top:14px}
.totales .fila{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.totales .fila.grande{font-size:18px;font-weight:900}
.totales .fila.grande b{font-family:var(--num);color:var(--naranja);font-size:26px}
.totales .igv{font-size:13px;color:var(--gris);text-align:right}
.cotiza{margin-top:14px;border:1.5px dashed var(--naranja);background:#fff7ec;border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;align-items:center}
.cotiza .ico{grid-row:1/3;width:38px;height:38px;border-radius:11px;background:var(--naranja);color:#fff;display:flex;align-items:center;justify-content:center}
.cotiza .ico svg{width:22px;height:22px}
.cotiza h2{margin:0;font-family:var(--titulo);font-style:italic;font-weight:800;font-size:19px;line-height:1.1;color:var(--naranja-osc)}
.cotiza p{margin:0;font-size:12.5px;color:var(--gris);line-height:1.35}
.cotiza .acc{display:contents}
.cotiza .mas-otra{grid-column:3;grid-row:1/3;padding:9px 14px;font-size:14px;white-space:nowrap}
.cotiza .otra-form{grid-column:1/-1;margin-top:8px}
.cotiza .otra-form .campo label{font-size:13px}
.cotiza .otra-form input{height:40px}
.cotiza .otra-form .btn{padding:10px 16px;font-size:14px}
@media (max-width:520px){ .cotiza{grid-template-columns:auto minmax(0,1fr)} .cotiza{padding:10px 12px} .cotiza .ico{width:32px;height:32px} .cotiza h2{font-size:16.5px} .cotiza .mas-otra{grid-column:1/-1;grid-row:auto;margin-top:8px;width:100%;padding:7px 12px;font-size:13.5px;background:#fff;color:var(--naranja-osc);border:1.5px solid var(--naranja);box-shadow:none} .cotiza .mas-otra:hover,.cotiza .mas-otra:focus,.cotiza .mas-otra:active{background:#fff;color:var(--naranja-osc)} }
.cotiza .otra-form{padding-top:0}
.seguir{margin-top:14px;width:100%}

.mas-otra{border:0;background:var(--naranja);color:#fff;font-weight:900;padding:12px 18px;border-radius:999px;align-self:flex-start}
.mas-otra:hover{background:var(--naranja-osc)}
.otra-form{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:10px;align-items:end;padding-top:10px}
.otra-form .ancho,.otra-form .btn{grid-column:1/-1}
.otra-form .btn{justify-self:start}
.otra-form textarea{min-height:64px}
@media (max-width:520px){ .otra-form .btn{justify-self:stretch} }
.panel-datos{background:var(--fondo-2);border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:14px}
.panel-datos h2{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:26px;color:var(--verde-osc);margin:0}
.legal{font-size:11.5px;line-height:1.4;color:var(--gris);margin:0}
.confirma{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:700;color:var(--verde-osc);margin:0}
.confirma svg{width:16px;height:16px;flex:none}
/* ---------- Celular: barra de compra + hoja deslizable ---------- */
.barra-compra{display:none}
.solo-movil{display:none}
@media (max-width:859px){
  .solo-movil{display:block}
  .barra-compra{position:fixed;left:0;right:0;bottom:0;z-index:57;background:var(--fondo);box-shadow:0 -6px 20px rgba(13,77,22,.14);padding-top:10px;padding-bottom:max(10px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));gap:10px;align-items:center}
  body.en-producto .barra-compra{display:grid;grid-template-columns:1fr 1.4fr}
  body.en-producto{padding-bottom:84px}
  .barra-compra .btn{padding:13px 8px;font-size:14px;white-space:nowrap;gap:6px}
  .barra-compra .btn svg{width:18px;height:18px}
  #opciones-pag .acciones{display:none}
  .compra > h1{order:1}
  .compra > #opciones-pag{order:2}
  .compra > .cat{order:3;margin-top:6px}
  .compra > .datos{order:4}
  .compra > .mas-info{order:5}
  .galeria .gal-nota{display:none}
  .precio-movil{display:none}
}
.precio-movil{font-size:15px;color:var(--gris)}
.precio-movil b{font-family:var(--num);font-size:28px;color:var(--naranja)}
.hoja-velo{position:fixed;inset:0;z-index:90;background:rgba(13,30,16,.5);display:flex;align-items:flex-end;justify-content:center}
.hoja{background:var(--fondo);width:100%;max-width:560px;max-height:92%;border-radius:20px 20px 0 0;display:flex;flex-direction:column;animation:sube .22s ease-out}
@keyframes sube{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.hoja-cab{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px max(16px,env(safe-area-inset-left,0px)) 10px;border-bottom:1px solid var(--borde)}
.hoja-cab img{width:84px;height:84px;object-fit:contain;border:1px solid var(--borde);border-radius:12px;background:#fff}
.hoja-cab h2{margin:0;font-size:16px;font-weight:900;line-height:1.25}
.hoja-cab .pr{font-family:var(--num);font-weight:700;font-size:24px;color:var(--naranja);line-height:1.1}
.hoja-cab .sub{font-size:12px;color:var(--gris)}
.hoja-x{align-self:start;border:0;background:var(--fondo-2);width:36px;height:36px;border-radius:50%;font-size:20px;color:var(--gris)}
.hoja-cuerpo{overflow:auto;padding:14px max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:12px;flex:1;min-height:0}
.hoja-cuerpo .bloque{border:0;padding:0;gap:12px}
.hoja-cuerpo .acciones,.hoja-cuerpo .nota-envio,.hoja-cuerpo .totalbox,.hoja-cuerpo .confirma,.hoja-cuerpo .bloque:last-child{display:none}
.hoja-pie{padding:12px max(16px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--borde);display:flex;flex-direction:column;gap:8px}
.hoja-tot{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--gris)}
.hoja-tot b{font-family:var(--num);font-size:22px;color:var(--texto)}
.hoja-volver{border:0;background:none;color:var(--verde);font-weight:900;padding:0;align-self:flex-start;font-size:14px}
.resumen-mini{background:var(--fondo-2);border-radius:12px;padding:10px 12px;font-size:13px;color:var(--gris)}
.resumen-mini b{color:var(--texto)}

/* ---------- Barra fija del pedido (celular) ---------- */
.barra-pedido{position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--verde-osc);color:#fff;padding-bottom:max(10px,env(safe-area-inset-bottom,0px));padding-top:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 -6px 20px rgba(0,0,0,.18)}
.barra-pedido .txt{font-size:13px;line-height:1.3}
.barra-pedido .txt b{display:block;font-family:var(--num);font-size:19px}
.barra-pedido button{border:0;border-radius:999px;background:var(--amarillo);color:#3a2600;font-weight:900;padding:11px 18px}
body.con-barra{padding-bottom:84px}

/* ---------- Toast y modal ---------- */
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--texto);color:#fff;border-radius:999px;padding:10px 18px;font-weight:700;font-size:14px;z-index:70;transition:all .2s;max-width:calc(100% - 32px);text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}


.pie-logo{display:flex;align-items:center;gap:10px;border:0;background:none;padding:0;cursor:pointer}
.pie-ico{width:46px;height:46px;border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center}
.pie-ico img{width:38px;height:38px}
.pie-logo b{font-family:var(--titulo);font-style:italic;font-weight:800;font-size:22px;line-height:.95;color:#fff;text-align:left}
.pie-logo b span{display:block;color:#a5d66f}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
/* Categorías: en celular los botones van en una sola fila con desplazamiento lateral */
@media (max-width:700px){
  .barra-cat .chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:calc(100% + 16px);margin-right:-16px;padding:2px 16px 4px 0}
  .barra-cat .chips::-webkit-scrollbar{display:none}
  .barra-cat .chip{flex:none}
}

/* Botón "Portada": vuelve a la web principal (se edita en el panel → Textos y ajustes) */
.menu .m-portada{display:flex;align-items:center;gap:6px;padding:6px 0;font-weight:700;color:var(--texto);font-size:15px;text-decoration:none;border-bottom:2px solid transparent}
.menu .m-portada svg{width:18px;height:18px;color:var(--verde)}
.menu .m-portada:hover{color:var(--verde);border-bottom-color:var(--verde)}
.portada-movil{display:none}
@media (max-width:760px){
  .portada-movil{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1.5px solid var(--borde);border-radius:999px;color:var(--verde-osc);margin-left:auto}
  .portada-movil svg{width:21px;height:21px}
  .portada-movil + .menu + .carrito{margin-left:8px}
}
/* ===== Pedido por correo: el formulario cambia de modo ===== */
.panel-datos:not(.modo-correo) .solo-correo{display:none!important}
.panel-datos.modo-correo .solo-wa{display:none!important}
.panel-datos .ayuda-c{font-size:12px;color:var(--gris)}
.btn.correo-env{background:var(--naranja);color:#fff;width:100%;box-shadow:0 3px 0 var(--naranja-osc)}
.btn.correo-env:hover{background:var(--naranja-osc)}
.btn.correo-env:disabled{opacity:.45;cursor:not-allowed}
.btn.correo-env svg{width:20px;height:20px}
.btn-correo{margin-top:10px;width:100%;padding:11px 16px;font-size:15px}
.btn-correo svg,.hoja-correo svg{width:19px;height:19px;flex:none}
.panel-datos .falta{margin:6px 0 0;font-size:12.5px;color:var(--naranja-osc);font-weight:700}
.panel-datos .falta:empty{display:none}
.panel-datos .err{margin:6px 0 0;color:var(--rojo);font-size:13px;font-weight:700}
.correo-ok{margin-top:10px;display:flex;gap:10px;align-items:flex-start;background:var(--verde-claro);border:1.5px solid #bfe0b8;border-radius:14px;padding:12px 14px;color:var(--verde-osc);font-size:14px;line-height:1.4}
.correo-ok svg{width:22px;height:22px;flex:none;margin-top:1px}
.correo-ok span{display:block;color:var(--texto);font-size:13px;margin-top:2px}
.hoja-correo{display:flex;align-items:center;gap:6px;justify-content:center;width:100%;border:0;background:none;color:var(--verde);font-weight:900;font-size:13.5px;padding:4px 8px 0;text-decoration:underline}

/* Mensaje de éxito del pedido por correo */
.exito-velo{position:fixed;inset:0;z-index:90;background:rgba(13,30,16,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.exito{position:relative;background:#fff;border-radius:20px;max-width:460px;width:100%;max-height:calc(100% - 32px);overflow:auto;padding:24px 20px 18px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25);animation:exito-in .25s ease}
@keyframes exito-in{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.exito-ico{width:64px;height:64px;border-radius:50%;background:var(--verde);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 0 0 8px var(--verde-claro)}
.exito-ico svg{width:34px;height:34px}
.exito h2{margin:14px 0 6px;font-family:var(--titulo);font-style:italic;font-weight:800;font-size:30px;color:var(--verde-osc)}
.exito p{margin:0;font-size:14.5px;line-height:1.45;color:var(--texto)}
.exito-lista{margin:14px 0 10px;text-align:left;border:1px solid var(--borde);border-radius:14px;padding:4px 12px;background:var(--fondo-2)}
.ex-l{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--borde);font-size:14px}
.ex-l small{display:block;color:var(--gris);font-size:12px}
.ex-l span{font-family:var(--num);font-weight:700;white-space:nowrap}
.ex-tot{display:flex;justify-content:space-between;align-items:center;padding:10px 0 8px;font-weight:700;font-size:14px}
.ex-tot b{font-family:var(--num);font-size:20px;color:var(--naranja)}
.exito .exito-nota{font-size:12.5px;color:var(--gris);margin-bottom:14px}
.exito .btn{width:100%}
.exito-x{margin-top:8px;border:0;background:none;color:var(--gris);font-weight:700;text-decoration:underline;padding:6px}

/* Botón "Solicitar pedido por correo": borde naranja (correo) para diferenciarlo de WhatsApp (verde) */
#btn-correo{border-color:var(--naranja);color:var(--naranja-osc)}
#btn-correo:hover{background:#fff4e0}

/* ===== Formulario compacto en celular: se ve completo sin tanto desplazamiento ===== */
@media (max-width:760px){
  /* Hoja "Comprar por WhatsApp", paso de datos */
  #hoja.paso2 .hoja{max-height:96%}
  #hoja.paso2 .hoja-cab{grid-template-columns:48px minmax(0,1fr) auto;gap:10px;padding:8px 16px}
  #hoja.paso2 .hoja-cab img{width:48px;height:48px;border-radius:10px}
  #hoja.paso2 .hoja-cab h2{font-size:14.5px}
  #hoja.paso2 .hoja-cab .pr{font-size:18px}
  #hoja-datos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 10px;padding-top:8px;padding-bottom:8px;align-content:start}
  #hoja-datos > *{grid-column:1/-1}
  #hoja-datos > .campo.medio{grid-column:auto}
  #hoja-datos .hoja-volver{font-size:13px}
  #hoja-datos .resumen-mini{padding:7px 10px;font-size:12px;line-height:1.35}
  #hoja-datos .ayuda-c{display:none}
  #hoja.paso2 .hoja-pie{gap:5px;padding-top:8px}
  #hoja.paso2 .hoja-tot b{font-size:19px}
  #hoja.paso2 #hoja-ok{padding:12px 16px}
  #hoja.paso2 .confirma{font-size:12px;margin:0}
  #hoja.paso2 .hoja-correo{font-size:12.5px;padding-top:0}
  /* Campos más compactos (hoja y "Mi pedido") */
  #hoja-datos .campo,.panel-datos .campo{gap:3px}
  #hoja-datos .campo label,.panel-datos .campo label{font-size:13px}
  #hoja-datos .campo input,#hoja-datos .campo select,.panel-datos .campo input,.panel-datos .campo select{height:42px;font-size:16px;padding:0 10px}
  #hoja-datos .tel span,.panel-datos .tel span{padding:0 9px;font-size:15px}
  #hoja-datos .campo textarea,.panel-datos .campo textarea{min-height:54px;height:54px;font-size:16px;padding:8px 10px}
  #hoja-datos .legal,.panel-datos .legal{font-size:10.5px;line-height:1.35}
  /* "Mi pedido": celular y distrito lado a lado */
  .panel-datos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
  .panel-datos > *{grid-column:1/-1}
  .panel-datos > .campo.medio{grid-column:auto}
  .panel-datos > [hidden]{display:none}
  .panel-datos .ayuda-c{font-size:11px;line-height:1.3}
}

/* Foto opcional de la planta a cotizar */
.otra-foto .foto-drop{display:flex;align-items:center;gap:12px;padding:12px 14px;border:2px dashed #e7b77a;border-radius:12px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.otra-foto .foto-drop:hover,.otra-foto .foto-drop:focus-within{border-color:var(--naranja);background:#fffaf3}
.otra-foto .foto-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.otra-foto .foto-drop[hidden]{display:none}
.otra-foto .fd-ico{flex:none;width:40px;height:40px;border-radius:10px;background:#fff1df;color:var(--naranja-osc);display:flex;align-items:center;justify-content:center}
.otra-foto .fd-ico svg{width:22px;height:22px}
.otra-foto .fd-txt{display:flex;flex-direction:column;gap:2px;font-size:14px;color:var(--naranja-osc)}
.otra-foto .fd-txt small{font-size:12.5px;color:var(--gris);font-weight:400}
.otra-foto .foto-prev{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--borde);border-radius:12px;background:#fff}
.otra-foto .foto-prev[hidden]{display:none}
.otra-foto .foto-prev img{width:64px;height:64px;object-fit:cover;border-radius:9px;background:#f3f5f1}
.otra-foto .fp-est{flex:1;font-size:13.5px;font-weight:700;color:var(--gris)}
.otra-foto .fp-est.ok{color:var(--verde)}
.otra-foto .fp-est.cargando{color:var(--naranja-osc)}
.otra-foto .fp-quitar{border:0;background:none;color:var(--gris);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer;padding:6px}
.otra-form .btn:disabled{opacity:.55;cursor:wait}

/* Detalle de la planta a cotizar: caja amplia que crece al escribir */
.otra-form #otra-d{width:100%;min-height:84px;max-height:220px;padding:10px 12px;line-height:1.45;font:inherit;font-size:16px;resize:vertical;border:1px solid var(--borde);border-radius:10px;background:#fff;box-sizing:border-box}
.otra-form #otra-d:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(31,122,46,.15)}
.otra-form .otra-cuenta{display:block;text-align:right;font-size:11.5px;color:var(--gris);margin-top:3px}

/* Sello "OFERTA" en la pestaña Por mayor */
.tab[data-modo="mayor"]{position:relative;overflow:visible}
.sello-oferta{position:absolute;top:-22px;right:-6px;width:60px;height:60px;transform:rotate(12deg);filter:drop-shadow(0 2px 3px rgba(150,0,20,.3));pointer-events:none;animation:sello-latido 2.4s ease-in-out infinite}
.sello-oferta svg{display:block;width:100%;height:100%}
@keyframes sello-latido{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(12deg) scale(1.08)}}
@media (prefers-reduced-motion:reduce){.sello-oferta{animation:none}}
@media (max-width:520px){.sello-oferta{width:52px;height:52px;top:-20px;right:-4px}}

/* Botones de envío siempre activos; si falta un dato se marca en rojo */
#enviar:disabled,#enviar-correo:disabled{opacity:1}
.campo .invalido{border-color:var(--rojo)!important;background:#fff6f5}
.tel:has(.invalido) span{border-color:var(--rojo)}
.campo .invalido:focus{box-shadow:0 0 0 3px rgba(179,38,30,.18)!important}
.panel-datos .falta,.falta-hoja{margin:8px 0 0;padding:8px 10px;border-radius:10px;background:#fdecea;color:var(--rojo);font-size:13px;font-weight:700;line-height:1.35}
.panel-datos .falta:empty,.falta-hoja:empty{display:none}
.falta-hoja{margin:0 0 8px}
@keyframes sacudir{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.sacudir{animation:sacudir .4s ease}
@media (prefers-reduced-motion:reduce){.sacudir{animation:none}}

/* ===== Pie de página (editable en Panel → Pie de página) ===== */
.pie-clientes{background:#f3f5ef;padding:26px 0 30px;margin-top:28px;text-align:center}
.pie-clientes h2{margin:0 0 14px;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#33433a}
.pie-logos{background:#fff;border:1px solid #dfe6da;border-radius:18px;padding:14px;max-width:980px;margin:0 auto;box-shadow:0 2px 10px rgba(13,77,22,.05)}
.pie-logos-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.pie-logo-c{display:flex;align-items:center;justify-content:center;height:62px;border:1px solid #e3e8df;border-radius:12px;background:#fff;padding:8px 12px}
.pie-logo-c img{max-width:100%;max-height:42px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.pie-logo-c:hover img,a.pie-logo-c:focus img{filter:none;opacity:1}
.pie-clientes p{max-width:360px;margin:16px auto 0;font-size:13px;color:#4c5b50;line-height:1.5}
.pie-clientes + .pie{margin-top:0}
.pie{background:var(--verde-osc);color:#e3eee3;font-size:14px;margin-top:28px}
.pie .envoltura{padding-block:30px 0}
.pie-fila{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 28px;padding-bottom:28px}
.pie-fila2{border-top:1px solid rgba(255,255,255,.12);padding-top:22px}
.pie h3{margin:0 0 12px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#f2b33d}
.pie-marca p{margin:12px 0 0;line-height:1.5;color:#d4e3d4;max-width:250px}
.pie-lista,.pie-enlaces{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pie-lista li{display:flex;align-items:flex-start;gap:9px;line-height:1.35}
.pie-i{width:16px;height:16px;flex:none;margin-top:1px;color:#f2b33d}
.pie a{color:#fff;text-decoration:none}
.pie a:hover,.pie a:focus-visible{text-decoration:underline;text-underline-offset:3px}
.pie-enlaces{gap:7px}
.pie-redes{display:flex;flex-wrap:wrap;gap:8px}
.pie-redes a{border:1.5px solid rgba(242,179,61,.55);border-radius:999px;padding:6px 14px;font-weight:900;font-size:13px}
.pie-redes a:hover{background:rgba(242,179,61,.15);text-decoration:none}
.pie-reclamos{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:10px 14px;max-width:240px;color:#1f3f8f!important}
.pie-reclamos:hover{text-decoration:none!important;box-shadow:0 0 0 3px rgba(242,179,61,.5)}
.pie-reclamos svg{width:26px;height:26px;flex:none;color:#1f3f8f}
.pie-reclamos b{display:block;font-size:13.5px;color:#1f3f8f}
.pie-reclamos small{display:block;font-size:11.5px;color:#5a6476}
.pie-copy{margin:0;border-top:1px solid rgba(255,255,255,.12);padding:16px 0 18px;text-align:center;font-size:12.5px;font-style:italic;color:#c7d8c7}
@media (max-width:900px){ .pie-fila{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){
  .pie-fila{grid-template-columns:1fr 1fr;gap:22px 18px}
  .pie-marca{grid-column:1/-1}
  .pie-fila > .pie-col:has(.pie-redes),.pie-fila2 > .pie-col:has(.pie-reclamos){grid-column:1/-1}
  .pie-logos-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie{font-size:13.5px}
}
body.en-producto .pie-copy,body.con-barra .pie-copy{padding-bottom:90px}

/* ===== Buscador de plantas ===== */
.busca{position:relative;flex:1;max-width:340px;margin-left:18px}
.busca-form{display:flex;align-items:center;gap:6px;height:44px;border:1.5px solid var(--borde);border-radius:999px;background:var(--fondo-2);padding:0 6px 0 14px;transition:border-color .15s,box-shadow .15s,background .15s}
.busca-form:focus-within{border-color:var(--verde);background:#fff;box-shadow:0 0 0 3px var(--verde-sel)}
.busca-lupa{display:flex;color:var(--gris)}
.busca-lupa svg{width:19px;height:19px}
.busca-form input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:15px;height:100%;padding:0}
.busca-form input::-webkit-search-cancel-button{display:none}
.busca-form input::placeholder{color:#8a978c}
.busca-borrar{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border:0;border-radius:50%;background:#e8ede5;color:var(--gris);cursor:pointer;flex:none}
.busca-borrar[hidden]{display:none}
.busca-borrar svg{width:14px;height:14px}
.busca-cerrar{display:none}
.busca-btn{display:none}
.busca + .busca-btn + .menu,.busca + .busca-btn + .portada-movil + .menu{margin-left:auto}
.busca-res{position:absolute;top:calc(100% + 8px);left:0;width:min(440px,92vw);max-height:min(70vh,560px);overflow-y:auto;background:#fff;border:1px solid var(--borde);border-radius:16px;box-shadow:0 18px 40px rgba(13,77,22,.18);padding:8px;z-index:70}
.busca-res[hidden]{display:none}
.br-sec{display:flex;justify-content:space-between;align-items:center;padding:10px 10px 6px;font-size:12px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.06em}
.br-limpiar{border:0;background:none;color:var(--verde);font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;cursor:pointer;padding:0}
.br-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 6px}
.br-chip{border:1.5px solid var(--borde);background:#fff;border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:700;color:var(--texto);cursor:pointer}
.br-chip:hover{border-color:var(--verde);color:var(--verde)}
.br-chip.cat em{font-style:normal;color:var(--gris);font-weight:400;margin-left:2px}
.br-op{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;padding:8px 10px;border-radius:12px;cursor:pointer;color:var(--texto)}
.br-op:hover,.br-op.on{background:var(--verde-claro)}
.br-planta img{width:48px;height:48px;object-fit:contain;border-radius:10px;background:var(--fondo-2);flex:none}
.br-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.br-t b{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-t b em{font-style:normal;font-weight:400;color:var(--gris);font-size:13.5px}
.br-t small{font-size:12.5px;color:var(--gris);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.br-t mark,.br-t b mark{background:none;color:var(--verde);font-weight:900;padding:0}
.br-p{display:flex;flex-direction:column;align-items:flex-end;font-size:11.5px;color:var(--gris);line-height:1.2;flex:none}
.br-p b{font-family:var(--num);font-size:15px;color:var(--naranja);font-weight:700}
.br-ico{width:48px;height:48px;border-radius:10px;background:var(--verde-claro);color:var(--verde);display:flex;align-items:center;justify-content:center;flex:none}
.br-ico svg{width:24px;height:24px}
.br-flecha{margin-left:auto;font-size:22px;line-height:1;color:var(--verde);font-weight:700}
.br-todos{justify-content:center;font-weight:900;color:var(--verde);border-top:1px solid var(--borde);border-radius:0 0 10px 10px;margin-top:6px;padding:12px}
.br-todos .br-flecha{margin-left:4px}
.br-vacio{display:flex;flex-direction:column;gap:6px;padding:14px 12px;margin:2px 2px 6px;background:#fff7ec;border:1.5px dashed #f3c98e;border-radius:14px}
.br-vacio b{font-size:15px}
.br-vacio span{font-size:13.5px;color:var(--gris)}
.br-cotizar{margin-top:4px;background:var(--naranja);color:#fff;font-weight:900;justify-content:center;padding:11px 14px}
.br-cotizar:hover,.br-cotizar.on{background:var(--naranja-osc)}
.br-cotizar .br-flecha{color:#fff;margin-left:6px}
/* Aviso de búsqueda sobre la grilla */
.busca-aviso{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;margin:-4px 0 14px;padding:10px 14px;border-radius:12px;background:var(--verde-claro);font-size:15px;scroll-margin-top:90px}
.busca-aviso[hidden]{display:none}
.br-quitar{border:1.5px solid var(--verde);background:#fff;color:var(--verde);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13.5px;cursor:pointer}
.busca-aviso:has(.busca-cero){background:none;padding:0}
.busca-cero{width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 18px;border:2px dashed #f3c98e;background:#fff7ec;border-radius:18px}
.busca-cero b{font-size:18px}
.busca-cero span{color:var(--gris);max-width:440px}
.busca-cero-acc{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}

/* Pantallas medianas y celular: lupa en la cabecera y buscador a pantalla completa */
@media (max-width:1000px){
  .busca{display:none}
  .busca-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border:1.5px solid var(--borde);border-radius:999px;background:var(--fondo);color:var(--verde-osc);margin-left:auto;cursor:pointer;flex:none}
  .busca-btn svg{width:20px;height:20px}
  .busca + .busca-btn + .menu,.busca + .busca-btn + .portada-movil + .menu{margin-left:16px}
  body.busca-on{overflow:hidden}
  body.busca-on .busca{display:block;position:fixed;inset:0;z-index:90;max-width:none;margin:0;background:rgba(13,30,16,.45);padding:max(10px,env(safe-area-inset-top,0px)) 0 0}
  body.busca-on .busca-form{margin:0 12px;height:50px;background:#fff;border-color:var(--verde);box-shadow:0 6px 20px rgba(0,0,0,.18);padding-right:4px}
  body.busca-on .busca-form input{font-size:16px}
  body.busca-on .busca-cerrar{display:block;border:0;background:none;color:var(--verde);font-weight:900;font-size:14px;padding:0 10px;cursor:pointer}
  body.busca-on .busca-res{position:static;width:auto;max-height:calc(100dvh - 90px);margin:10px 12px 0;border-radius:16px}
}
@media (max-width:760px){
  .busca-btn{margin-left:auto}
  .busca-btn + .portada-movil{margin-left:8px}
  .busca-btn + .portada-movil + .menu + .carrito,.busca-btn + .menu + .carrito{margin-left:8px}
  .br-p b{font-size:14px}
}
@media (max-width:760px){ .portada-movil,.carrito{flex:none} }

/* Menú: un solo botón "Vivero", siempre marcado (estamos en esta sección) */
.menu #m-cat{display:flex;align-items:center;gap:7px}
.menu #m-cat svg{width:18px;height:18px}
.menu #m-cat.on{color:var(--verde);border-bottom-color:var(--verde)}
a.logo{color:inherit}

/* Cabecera: el buscador ocupa el espacio libre (PC) y "Vivero" aparece como ícono en celular */
.busca{max-width:none;margin-left:22px}
.busca + .busca-btn + .vivero-movil + .menu{margin-left:24px}
.vivero-movil{display:none}
@media (max-width:1000px){
  .busca + .busca-btn + .vivero-movil + .menu{margin-left:16px}
}
@media (max-width:760px){
  .cab .envoltura{gap:8px}
  .busca-btn{margin-left:auto}
  .vivero-movil{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:42px;min-width:50px;padding:0 6px;border:1.5px solid var(--verde);border-radius:14px;background:var(--verde-claro);color:var(--verde-osc);font-weight:900;font-size:10.5px;line-height:1;flex:none;cursor:pointer}
  .vivero-movil svg{width:18px;height:18px;color:var(--verde)}
  .vivero-movil + .menu + .carrito{margin-left:0}
}

/* Etiqueta "Más pedida" (las 3 más pedidas) */
.prod .foto{position:relative}
.top-b{position:absolute;top:10px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:4px;background:var(--naranja);color:#fff;font-size:12px;font-weight:900;padding:4px 10px 4px 8px;border-radius:999px;box-shadow:0 2px 6px rgba(178,94,0,.3)}
.top-b svg{width:13px;height:13px;color:var(--amarillo)}
/* Paginación del catálogo */
.paginas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:22px 0 6px}
.paginas[hidden]{display:none}
.pg-nums{display:flex;align-items:center;gap:6px}
.pg-num,.pg-flecha{min-width:42px;height:42px;border:1.5px solid var(--borde);background:#fff;border-radius:12px;font-weight:900;font-size:15px;color:var(--texto);cursor:pointer;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.pg-num:hover,.pg-flecha:hover:not(:disabled){border-color:var(--verde);color:var(--verde)}
.pg-num.on{background:var(--verde);border-color:var(--verde);color:#fff}
.pg-flecha{font-size:15px;color:var(--verde-osc)}
.pg-flecha:disabled{opacity:.4;cursor:default}
.pg-puntos{color:var(--gris);font-weight:900;padding:0 2px}
.pg-txt{width:100%;text-align:center;margin:4px 0 0;font-size:13px;color:var(--gris)}
@media (max-width:520px){ .pg-flecha span{display:none} .pg-num,.pg-flecha{min-width:40px;height:40px;padding:0 10px} .paginas{gap:6px} }

/* Sugerencia "te conviene por mayor": mismo rojo del sello OFERTA (Mi pedido y ficha) */
.sug-mayor{--oferta:#f2203f;--oferta-osc:#c8102e;display:flex;gap:12px;align-items:flex-start;margin:-4px 0 12px;padding:12px 14px;border:1.5px solid #f7b3bd;background:#fff2f4;border-radius:14px;animation:sm-entra .25s ease}
#sug-ficha .sug-mayor{margin:0}
@keyframes sm-entra{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sug-mayor{animation:none}}
.sm-ico{flex:none;width:40px;height:40px;display:flex;filter:drop-shadow(0 2px 3px rgba(150,0,20,.25))}
.sm-ico svg{width:100%;height:100%}
.sm-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sm-t{font-size:15px;color:var(--oferta-osc);line-height:1.3}
.sm-t b{color:var(--oferta-osc)}
.sm-comp{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--gris)}
.sm-comp s{color:var(--gris)}
.sm-nuevo{color:var(--texto);font-weight:700}
.sm-nuevo b{color:var(--oferta-osc)}
.sm-acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:2px}
.btn.sm-si{background:var(--oferta);color:#fff;padding:9px 16px;font-size:14px;box-shadow:0 3px 10px rgba(242,32,63,.25)}
.btn.sm-si:hover,.btn.sm-si:focus-visible{background:var(--oferta-osc);color:#fff}
.sm-no{border:0;background:none;color:var(--gris);text-decoration:underline;font:inherit;font-size:13px;cursor:pointer;padding:4px 0}
@media (max-width:520px){ .sug-mayor{padding:12px} .sm-ico{width:34px;height:34px} .btn.sm-si{width:100%} }

/* "Por mayor" seleccionado: mismo rojo del sello OFERTA (pestaña, campo y tramo activo) */
.tab[data-modo="mayor"][aria-selected="true"]{border-color:#f2203f;background:#fff2f4;color:#c8102e;box-shadow:inset 0 0 0 1px #f2203f}
.tab[data-modo="mayor"][aria-selected="true"] small{color:#c8102e}
.tab[data-modo="mayor"]:hover{border-color:#f7a3ae}
#op-mayor .campo input{border-color:#f7b3bd}
#op-mayor .campo input:focus{border-color:#f2203f;box-shadow:0 0 0 3px rgba(242,32,63,.15)}
#op-mayor .tramos tr.on td{background:#fff2f4;color:#c8102e}
#op-mayor .tramos tr.on td:first-child{box-shadow:inset 3px 0 0 #f2203f}
#op-mayor .tramos tr.on td:last-child{color:#f2203f}
#op-mayor .aviso{background:#fff2f4;color:#c8102e}

/* Sugerencia "te conviene otro pack": amarillo de las etiquetas "Ahorras" */
.sug-pack{display:flex;gap:12px;align-items:flex-start;margin:-4px 0 12px;padding:12px 14px;border:1.5px solid #f5cf6b;background:#fff9e6;border-radius:14px;animation:sm-entra .25s ease}
#sug-ficha .sug-pack{margin:0}
@media (prefers-reduced-motion:reduce){.sug-pack{animation:none}}
.sp-ico{flex:none;width:36px;height:36px;border-radius:50%;background:var(--amarillo);color:#8a5a00;display:flex;align-items:center;justify-content:center}
.sp-ico svg{width:19px;height:19px}
.sp-t{font-size:15px;color:#7a4a00;line-height:1.3}
.sp-t b{color:var(--naranja-osc)}
.sp-nuevo{color:var(--texto);font-weight:700}
.sp-nuevo b{color:var(--naranja)}
.btn.sp-si{background:var(--naranja);color:#fff;padding:9px 16px;font-size:14px}
.btn.sp-si:hover,.btn.sp-si:focus-visible{background:var(--naranja-osc);color:#fff}
@media (max-width:520px){ .sug-pack{padding:12px} .sp-ico{width:30px;height:30px} .btn.sp-si{width:100%} }

/* Nombre del pack sugerido, resaltado como las etiquetas de los paquetes */
.sp-pack{display:inline-block;background:var(--amarillo);color:#5c3a00;font-weight:900;padding:1px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 0 rgba(178,94,0,.25)}
.sp-nuevo b,.sm-nuevo b,.sm-comp s{white-space:nowrap}

/* "Súmale a tu compra" (venta cruzada) en Mi pedido */
.sumale{margin:14px 0 4px;border-top:1px solid var(--borde);padding-top:14px}
.sumale[hidden]{display:none}
.sumale-t{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-bottom:8px}
.sumale-op{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1.5px solid var(--borde);border-radius:12px;margin-bottom:8px;cursor:pointer;background:#fff;transition:border-color .15s,background .15s}
.sumale-op:hover{border-color:var(--verde)}
.sumale-op.on{border-color:var(--verde);background:var(--verde-claro)}
.sumale-op input{width:20px;height:20px;flex:none;accent-color:var(--verde);margin:0}
.sumale-op img{width:44px;height:44px;object-fit:cover;border-radius:10px;flex:none;background:var(--fondo-2)}
.su-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.su-txt b{font-size:14.5px;font-weight:900}
.su-txt small{font-size:12.5px;color:var(--gris)}
.su-dto{font-style:normal;font-size:11px;font-weight:900;color:#fff;background:#f2203f;border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:1px}
.su-pr{display:flex;flex-direction:column;align-items:flex-end;flex:none;line-height:1.2}
.su-pr s{font-size:12px;color:var(--gris)}
.su-pr b{font-family:var(--num);font-size:15px;color:var(--naranja);white-space:nowrap}

/* Categorías en la ficha: la principal en verde lleno, las demás con borde; llevan a su categoría */
.cats-ficha{display:flex;flex-wrap:wrap;gap:6px;align-self:flex-start}
.cat-chip{display:inline-flex;align-items:center;font-size:12px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:4px 10px;text-decoration:none;border:1.5px solid var(--verde);color:var(--verde);background:#fff;transition:background .15s,color .15s}
.cat-chip:hover,.cat-chip:focus-visible{background:var(--verde-claro);color:var(--verde-osc)}
.cat-chip.pri{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff}
.cat-chip.pri:hover,.cat-chip.pri:focus-visible{background:var(--verde);color:#fff}
@media (max-width:859px){ .compra > .cats-ficha{order:3;margin-top:6px} }
/* Botones de categoría del catálogo (ahora son enlaces) */
a.chip{text-decoration:none;display:inline-flex;align-items:center}
/* Encabezado de la categoría elegida, sobre la grilla */
.cat-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;margin:-4px 0 14px;padding:14px 16px;border-radius:14px;background:var(--verde-claro);scroll-margin-top:90px}
.cat-cab[hidden]{display:none}
.cc-txt h2{margin:0;font-family:var(--titulo);font-style:italic;font-weight:800;font-size:24px;line-height:1.1;color:var(--verde-osc)}
.cc-n{font-family:var(--cuerpo);font-style:normal;font-weight:700;font-size:14px;color:var(--gris);margin-left:6px}
.cc-txt p{margin:6px 0 0;font-size:14.5px;color:var(--texto);max-width:70ch}
.cc-todas{flex:none;border:1.5px solid var(--verde);background:#fff;color:var(--verde);border-radius:999px;padding:7px 14px;font-weight:700;font-size:13.5px;text-decoration:none}
.cc-todas:hover{background:var(--verde);color:#fff}
#nuestras{scroll-margin-top:80px}

/* Súmale: instalación con garantía (por cotizar) — tono dorado de "sello de garantía" */
.sumale-op.su-gar{position:relative;align-items:flex-start;border:2px solid #f2c14e;background:linear-gradient(135deg,#fffbea 0%,#fff 70%);box-shadow:0 2px 10px rgba(228,155,31,.12)}
.sumale-op.su-gar:hover{border-color:#e9a52a}
.sumale-op.su-gar.on{border-color:#e49b1f;background:linear-gradient(135deg,#fff3c9 0%,#fffaf0 75%);box-shadow:0 4px 16px rgba(228,155,31,.25)}
.sumale-op.su-gar input{margin-top:20px;accent-color:#d68f17}
.su-ico{flex:none;width:58px;height:58px;filter:drop-shadow(0 2px 3px rgba(150,90,0,.25))}
.su-ico svg{width:100%;height:100%;display:block}
.su-gar.on .su-ico{animation:sello-in .45s ease-out}
@keyframes sello-in{0%{transform:scale(.7) rotate(-12deg)}70%{transform:scale(1.08) rotate(3deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.su-gar.on .su-ico{animation:none}}
.su-sello{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#5a3a00;background:linear-gradient(180deg,#ffe17a,#f2b233);border:1px solid #d68f17;border-radius:6px;padding:2px 8px 2px 5px;margin-bottom:4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.su-sello svg{width:13px;height:13px;color:#4f9a2f}
.su-sello svg path:last-child{stroke:#ffe48a}
.su-inc{list-style:none;margin:5px 0 2px;padding:0;font-size:13px;color:var(--texto)}
.su-inc li{padding-left:18px;position:relative}
.su-inc li::before{content:"✓";position:absolute;left:2px;color:#4f9a2f;font-weight:900}
.su-rep{font-size:13px;color:var(--texto);margin-top:4px;background:#fff6d6;border-radius:8px;padding:4px 8px;align-self:flex-start}
.su-rep b{color:#7a4b00}
.su-ref{font-size:13px;margin-top:6px;color:var(--texto)}
.su-ref b{font-family:var(--num);color:#7a4b00}
.su-ref small{display:block;font-size:12px;color:var(--gris)}
.su-cot{flex:none;align-self:flex-start;font-size:12.5px;font-weight:900;color:#5a3a00;background:linear-gradient(180deg,#ffe17a,#f2b233);border:1px solid #d68f17;border-radius:999px;padding:3px 10px;white-space:nowrap}
.gar-tot{color:#b87400!important;font-weight:700}
@media (max-width:480px){ .sumale-op.su-gar{gap:9px;padding-top:12px} .su-ico{width:46px;height:46px} .sumale-op.su-gar input{margin-top:14px} .sumale-op.su-gar > .su-cot,.sumale-op.su-gar > .su-gtot{position:absolute;top:10px;right:10px} }
.su-filas{display:flex;flex-direction:column;margin-top:6px;background:#fff6d6;border-radius:10px;padding:2px 10px}
.su-fila{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0;border-top:1px dashed #ecd28e}
.su-fila:first-child{border-top:0}
.su-fila b{color:#7a4b00;white-space:nowrap}
.su-fila small{display:block;font-size:12px;color:var(--gris)}
.su-fila .su-cot{font-style:normal;font-size:11.5px;padding:2px 8px}
.su-gpr{font-family:var(--num);white-space:nowrap;color:#7a4b00}
.su-gtot b{color:#b87400!important}
.su-gtot small{font-size:11.5px;color:#7a4b00;white-space:nowrap}
.su-teaser{font-size:13px;color:var(--texto);margin-top:5px;line-height:1.45}
.su-teaser b{color:#7a4b00;white-space:nowrap}
.su-teaser u{display:block;font-size:12px;color:#b87400;font-weight:700;margin-top:2px}
.su-gar.on .su-inc,.su-gar.on .su-filas{animation:gar-abre .3s ease-out}
@keyframes gar-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.su-gar.on .su-inc,.su-gar.on .su-filas{animation:none}}
/* Por mayor en Mi pedido: cantidad editable */
.stepper.st-may input{width:62px;height:32px;border:0;text-align:center;font-family:var(--num);font-weight:700;font-size:16px;background:#fff;-moz-appearance:textfield;padding:0}
.stepper.st-may input::-webkit-inner-spin-button,.stepper.st-may input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper.st-may input:focus{outline:2px solid var(--verde);outline-offset:-2px}
/* Sugerencia "siguiente pack" (más barato por planta) */
.sp-dto{font-style:normal;font-size:11.5px;font-weight:900;color:#fff;background:#e08a00;border-radius:999px;padding:1px 7px;margin-left:4px;vertical-align:1px;white-space:nowrap}
.sp-dif{font-size:13px;color:#7a4a00}
.sp-dif b{color:#7a4a00}
.su-meses{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:7px;background:#4f9a2f;color:#fff;font-weight:900;font-size:13px;border-radius:9px;padding:5px 10px}
.su-meses svg{width:15px;height:15px;color:#fff}
.su-meses svg path:last-child{stroke:#4f9a2f}
.su-ftot{border-top:1.5px solid #e9c66a!important}
.su-ftot b:first-child{color:var(--texto)}