[hidden]{display:none!important}
:root{
  /* ---- Color con un trabajo asignado ------------------------------------------
     Quién decide acá: un comprador institucional o de empresa que va a comprometer
     presupuesto ajeno y que muchas veces tiene que justificar la compra ante otro. Lo que
     necesita del sitio no es entusiasmo, es respaldo. Por eso el color no decora: cada
     uno tiene un trabajo y no se usa fuera de él.

       --green     Confianza y pertenencia institucional. Es el color de la marca y el de
                   las acciones que comprometen (buscar, agregar, cotizar). Profundo, no
                   brillante: el verde saturado lee "oferta", el profundo lee "empresa".
       --gold      Atención puntual. Solo donde hay que mirar ahora. Si se usa en más de
                   un elemento por pantalla deja de funcionar.
       --registro  Marca técnica: códigos, medidas, avisos de taller. Nunca decorativo.
       --fam       Orientación: en qué familia estoy. No jerarquía, no acción.
       --paper     Fondo cálido y de baja saturación a propósito: el producto es casi
                   siempre navy o negro sobre blanco, y un fondo saturado le compite.

     Lo que NO se usa: rojo de urgencia, contadores, ni acentos de descuento. Nada de eso
     corresponde a una compra que se decide en comité. */
  --paper:#faf8f4;
  --paper-2:#efece5;
  --white:#fff;
  --ink:#101418;              /* negro de imprenta: no es negro puro ni verde apagado */
  --ink-2:#262b31;
  --green:#0d4d3a;            /* más profundo: aguanta texto blanco con holgura */
  --green-2:#17745a;
  --green-soft:#d8e9e0;
  --green-pale:#eaf4ef;
  --gold:#c08a2e;             /* ámbar con presencia, no el beige de antes */
  --gold-soft:#f4e6c8;
  --muted:#6d7772;
  --muted-2:#8d9692;
  --line:rgba(20,23,26,.13);
  --line-strong:rgba(20,23,26,.22);
  --danger:#a8493d;
  --shadow:0 24px 70px rgba(13,32,25,.10);
  --shadow-soft:0 12px 36px rgba(13,32,25,.07);
  --radius:26px;
  --radius-sm:18px;
  --shell:min(1240px,calc(100% - 44px));
  /* Una sola familia, con el contraste hecho por peso y ancho de letra, no por mezclar dos.
     Archivo tiene el carácter técnico que pide un catálogo de marcaje. */
  --sans:"Instrument Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --serif:var(--display);
  /* Rojo de registro: marca técnica (códigos, área de marcaje). Nunca decorativo. */
  --registro:#c8452d;
  --registro-suave:rgba(200,69,45,.5);

  /* Curvas y tiempos: una sola familia de movimiento en toda la página. */
  --ease:cubic-bezier(.22,.72,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:.18s;
  --dur-2:.32s;
  --dur-3:.6s;

  /* Elevación en escala: cada nivel dice a qué distancia está la superficie. */
  --elev-1:0 1px 2px rgba(13,32,25,.04),0 4px 12px rgba(13,32,25,.035);
  --elev-2:0 2px 6px rgba(13,32,25,.05),0 18px 40px rgba(13,32,25,.09);
  --elev-3:0 30px 80px rgba(13,32,25,.16);
  --ring:0 0 0 3px rgba(21,93,71,.16);
  --gold-ink:#8a6a32;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select{font:inherit}
button,a{tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.shell{width:var(--shell);margin-inline:auto}
.announcement{background:var(--ink);color:#e8efe9;font-size:12px;letter-spacing:.01em;padding-inline:20px}
.announcement__inner{height:34px;display:flex;align-items:center;justify-content:center;gap:10px}
.announcement__dot{width:3px;height:3px;border-radius:50%;background:#6d9e8d}
.site-header{position:sticky;top:0;z-index:50;background:rgba(246,244,238,.88);backdrop-filter:blur(18px);border-bottom:1px solid transparent;transition:var(--dur-1) ease}
.site-header.is-scrolled{border-color:var(--line);box-shadow:0 5px 18px rgba(13,32,25,.035)}
.nav{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{height:60px;width:auto;object-fit:contain}
.nav__links{display:flex;align-items:center;justify-content:center;gap:30px;font-size:13px;font-weight:700;color:#425049}
.nav__links a{position:relative;padding:12px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:1px;background:var(--green);transition:right var(--dur-1)}
.nav__links a:hover::after{right:0}
.nav__actions{display:flex;align-items:center;gap:8px}
.nav-icon{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.58);display:grid;place-items:center;position:relative;color:var(--ink)}
.nav-icon svg{font-size:18px}
.nav-icon span{position:absolute;right:-2px;top:-3px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--green);color:#fff;font-size:9px;font-weight:800;display:grid;place-items:center}
.cart-button{height:44px;border:0;background:var(--ink);color:#fff;border-radius:999px;padding:0 14px 0 17px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800}
.cart-button svg{font-size:16px}
.cart-button b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:#fff;color:var(--ink);font-size:10px}
.hero{position:relative;padding:72px 0 86px;overflow:hidden}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(470px,.98fr);gap:70px;align-items:center;position:relative;z-index:1}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.eyebrow::before,.kicker::before{content:"";width:24px;height:1px;background:currentColor}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(58px,6vw,86px);line-height:.98;letter-spacing:-.042em;margin:18px 0 24px;max-width:760px}
.hero h1 em,.catalog-intro h2 em{font-weight:400;color:var(--green);font-style:italic}
.hero__lead{font-size:17px;line-height:1.72;color:#5c6761;max-width:680px;margin:0 0 27px}
.hero-search{height:66px;background:#fff;border:1px solid rgba(11,26,21,.09);border-radius:20px;padding:7px 7px 7px 20px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;box-shadow:var(--shadow-soft);max-width:720px}
.hero-search svg{font-size:22px;color:var(--green)}
.hero-search input{border:0;outline:0;background:transparent;min-width:0;color:var(--ink);font-size:14px}
.hero-search input::placeholder{color:#8c9691}
.hero-search button{height:50px;border:0;background:var(--green);color:#fff;border-radius:14px;padding:0 23px;font-size:12px;font-weight:800}
.quick-intents{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}
.quick-intents button{border:1px solid var(--line);background:rgba(255,255,255,.42);border-radius:999px;padding:8px 11px;font-size:10px;color:#59635e;font-weight:700}
.quick-intents button:hover{background:#fff;color:var(--green)}
.hero__trust{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:26px;font-size:11px;color:#65706a;font-weight:700}
.hero__trust span{display:flex;align-items:center;gap:5px}
.hero__trust svg{font-size:13px;color:var(--green)}
.hero-stage{position:relative;min-height:590px}
.stage-card{position:absolute;background:#fff;border:1px solid rgba(11,26,21,.08);box-shadow:var(--shadow);overflow:hidden}
.stage-card--main{left:5%;top:34px;width:69%;height:465px;border-radius:34px;transform:rotate(-1.2deg)}
.stage-card--mini{width:38%;height:240px;border-radius:25px;right:0}
.stage-card--top{top:0;transform:rotate(3deg)}
.stage-card--bottom{top:268px;right:2%;transform:rotate(1.2deg)}
.stage-product{height:100%;width:100%;position:relative;display:flex;flex-direction:column;border:0;background:transparent;padding:0;text-align:left;color:inherit}
.stage-product__image{flex:1;min-height:0;background:linear-gradient(145deg,#f6f7f4,#ebece7);padding:18px;display:grid;place-items:center}
.stage-product__image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.stage-product__info{padding:15px 17px 16px;display:grid;gap:3px;background:#fff}
.stage-product__info small{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:var(--green);font-weight:800}
.stage-product__info b{font-size:13px;line-height:1.3;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.stage-product__price{font-family:var(--serif);font-size:20px;color:var(--ink)}
.stage-card--mini .stage-product__info{padding:10px 12px 12px}
.stage-card--mini .stage-product__price{font-size:16px}
.stage-card--mini .stage-product__info b{font-size:11px}
.stage-note{position:absolute;left:2%;bottom:8px;width:55%;padding:18px 20px;border:1px solid var(--line);border-radius:20px;background:rgba(246,244,238,.86);backdrop-filter:blur(12px);display:grid;gap:3px}
.stage-note span{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:15px}
.stage-note b{font-size:15px}
.stage-note small{font-size:10px;line-height:1.45;color:var(--muted)}
.business-section{padding:0 0 36px}
.business-panel{background:var(--ink);color:#fff;border-radius:34px;padding:35px;display:grid;grid-template-columns:310px 1fr;gap:34px;box-shadow:0 24px 70px rgba(11,26,21,.12)}
.business-panel__intro .kicker{color:#86b8a7}
.business-panel__intro h2{font-family:var(--serif);font-size:36px;font-weight:400;line-height:1.05;margin:10px 0 12px}
.business-panel__intro p{font-size:12px;line-height:1.65;color:#aebbb5;margin:0}
.business-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.business-card{min-height:96px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);color:#fff;border-radius:18px;text-align:left;padding:15px;display:flex;align-items:flex-start;gap:12px;transition:var(--dur-1) ease}
.business-card:hover,.business-card.is-active{background:#fff;color:var(--ink);transform:translateY(-2px)}
.business-card svg{font-size:21px;flex:0 0 auto;margin-top:2px}
.business-card span{display:grid;gap:4px}
.business-card b{font-size:12px}
.business-card small{font-size:9px;line-height:1.4;color:#91a39b}
.business-card:hover small,.business-card.is-active small{color:var(--muted)}
.section{padding:92px 0}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:32px}
.section-head h2{font-family:var(--serif);font-size:clamp(38px,4.2vw,58px);line-height:1.02;letter-spacing:-.025em;font-weight:400;max-width:820px;margin:12px 0 0}
.link-button{border:0;background:transparent;color:var(--green);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;padding:10px 0;white-space:nowrap}
.link-button svg,.btn svg{font-size:15px}
.editorial-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;grid-template-rows:repeat(2,300px);gap:14px}
.editorial-card{position:relative;border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--line);min-width:0;cursor:pointer}
.editorial-card:first-child{grid-row:1/3}
.editorial-card__image{position:absolute;inset:0;background:linear-gradient(145deg,#f1f2ee,#e8ebe5);padding:28px;display:grid;place-items:center}
.editorial-card__image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--dur-2) ease}
.editorial-card:hover img{transform:scale(1.035)}
/* El velo tiene que aguantar fotos claras: si no, el título blanco se pierde sobre el producto. */
.editorial-card__gradient{position:absolute;inset:26% 0 0;background:linear-gradient(to bottom,transparent 0%,rgba(6,17,13,.34) 42%,rgba(6,17,13,.76) 72%,rgba(6,17,13,.92) 100%)}
.editorial-card__content{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff;display:grid;gap:5px}
.editorial-card__content small{font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:#c7ddd4;font-weight:800}
.editorial-card__content b{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1.05}
.editorial-card:first-child .editorial-card__content b{font-size:33px}
.editorial-card__content span{font-size:11px;color:#dae5df}
.editorial-card__content strong{font-size:14px;margin-top:2px}
.season-section{padding:14px 0 68px}
.season-card{position:relative;min-height:515px;background:linear-gradient(120deg,#0e2a20,#174f3c);border-radius:38px;overflow:hidden;color:#fff;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;padding:60px;box-shadow:0 30px 80px rgba(12,39,30,.16)}
.season-card::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;right:-230px;top:-270px;border:1px solid rgba(255,255,255,.09)}
.season-card::after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;left:42%;bottom:-300px;background:radial-gradient(circle,rgba(255,255,255,.07),transparent 70%)}
.season-card__copy{position:relative;z-index:2;max-width:480px}
.season-card__eyebrow{display:block;color:#cfe4db;font-size:12px;letter-spacing:.02em;font-weight:600;text-transform:none}
.season-card h2{font-family:var(--serif);font-size:56px;font-weight:400;line-height:.98;margin:14px 0 20px}
.season-card p{font-size:13px;line-height:1.7;color:#c0d0c9;max-width:450px;margin:0 0 25px}
.btn{border-radius:14px;min-height:47px;padding:0 19px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:11px;font-weight:800;border:1px solid transparent}
.btn--light{background:#fff;color:var(--ink)}
.btn--primary{background:var(--green);color:#fff}
.btn--outline{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--whatsapp{background:#1a8f5a;color:#fff;border:0;width:100%}
.season-card__products{position:relative;z-index:2;height:330px;margin-left:20px}
.season-product{position:absolute;border:0;text-align:left;width:240px;height:310px;border-radius:28px;background:#fff;padding:16px;box-shadow:0 24px 50px rgba(0,0,0,.18);display:flex;flex-direction:column;cursor:pointer}
.season-product:nth-child(1){left:0;top:0;transform:rotate(-4deg)}
.season-product:nth-child(2){left:31%;top:18px;transform:rotate(3deg)}
.season-product:nth-child(3){left:60%;top:-4px;transform:rotate(7deg)}
.season-product img{width:100%;height:220px;object-fit:contain;mix-blend-mode:multiply}
.season-product small{color:var(--green);font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.season-product b{color:var(--ink);font-size:11px;line-height:1.3;margin:4px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.season-product strong{color:var(--ink);font-size:13px}
.season-tabs{position:absolute;left:60px;bottom:26px;z-index:3;display:flex;gap:4px}
.season-tabs button{border:1px solid rgba(255,255,255,.16);background:transparent;color:#9db5ab;border-radius:999px;padding:7px 11px;font-size:9px;font-weight:800}
.season-tabs button.is-active{background:#fff;color:var(--ink);border-color:#fff}
.opportunity-section{padding-top:34px}
.product-rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(240px,1fr);overflow-x:auto;gap:12px;padding:2px 2px 15px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c8cec9 transparent}
.product-rail .product-card{scroll-snap-align:start}
.category-section{background:var(--paper-2)}
.section-note{font-size:11px;color:var(--muted);font-weight:700}
.category-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.category-card{position:relative;min-height:235px;border-radius:24px;overflow:hidden;border:0;background:#dfe4dd;text-align:left;padding:0;color:#fff}
.category-card:nth-child(1),.category-card:nth-child(8){grid-column:span 2}
.category-card__image{position:absolute;inset:0;background:linear-gradient(145deg,#e5e6e0,#d9ddd6);display:grid;place-items:center;padding:14px}
.category-card__image img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-2) ease}
.category-card:hover img{transform:scale(1.04)}
.category-card__overlay{position:absolute;inset:24% 0 0;background:linear-gradient(to bottom,transparent 0%,rgba(6,17,13,.32) 44%,rgba(6,17,13,.74) 74%,rgba(6,17,13,.90) 100%)}
.category-card__copy{position:absolute;left:18px;right:18px;bottom:17px;display:grid;gap:4px}
.category-card__copy span{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#dce7e2;font-weight:800}
.category-card__copy b{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.05}
.catalog{background:var(--paper)}
.catalog-intro{max-width:830px;margin-bottom:35px}
.catalog-intro h2{font-family:var(--serif);font-size:clamp(48px,6vw,76px);font-weight:400;line-height:.98;letter-spacing:-.035em;margin:12px 0 20px}
.catalog-intro p{max-width:650px;color:var(--muted);line-height:1.7;font-size:13px}
.catalog-toolbar{position:sticky;top:78px;z-index:30;display:grid;grid-template-columns:1fr auto auto;gap:9px;background:rgba(246,244,238,.90);backdrop-filter:blur(16px);padding:12px 0;border-bottom:1px solid var(--line);margin-bottom:12px}
.catalog-search{height:52px;border:1px solid var(--line);background:#fff;border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 15px}
.catalog-search svg{font-size:18px;color:var(--green)}
.catalog-search input{width:100%;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink)}
.filter-trigger{height:52px;min-width:110px;border:1px solid var(--line);background:#fff;border-radius:14px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:11px;font-weight:800;color:var(--ink)}
.filter-trigger svg{font-size:17px}
.filter-trigger b{display:grid;place-items:center;min-width:19px;height:19px;border-radius:50%;background:var(--green);color:#fff;font-size:9px}
.sort-select{height:52px;border:1px solid var(--line);background:#fff;border-radius:14px;padding:0 34px 0 13px;color:var(--ink);font-size:11px;font-weight:700;outline:0}
.active-filter-row{display:flex;gap:7px;flex-wrap:wrap;min-height:8px;margin:10px 0}
.filter-chip{background:var(--green-soft);color:var(--green);padding:7px 10px;border-radius:999px;font-size:9px;font-weight:800}
.results-line{display:flex;justify-content:space-between;align-items:center;gap:20px;color:var(--muted);font-size:10px;margin:16px 0 18px}
.results-line b{font-size:13px;color:var(--ink)}
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.product-card{background:#fff;border:1px solid rgba(11,26,21,.08);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease,border-color var(--dur-1) ease}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:rgba(11,26,21,.13)}
.product-card__image{position:relative;aspect-ratio:1/1;background:linear-gradient(145deg,#f4f5f1,#eceee9);padding:14px;cursor:pointer;overflow:hidden}
.product-card__image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--dur-1) ease}
.product-card:hover .product-card__image img{transform:scale(1.025)}
.product-card__image.is-empty::after{content:"Producto sin imagen";position:absolute;inset:0;display:grid;place-items:center;color:#9ba49f;font-size:10px}
.product-card__fav{position:absolute;top:11px;right:11px;width:34px;height:34px;border:1px solid rgba(11,26,21,.08);background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border-radius:50%;display:grid;place-items:center;color:var(--ink);z-index:2}
.product-card__fav svg{font-size:16px}
.product-card__fav.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.product-card__body{display:flex;flex-direction:column;padding:14px;gap:7px;flex:1}
.product-kicker{font-size:8px;letter-spacing:.085em;text-transform:uppercase;color:var(--green);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.product-card__category{font-size:9px;color:var(--muted);font-weight:700}
.product-card__title{font-size:13px;font-weight:800;line-height:1.35;min-height:35px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.product-card__price-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px}
.product-card__price{display:grid;gap:1px}
.product-card__price small{font-size:8px;color:var(--muted)}
.product-card__price b{font-family:var(--serif);font-size:23px;font-weight:400;line-height:1}
.product-card__bulk{text-align:right;display:grid;gap:1px}
.product-card__bulk small{font-size:8px;color:var(--muted)}
.product-card__bulk b{font-size:10px;color:var(--green)}
.product-card__margin{background:var(--green-pale);color:var(--green);border-radius:10px;padding:8px 9px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:8px}
.product-card__margin b{font-size:10px}
.product-card__actions{display:grid;grid-template-columns:1fr 38px;gap:7px;margin-top:2px}
.product-card__add{height:38px;border:0;background:var(--ink);color:#fff;border-radius:11px;font-size:10px;font-weight:800}
.product-card__detail{height:38px;border:1px solid var(--line);background:#fff;border-radius:11px;display:grid;place-items:center;color:var(--ink)}
.product-card__detail svg{font-size:16px}
.product-card__unavailable{color:var(--danger);font-size:8px;font-weight:800}
.load-area{text-align:center;padding:34px 0 0;display:grid;justify-items:center;gap:8px;color:var(--muted)}
.load-area small{font-size:9px}
.filter-panel{position:fixed;inset:0;z-index:80;pointer-events:none}
.filter-panel[aria-hidden="false"]{pointer-events:auto}
.filter-panel__backdrop{position:absolute;inset:0;background:rgba(8,18,14,.38);opacity:0;transition:var(--dur-1)}
.filter-panel[aria-hidden="false"] .filter-panel__backdrop{opacity:1}
.filter-panel__sheet{position:absolute;top:0;right:0;width:min(430px,94vw);height:100%;background:var(--paper);padding:28px;transform:translateX(102%);transition:transform var(--dur-1) ease;box-shadow:-20px 0 60px rgba(8,18,14,.13);display:flex;flex-direction:column}
.filter-panel[aria-hidden="false"] .filter-panel__sheet{transform:translateX(0)}
.filter-panel__head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px}
.filter-panel__head h3{font-family:var(--serif);font-size:36px;font-weight:400;margin:5px 0 0}
.filter-fields{display:grid;gap:16px;padding:24px 0;overflow:auto}
.filter-fields label{display:grid;gap:7px;font-size:10px;font-weight:800;color:var(--muted)}
.filter-fields select{height:50px;border:1px solid var(--line);background:#fff;border-radius:13px;padding:0 12px;color:var(--ink);outline:0}
.filter-panel__actions{margin-top:auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:8px;border-top:1px solid var(--line);padding-top:18px}
.icon-btn{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:50%;display:grid;place-items:center;color:var(--ink)}
.icon-btn svg{font-size:17px}
.drawer{position:fixed;inset:0;z-index:90;pointer-events:none}
.drawer[aria-hidden="false"]{pointer-events:auto}
.drawer__backdrop{position:absolute;inset:0;background:rgba(6,17,13,.46);opacity:0;transition:var(--dur-1)}
.drawer[aria-hidden="false"] .drawer__backdrop{opacity:1}
.drawer__panel{position:absolute;right:0;top:0;height:100%;width:min(480px,95vw);background:var(--paper);transform:translateX(102%);transition:transform var(--dur-1) ease;display:flex;flex-direction:column;box-shadow:-30px 0 80px rgba(6,17,13,.18)}
.drawer[aria-hidden="false"] .drawer__panel{transform:translateX(0)}
.drawer__head{display:flex;justify-content:space-between;align-items:flex-start;padding:26px;border-bottom:1px solid var(--line)}
.drawer__head h2{font-family:var(--serif);font-size:42px;font-weight:400;margin:6px 0 0}
.drawer__body{padding:14px 22px;overflow:auto;flex:1}
.cart-empty{padding:70px 10px;text-align:center;color:var(--muted);font-size:12px;line-height:1.7}
.cart-item{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.cart-item img{width:70px;height:70px;object-fit:contain;background:#eff1ed;border-radius:13px;mix-blend-mode:multiply}
.cart-item__title{font-size:11px;font-weight:800;line-height:1.35}
.cart-item__meta{font-size:8px;color:var(--muted);margin-top:3px}
.cart-item__row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.cart-item input{width:78px;height:35px;border:1px solid var(--line);border-radius:10px;padding:0 8px;background:#fff}
.cart-item__remove{border:0;background:transparent;color:var(--danger);font-size:9px;font-weight:800}
.drawer__foot{padding:20px 22px;border-top:1px solid var(--line);display:grid;gap:10px;background:#fff}
.cart-totals{display:grid;gap:7px}
.cart-totals>div{display:flex;justify-content:space-between;gap:16px;font-size:10px;color:var(--muted)}
.cart-totals b{font-size:13px;color:var(--ink)}
.cart-totals__highlight{background:var(--green-pale);padding:11px;border-radius:12px;color:var(--green)!important}
.cart-totals__highlight b{color:var(--green)}
.drawer-clear{border:0;background:transparent;color:var(--muted);font-size:9px;font-weight:800}
.drawer__foot>small{text-align:center;color:var(--muted);font-size:8px;line-height:1.45}
.modal{position:fixed;inset:0;z-index:100;pointer-events:none}
.modal[aria-hidden="false"]{pointer-events:auto}
.modal__backdrop{position:absolute;inset:0;background:rgba(6,17,13,.56);opacity:0;transition:var(--dur-1)}
.modal[aria-hidden="false"] .modal__backdrop{opacity:1}
.modal__panel{position:absolute;left:50%;top:50%;width:min(1040px,calc(100% - 28px));max-height:92vh;overflow:auto;transform:translate(-50%,-48%) scale(.98);opacity:0;transition:var(--dur-1);display:grid;grid-template-columns:1.05fr .95fr;background:var(--paper);border-radius:30px;box-shadow:0 35px 110px rgba(6,17,13,.30)}
.modal[aria-hidden="false"] .modal__panel{opacity:1;transform:translate(-50%,-50%) scale(1)}
.modal__close{position:absolute;top:15px;right:15px;z-index:4}
.modal__visual{position:relative;min-height:600px;background:linear-gradient(145deg,#f1f2ee,#e4e8e1);display:grid;place-items:center;padding:36px}
.modal__visual img{width:100%;height:100%;max-height:560px;object-fit:contain;mix-blend-mode:multiply}
.modal__category-pill{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid var(--line);padding:8px 11px;border-radius:999px;font-size:9px;font-weight:800}
.modal__content{padding:42px 38px 34px;display:flex;flex-direction:column;gap:15px}
.modal__heading{display:grid;gap:8px}
.modal__heading h2{font-family:var(--serif);font-size:38px;line-height:1.03;font-weight:400;margin:0}
.modal__heading p{font-size:9px;color:var(--muted);line-height:1.5;margin:0}
.modal__profit{padding:14px 15px;border-radius:16px;background:var(--green-pale);display:grid;gap:4px}
.modal__profit small{font-size:8px;color:var(--green);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.modal__profit b{font-family:var(--serif);font-size:28px;font-weight:400;color:var(--green)}
.modal__profit span{font-size:9px;color:#5e756b}
.tier-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.tier{border:1px solid var(--line);border-radius:13px;padding:11px 8px;background:#fff;display:grid;gap:3px}
.tier.is-best{background:var(--ink);color:#fff;border-color:var(--ink)}
.tier small{font-size:8px;color:var(--muted)}
.tier.is-best small{color:#a9bbb4}
.tier b{font-size:13px}
.tier em{font-style:normal;font-size:7px;color:var(--green)}
.tier.is-best em{color:#9ec7b7}
.qty-section{border:1px solid var(--line);background:#fff;border-radius:17px;padding:13px;display:grid;gap:10px}
.qty-section__head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.qty-section__head b{font-size:10px}
.qty-section__head span{font-size:8px;color:var(--muted)}
.qty-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.qty-presets button{height:35px;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:10px;font-weight:800}
.qty-presets button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.qty-custom{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:8px;color:var(--muted)}
.qty-custom input{width:100px;height:37px;border:1px solid var(--line);border-radius:9px;padding:0 8px}
.modal__add{width:100%}
.fineprint{font-size:7.5px;line-height:1.5;color:var(--muted);margin:0}
.mobile-nav{display:none}
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:130;background:var(--ink);color:#fff;border-radius:999px;padding:10px 15px;font-size:10px;font-weight:700;opacity:0;pointer-events:none;transition:var(--dur-1);box-shadow:0 12px 30px rgba(6,17,13,.18)}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.footer{background:var(--ink);color:#fff;padding:58px 0 20px}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
.footer__brand img{height:74px;width:auto;margin-bottom:13px}
.footer__brand p{color:#a8b8b0;max-width:470px;line-height:1.65;font-size:11px}
.footer__grid>div:not(.footer__brand){display:flex;flex-direction:column;gap:8px}
.footer__grid b{font-size:11px;margin-bottom:3px}
.footer__grid span{color:#9cadA5;font-size:10px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:42px;padding-top:17px;display:flex;justify-content:space-between;color:#71847c;font-size:8px}
@media (max-width:1120px){
  .hero__grid{grid-template-columns:1fr .85fr;gap:40px}.hero-stage{min-height:520px}.stage-card--main{height:410px}.stage-card--mini{height:200px}.stage-card--bottom{top:225px}.stage-note{bottom:2px}.business-panel{grid-template-columns:260px 1fr}.editorial-grid{grid-template-columns:1.1fr 1fr;grid-template-rows:420px 240px}.editorial-card:first-child{grid-row:auto;grid-column:1/2}.editorial-card:nth-child(2){grid-column:2/3}.editorial-card:nth-child(n+3){grid-row:2}.editorial-grid .editorial-card:nth-child(5){display:none}.season-card{padding:48px}.season-product{width:205px;height:280px}.season-product img{height:195px}.category-mosaic{grid-template-columns:repeat(3,1fr)}.product-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:840px){
  :root{--shell:min(100% - 24px,760px)}
  body{padding-bottom:68px}.announcement__desktop,.nav__links,.nav-icon{display:none}.nav{height:66px}.brand img{height:50px}.cart-button{height:40px;padding-left:13px}.cart-button span{display:none}.hero{padding:48px 0 58px}.hero__grid{grid-template-columns:1fr}.hero h1{font-size:clamp(50px,12vw,72px)}.hero-stage{min-height:500px;max-width:650px;width:100%;margin:10px auto 0}.stage-card--main{width:67%;height:390px}.stage-card--mini{width:37%;height:190px}.stage-card--bottom{top:214px}.stage-note{bottom:4px}.business-panel{grid-template-columns:1fr;padding:28px}.business-options{grid-template-columns:repeat(3,1fr)}.section{padding:70px 0}.section-head{align-items:flex-start;flex-direction:column}.editorial-grid{grid-template-columns:1fr 1fr;grid-template-rows:360px 230px}.editorial-card:first-child{grid-column:1/-1;grid-row:auto}.editorial-card:nth-child(4),.editorial-card:nth-child(5){display:none}.season-card{grid-template-columns:1fr;padding:38px;min-height:720px}.season-card__copy{max-width:560px}.season-card h2{font-size:48px}.season-card__products{margin:30px 0 40px;height:300px}.season-product{width:220px;height:280px}.season-product:nth-child(1){left:4%}.season-product:nth-child(2){left:35%}.season-product:nth-child(3){left:64%}.season-tabs{left:38px}.category-mosaic{grid-template-columns:repeat(2,1fr)}.category-card:nth-child(1),.category-card:nth-child(8){grid-column:span 1}.product-grid{grid-template-columns:repeat(2,1fr)}.catalog-toolbar{top:66px}.modal__panel{grid-template-columns:1fr;max-width:620px}.modal__visual{min-height:330px;max-height:390px}.modal__content{padding:28px}.tier-grid{grid-template-columns:repeat(2,1fr)}.mobile-nav{position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:0;right:0;bottom:0;z-index:60;height:64px;background:rgba(255,255,255,.94);backdrop-filter:blur(18px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav a,.mobile-nav button{border:0;background:transparent;color:#68736d;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:8px;position:relative}.mobile-nav svg{font-size:18px}.mobile-nav b{position:absolute;top:5px;left:55%;min-width:16px;height:16px;border-radius:50%;background:var(--green);color:#fff;font-size:8px;display:grid;place-items:center}.footer{padding-bottom:92px}.footer__grid{grid-template-columns:1fr 1fr}.footer__brand{grid-column:1/-1}
}
@media (max-width:560px){
  :root{--shell:calc(100% - 18px)}
  .announcement__inner{font-size:9px;height:30px}.site-header{top:0}.nav{height:60px}.brand img{height:45px}.cart-button{height:38px}.hero{padding:38px 0 46px}.hero h1{font-size:40px;margin-top:13px}.hero__lead{font-size:14px;line-height:1.65}.hero-search{height:60px;padding-left:15px;border-radius:17px;gap:8px}.hero-search input{font-size:12px}.hero-search button{height:46px;padding:0 15px;font-size:10px}.quick-intents{gap:6px}.quick-intents button{font-size:9px;padding:7px 9px}.hero__trust{font-size:9px;gap:10px;margin-top:19px}.hero-stage{min-height:390px}.stage-card--main{left:1%;top:30px;width:69%;height:310px;border-radius:24px}.stage-card--mini{width:38%;height:150px;border-radius:19px}.stage-card--bottom{top:172px}.stage-product__image{padding:10px}.stage-product__info{padding:9px 10px}.stage-product__info small{font-size:7px}.stage-product__info b{font-size:9px}.stage-product__price{font-size:15px}.stage-card--mini .stage-product__info b{font-size:8px}.stage-card--mini .stage-product__price{font-size:13px}.stage-note{left:1%;bottom:0;width:58%;padding:12px;border-radius:15px}.stage-note span{font-size:12px}.stage-note b{font-size:11px}.stage-note small{font-size:8px}.business-section{padding-bottom:12px}.business-panel{padding:23px 17px;border-radius:26px;gap:22px}.business-panel__intro h2{font-size:31px}.business-options{grid-template-columns:repeat(2,1fr);gap:7px}.business-card{min-height:86px;padding:12px;gap:9px}.business-card svg{font-size:18px}.business-card b{font-size:10px}.business-card small{font-size:8px}.section{padding:58px 0}.section-head{margin-bottom:24px;gap:12px}.section-head h2{font-size:38px}.link-button{font-size:9px}.editorial-grid{display:grid;grid-template-columns:1fr;grid-template-rows:360px 210px}.editorial-card:first-child,.editorial-card:nth-child(2){grid-column:auto}.editorial-card:nth-child(n+3){display:none}.editorial-card__content{padding:18px}.editorial-card:first-child .editorial-card__content b{font-size:28px}.season-section{padding-bottom:44px}.season-card{padding:28px 18px;min-height:675px;border-radius:28px}.season-card h2{font-size:43px}.season-card p{font-size:11px}.season-card__products{height:265px;margin-top:24px}.season-product{width:160px;height:220px;padding:10px;border-radius:20px}.season-product img{height:150px}.season-product:nth-child(1){left:0}.season-product:nth-child(2){left:29%;top:20px}.season-product:nth-child(3){left:56%;top:2px}.season-product b{font-size:8px}.season-product strong{font-size:10px}.season-tabs{left:18px;bottom:20px}.season-tabs button{font-size:8px;padding:6px 8px}.product-rail{grid-auto-columns:minmax(205px,72vw)}.category-mosaic{gap:8px}.category-card{min-height:180px;border-radius:19px}.category-card__copy{left:13px;right:13px;bottom:13px}.category-card__copy b{font-size:18px}.catalog-intro h2{font-size:48px}.catalog-toolbar{top:60px;grid-template-columns:1fr auto;padding:9px 0}.sort-select{grid-column:1/-1;height:45px}.catalog-search,.filter-trigger{height:48px}.filter-trigger{min-width:92px}.results-line{align-items:flex-start}.results-line>div:last-child{max-width:55%;text-align:right}.product-grid{gap:8px}.product-card{border-radius:17px}.product-card__image{padding:9px}.product-card__fav{width:30px;height:30px;top:8px;right:8px}.product-card__body{padding:10px;gap:6px}.product-card__title{font-size:11px;min-height:30px}.product-card__price b{font-size:19px}.product-card__margin{padding:7px}.product-card__actions{grid-template-columns:1fr 34px}.product-card__add,.product-card__detail{height:35px}.filter-panel__sheet{width:100%;height:auto;max-height:90vh;top:auto;bottom:0;border-radius:24px 24px 0 0;transform:translateY(102%);padding:22px}.filter-panel[aria-hidden="false"] .filter-panel__sheet{transform:translateY(0)}.drawer__panel{width:100%}.modal__panel{width:calc(100% - 12px);max-height:96vh;border-radius:22px}.modal__visual{min-height:285px;max-height:330px;padding:22px}.modal__content{padding:22px 17px}.modal__heading h2{font-size:31px}.modal__profit b{font-size:24px}.footer__grid{grid-template-columns:1fr;gap:28px}.footer__brand{grid-column:auto}.footer__bottom{flex-direction:column;gap:5px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* NEXO Promocionales · adaptación premium */
body.no-scroll{overflow:hidden}
.promo-goals{grid-template-columns:repeat(4,1fr)}
.promo-stage-note small{max-width:260px}
.promo-campaign-card{background:linear-gradient(120deg,#102b22,#1a5743)}
.promo-family-mosaic{grid-template-columns:repeat(4,1fr)}
.promo-family-mosaic .category-card:nth-child(1){grid-column:span 2}
.promo-family-mosaic .category-card:nth-child(7){grid-column:span 2}
.product-card.is-selected{border-color:rgba(21,93,71,.34);box-shadow:0 0 0 1px rgba(21,93,71,.10)}
.product-card__code{font:700 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#557068;background:#eff5f1;border-radius:7px;padding:5px 7px;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.product-card__description{font-size:9px;color:var(--muted);line-height:1.48;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:27px}
.product-card__promo-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:5px;font-size:8px;color:var(--muted)}
.product-card__promo-meta b{font-size:9px;color:var(--green)}
.product-card__add.is-selected{background:var(--green)}
.product-card--rail .product-card__image{aspect-ratio:1.05/1}
.product-card--rail .product-card__title{min-height:36px}
.active-filter{border:0;background:var(--green-soft);color:var(--green);padding:7px 10px;border-radius:999px;font-size:9px;font-weight:800}
.active-filter span{margin-left:4px}
.modal-code-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.modal-code-line code{font:800 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--green-pale);color:var(--green);padding:8px 10px;border-radius:9px}
.copy-code-button{border:0;background:transparent;color:var(--green);display:flex;align-items:center;gap:5px;font-size:9px;font-weight:800}
.copy-code-button svg{font-size:13px}
.promo-specs{display:flex;gap:6px;flex-wrap:wrap}
.promo-specs span{font-size:9px;line-height:1.4;color:#50665e;border:1px solid var(--line);background:#fff;border-radius:10px;padding:7px 9px}
.promo-variant-block{display:grid;gap:8px}
.promo-variant-block>b{font-size:10px}
.variant-pills{display:flex;flex-wrap:wrap;gap:6px;max-height:112px;overflow:auto;padding:1px}
.variant-pills button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:8px 10px;font-size:9px;font-weight:700}
.variant-pills button.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.promo-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.promo-config-grid label,.quote-contact-grid label,.quote-comment{display:grid;gap:6px;font-size:8px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--muted)}
.promo-config-grid input,.promo-config-grid select,.quote-contact-grid input,.quote-comment textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;min-height:42px;padding:0 12px;color:var(--ink);outline:0;font-size:10px;text-transform:none;letter-spacing:0;font-weight:500}
.quote-comment textarea{height:auto;padding:10px 12px;resize:vertical}
.promo-modal-content .modal__heading p{font-size:11px;line-height:1.65}
.promo-modal-content .qty-section{margin-top:2px}
.promo-quote-foot{max-height:52vh;overflow:auto}
.quote-contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quote-item .cart-item__body{min-width:0;display:grid;gap:3px}
.quote-item .cart-item__body>b{font-size:11px;line-height:1.35}
.quote-item .cart-item__body>span{font:700 8px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--green)}
.quote-item .cart-item__body>small{font-size:8px;line-height:1.45;color:var(--muted)}
.cart-item__controls{display:flex;align-items:center;gap:6px;margin-top:7px}
.cart-item__controls button:not(.cart-item__remove){width:27px;height:27px;border:1px solid var(--line);background:#fff;border-radius:8px;color:var(--ink)}
.cart-item__controls strong{min-width:34px;text-align:center;font-size:10px}
.cart-item__controls .cart-item__remove{margin-left:auto;border:0;background:transparent;color:var(--danger);font-size:8px;font-weight:800}
.drawer-empty{padding:70px 18px;text-align:center;display:grid;justify-items:center;gap:13px;color:var(--muted)}
.drawer-empty>span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--green-pale);color:var(--green)}
.drawer-empty svg{font-size:24px}
.drawer-empty h3{font-family:var(--serif);font-size:26px;font-weight:400;color:var(--ink);margin:0}
.image-fallback,.is-fallback{mix-blend-mode:normal!important;object-fit:contain!important;padding:18%!important;opacity:.52}

@media(max-width:1120px){
  .promo-goals{grid-template-columns:repeat(3,1fr)}
  .promo-family-mosaic{grid-template-columns:repeat(3,1fr)}
  .promo-family-mosaic .category-card:nth-child(7){grid-column:auto}
}
@media(max-width:840px){
  .promo-goals{grid-template-columns:repeat(2,1fr)}
  .promo-family-mosaic{grid-template-columns:repeat(2,1fr)}
  .promo-family-mosaic .category-card:nth-child(1){grid-column:span 2}
  .promo-family-mosaic .category-card:nth-child(7){grid-column:span 2}
  .quote-contact-grid,.promo-config-grid{grid-template-columns:1fr}
  .promo-quote-foot{max-height:58vh}
}
@media(max-width:560px){
  .promo-goals{grid-template-columns:1fr 1fr}
  .business-card{min-height:92px;padding:13px 11px}
  .business-card b{font-size:10px}.business-card small{font-size:8px}
  .hero__lead{font-size:14px}
  .promo-family-mosaic .category-card{min-height:180px}
  .product-card__description{display:none}
  .product-card__promo-meta span{display:none}
  .promo-modal-content .modal__heading p{font-size:10px}
}


/* =========================================================
   NEXO PROMOCIONALES V5 · EXPERIENCE LAYER
   ========================================================= */
:root{
  --cyan:#23c7db;
  --orange:#ff9a32;
  --lime:#76d93e;
  --magenta:#ef4f9a;
  --glow-cyan:rgba(35,199,219,.14);
  --glow-orange:rgba(255,154,50,.14);
}
.nav{height:86px;transition:height var(--dur-1) ease}
.brand img{height:70px;filter:drop-shadow(0 8px 18px rgba(11,26,21,.10));transition:transform var(--dur-1) ease}
.site-header.is-compact .nav{height:68px}
.site-header.is-compact .brand img{transform:scale(.87)}
.site-header.is-compact{background:rgba(246,244,238,.94);border-color:var(--line);box-shadow:0 8px 26px rgba(13,32,25,.06)}
.nav-icon,.cart-button{transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease,background var(--dur-1) ease}
.nav-icon:hover,.cart-button:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(13,32,25,.08)}

.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;pointer-events:none;filter:blur(4px)}
.hero::before{width:330px;height:330px;right:9%;top:5%;background:radial-gradient(circle,var(--glow-cyan),transparent 68%)}
.hero::after{width:280px;height:280px;right:28%;bottom:3%;background:radial-gradient(circle,var(--glow-orange),transparent 70%)}
.hero{padding:66px 0 78px}
.hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(510px,.96fr);gap:64px}
.hero h1{font-size:clamp(62px,6.15vw,91px);line-height:.945;max-width:800px}
.hero__lead{font-size:18px;max-width:660px}
.hero-search{position:relative;box-shadow:0 16px 42px rgba(13,32,25,.07);border-color:rgba(11,26,21,.07)}
.hero-search:focus-within{border-color:rgba(21,93,71,.35);box-shadow:0 0 0 4px rgba(21,93,71,.07),0 18px 48px rgba(13,32,25,.09)}
.hero-search button{transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease}
.hero-search button:hover{transform:translateY(-1px);box-shadow:0 9px 18px rgba(21,93,71,.18)}
.hero__trust{font-size:11px}

.hero-stage{position:relative;min-height:610px;isolation:isolate}
.hero-stage::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;right:8%;bottom:8%;background:radial-gradient(circle,rgba(239,79,154,.10),transparent 68%);z-index:-1}
.stage-card{border-color:rgba(11,26,21,.07);box-shadow:0 24px 68px rgba(13,32,25,.12);transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease}
.stage-card:hover{box-shadow:0 30px 82px rgba(13,32,25,.16)}
.stage-card--main{left:2%;top:55px;width:62%;height:430px;border-radius:34px;transform:rotate(-2.1deg)}
.stage-card--top{top:5px;right:3%;width:39%;height:220px;transform:rotate(3.1deg)}
.stage-card--bottom{top:245px;right:0;width:38%;height:215px;transform:rotate(1.2deg)}
.stage-card--accent{position:absolute;left:9%;bottom:6px;width:31%;height:170px;border-radius:24px;z-index:4;background:#fff;border:1px solid rgba(11,26,21,.07);overflow:hidden;box-shadow:0 24px 68px rgba(13,32,25,.11)}
.stage-card--accent .stage-product__info{display:none}
.stage-card--accent .stage-product__image{padding:12px;background:linear-gradient(145deg,#eef6f2,#f9f2e7)}
.stage-product__image{background:linear-gradient(145deg,#fbfbf8,#edf1ec);padding:19px}
.stage-product__image img{mix-blend-mode:multiply;filter:drop-shadow(0 12px 18px rgba(13,32,25,.10))}
.stage-product__info{padding:14px 17px 15px}
.stage-product__info small{font-size:8px;letter-spacing:.12em;color:var(--green)}
.stage-product__info b{font-size:11px}
.stage-product__price{font-size:9px!important;font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;color:#76837d!important;margin-top:2px}
.stage-note{right:4%;left:auto;bottom:8px;width:47%;background:rgba(11,26,21,.94);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 20px 42px rgba(11,26,21,.17);backdrop-filter:blur(12px)}
.stage-note span{color:#9cc8b8}
.stage-note b{font-size:12px}
.stage-note small{font-size:9px;color:#aec2b9}

.search-suggestions{position:absolute;left:0;right:0;top:calc(100% + 9px);z-index:80;background:#fff;border:1px solid var(--line);border-radius:18px;padding:7px;box-shadow:0 24px 60px rgba(13,32,25,.15);overflow:hidden}
.search-suggestions[hidden]{display:none}
.search-suggestions button{width:100%;border:0;background:transparent;display:grid;grid-template-columns:48px 1fr;gap:11px;align-items:center;text-align:left;padding:8px;border-radius:12px;color:var(--ink)}
.search-suggestions button:hover,.search-suggestions button:focus{background:var(--green-pale);outline:0}
.suggestion-thumb{width:48px;height:48px;border-radius:10px;background:#f1f3ef;display:grid;place-items:center;overflow:hidden}
.suggestion-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.search-suggestions b{display:block;font-size:11px;line-height:1.3;margin-bottom:2px}
.search-suggestions small{display:block;font-size:8px;color:var(--muted)}
.catalog-search-wrap{position:relative;min-width:0}
.search-suggestions--catalog{top:calc(100% + 6px)}

.promo-goals{grid-template-columns:repeat(3,1fr)}
.business-card{min-height:100px;padding:17px;border-color:rgba(255,255,255,.09);position:relative;overflow:hidden}
.business-card::after{content:"";position:absolute;width:72px;height:72px;border-radius:50%;right:-26px;bottom:-30px;background:radial-gradient(circle,rgba(35,199,219,.16),transparent 68%);opacity:0;transition:var(--dur-1)}
.business-card:hover::after,.business-card.is-active::after{opacity:1}
.business-card b{font-size:12px}
.business-card small{font-size:10px}
/* 11 px es el piso: por debajo deja de ser legible en pantalla densa. */
.goal-explore-all{grid-column:2/3;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:#fff;border-radius:999px;height:44px;padding:0 18px;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;font-weight:700;letter-spacing:.01em;margin-top:1px}
.goal-explore-all:hover{background:#fff;color:var(--ink)}
.goal-explore-all svg{font-size:15px}

.editorial-card__content{gap:4px}
.editorial-card__content b{font-size:18px;line-height:1.12}
.editorial-card:first-child .editorial-card__content b{font-size:34px}
.editorial-card__content span{font-size:8px;color:#b9ccc4;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.editorial-card__content .editorial-reason{display:inline-flex;width:max-content;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.15);padding:6px 9px;border-radius:999px;font-size:9px;color:#fff;margin-top:3px;backdrop-filter:blur(8px)}
.editorial-card__content em{font-style:normal;font-size:8px;color:#c8d9d2}

.season-tabs{background:rgba(5,18,13,.24);padding:4px;border-radius:999px;backdrop-filter:blur(10px)}
.season-tabs button{font-size:9px;padding:8px 12px;border-radius:999px;color:#c9dad3}
.season-tabs button.is-active{background:#fff;color:var(--ink);box-shadow:0 6px 16px rgba(6,17,13,.14)}

.promo-family-mosaic{grid-template-columns:repeat(12,1fr);gap:12px}
.promo-family-mosaic .category-card{grid-column:span 3;min-height:250px}
.promo-family-mosaic .category-card:nth-child(1){grid-column:span 3}
.promo-family-mosaic .category-card:nth-child(5),.promo-family-mosaic .category-card:nth-child(6),.promo-family-mosaic .category-card:nth-child(7){grid-column:span 4}
.category-card__image img{object-fit:contain;mix-blend-mode:multiply;padding:6px}
.category-card__image{background:linear-gradient(145deg,#eef1ec,#e1e5df)}
.category-card__overlay{inset:45% 0 0;background:linear-gradient(transparent,rgba(6,17,13,.84))}
.category-card__copy span{font-size:10px}
.category-card__copy b{font-size:24px}

.catalog-intro{margin-bottom:28px}
.catalog-toolbar{top:86px;grid-template-columns:minmax(0,1fr) auto auto;transition:top var(--dur-1) ease}
.site-header.is-compact ~ main .catalog-toolbar{top:68px}
.catalog-search-wrap{min-width:0}
.catalog-search{height:56px;border-radius:16px;box-shadow:0 7px 22px rgba(13,32,25,.035)}
.catalog-search:focus-within{border-color:rgba(21,93,71,.35);box-shadow:0 0 0 4px rgba(21,93,71,.06)}
.catalog-search input{font-size:14px}
.filter-trigger,.sort-select{height:56px;border-radius:16px}
.active-filter-row{margin-bottom:4px}
.catalog-shortcuts{display:flex;gap:7px;justify-content:flex-end;min-height:0;margin-top:2px}
.catalog-shortcuts button{height:34px;border:1px solid var(--line);background:#fff;border-radius:999px;padding:0 10px;display:flex;align-items:center;gap:6px;color:var(--ink);font-size:9px;font-weight:800}
.catalog-shortcuts button svg{font-size:13px;color:var(--green)}
.catalog-shortcuts button b{min-width:19px;height:19px;border-radius:999px;background:var(--green-pale);color:var(--green);display:grid;place-items:center;font-size:8px}
.results-line{margin-top:9px;font-size:11px}
.results-line b{font-size:14px}

.product-grid{gap:14px}
.product-card{border-radius:23px;box-shadow:0 2px 0 rgba(13,32,25,.01)}
.product-card__image{padding:12px;background:linear-gradient(145deg,#fafaf7,#eff2ed)}
.product-card__image img{filter:drop-shadow(0 8px 13px rgba(13,32,25,.055))}
.product-card:hover .product-card__image img{transform:scale(1.045)}
.product-card__body{padding:14px 14px 15px;gap:7px}
.product-kicker{font-size:9px}
.product-card__title{font-size:14px;line-height:1.3;min-height:37px}
.product-card__code{font-size:8.5px;padding:5px 7px;background:#f0f5f2}
.product-card__promo-meta{justify-content:flex-start;padding-top:3px;font-size:9px;min-height:20px}
.product-card__promo-meta b{font-size:9px;color:#66756e;font-weight:700}
.product-card__actions{grid-template-columns:1fr;margin-top:5px}
.product-card__add{height:42px;border-radius:12px;font-size:10px;transition:transform var(--dur-1) ease,background var(--dur-1) ease,box-shadow var(--dur-1) ease}
.product-card__add:hover{transform:translateY(-1px);box-shadow:0 8px 16px rgba(11,26,21,.10)}
.product-card__add.is-selected{background:var(--green);box-shadow:0 5px 12px rgba(20,23,26,.18)}
.product-card.is-selected{border-color:rgba(21,93,71,.38);box-shadow:0 0 0 2px rgba(21,93,71,.07),0 12px 32px rgba(13,32,25,.06)}
.selected-badge{position:absolute;left:10px;top:10px;z-index:2;background:rgba(21,93,71,.92);color:#fff;border-radius:999px;padding:6px 8px;display:flex;align-items:center;gap:4px;font-size:8px;font-weight:800;backdrop-filter:blur(8px);animation:selectedPop .23s ease-out}
.selected-badge svg{font-size:11px}
@keyframes selectedPop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}

.filter-fields label{font-size:11px}
.filter-fields select{font-size:12px}

.quote-progress{margin:5px 0 0;color:var(--muted);font-size:10px;font-weight:700}
.quote-project{background:linear-gradient(135deg,var(--green-pale),#f6f2e8);border:1px solid rgba(21,93,71,.10);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.quote-project span{font-size:8px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:800}
.quote-project b{font-size:10px;color:var(--green)}
.quote-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.quote-trust span{min-height:36px;border-radius:10px;background:#f5f7f3;color:#5d6c65;font-size:7.5px;font-weight:750;display:flex;align-items:center;justify-content:center;text-align:center;gap:3px;padding:5px}
.quote-trust svg{font-size:10px;color:var(--green);flex:0 0 auto}
.btn--whatsapp{min-height:50px;font-size:11px;box-shadow:0 11px 24px rgba(31,189,104,.13)}
.quote-suggestions{border-top:1px solid var(--line);padding:18px 0 8px;margin-top:6px}
.quote-suggestions__head{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:10px}
.quote-suggestions__head span{font-family:var(--serif);font-size:20px}
.quote-suggestions__head small{font-size:8px;color:var(--muted)}
.quote-suggestions__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quote-suggestions__grid>button{border:1px solid var(--line);background:#fff;border-radius:14px;padding:8px;display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:8px;text-align:left;color:var(--ink)}
.quote-suggestions__grid>button>span{grid-row:1/3;width:56px;height:56px;border-radius:10px;background:#f1f3ef;overflow:hidden}
.quote-suggestions__grid img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.quote-suggestions__grid b{font-size:9px;line-height:1.3;align-self:end}
.quote-suggestions__grid small{font-size:7.5px;color:var(--muted);align-self:start}

.modal__content{padding:38px 36px}
.modal__heading h2{font-size:39px}
.promo-specs span{font-size:10px}
.variant-pills button{font-size:10px;min-height:38px}
.qty-presets button{min-height:38px}
.modal__add{min-height:50px}
:where(button,a,input,select,textarea):focus-visible{outline:3px solid rgba(35,199,219,.34);outline-offset:2px}

@media(max-width:840px){
  .announcement{font-size:9px}.announcement__inner{height:29px;gap:7px}
  .nav{height:68px}.brand img{height:54px}.site-header.is-compact .nav{height:62px}.site-header.is-compact .brand img{transform:scale(.88)}
  .hero{padding:30px 0 36px}.hero__grid{display:block}.hero h1{font-size:clamp(38px,10.2vw,54px);line-height:.98;margin:12px 0 17px;max-width:14ch}.hero__lead{font-size:14px;margin-bottom:18px}
  .hero-search{height:56px;border-radius:16px;padding:6px 6px 6px 14px}.hero-search input{font-size:12px;min-width:0}.hero-search button{height:44px;padding:0 14px;font-size:9px}
  .quick-intents{overflow:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}.quick-intents::-webkit-scrollbar{display:none}.quick-intents button{white-space:nowrap}
  .hero__trust{display:grid;grid-template-columns:1fr 1fr;gap:7px 12px;font-size:9px}.hero__trust span:last-child{grid-column:1/-1}
  .hero-stage{min-height:345px;margin-top:22px}.hero-stage::before{inset:18px 5px 36px 8px}
  .stage-card--main{left:0;top:34px;width:64%;height:270px}.stage-card--top{right:0;top:0;width:39%;height:137px}.stage-card--bottom{right:1%;top:153px;width:38%;height:133px}.stage-card--accent{left:8%;bottom:0;width:27%;height:91px}.stage-card--main .stage-product__info{padding:8px 10px}.stage-card--mini .stage-product__info{display:none}.stage-product__image{padding:9px}.stage-note{display:none}
  .search-suggestions{left:0;right:0;top:calc(100% + 6px)}
  .business-panel{gap:18px;padding:22px 16px}.promo-goals{grid-template-columns:1fr 1fr}.business-card{min-height:88px;padding:12px}.business-card b{font-size:12px}.business-card small{font-size:11px}.goal-explore-all{grid-column:1/-1;width:100%;margin-top:0}
  .section{padding:54px 0}.section-head h2{font-size:37px}.section-head{align-items:end}
  .editorial-grid{grid-template-columns:1fr;grid-template-rows:345px 190px}.editorial-card:first-child{grid-row:auto}.editorial-card:nth-child(n+3){display:none}.editorial-card__content b{font-size:19px}.editorial-card:first-child .editorial-card__content b{font-size:28px}.editorial-card__content .editorial-reason{font-size:8px}
  .season-tabs button{font-size:8.5px;padding:7px 9px}
  .promo-family-mosaic{grid-template-columns:repeat(2,1fr);gap:8px}.promo-family-mosaic .category-card,.promo-family-mosaic .category-card:nth-child(1),.promo-family-mosaic .category-card:nth-child(5),.promo-family-mosaic .category-card:nth-child(6),.promo-family-mosaic .category-card:nth-child(7){grid-column:span 1;min-height:180px}.promo-family-mosaic .category-card:last-child{grid-column:1/-1;min-height:170px}.category-card__copy b{font-size:19px}.category-card__copy span{font-size:8.5px}
  .catalog-intro h2{font-size:46px}.catalog-toolbar{top:68px;grid-template-columns:minmax(0,1fr) auto;padding:8px 0}.site-header.is-compact ~ main .catalog-toolbar{top:62px}.catalog-search,.filter-trigger{height:48px}.catalog-search input{font-size:12px}.sort-select{grid-column:1/-1;height:44px}.catalog-shortcuts{justify-content:flex-start;overflow:auto;scrollbar-width:none}.results-line{font-size:10px}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.product-card{border-radius:18px}.product-card__image{padding:8px}.product-card__body{padding:10px;gap:5px}.product-kicker{font-size:7.5px}.product-card__title{font-size:11.5px;min-height:31px}.product-card__code{font-size:7.5px;padding:4px 5px}.product-card__promo-meta{font-size:8px;min-height:17px}.product-card__promo-meta b{font-size:8px}.product-card__add{height:37px;font-size:9px}.selected-badge{left:7px;top:7px;font-size:7px;padding:5px 6px}.product-card__fav{width:30px;height:30px;top:7px;right:7px}
  .quote-trust{grid-template-columns:1fr}.quote-trust span{min-height:31px;justify-content:flex-start;padding:6px 9px;font-size:8px}.quote-suggestions__grid{grid-template-columns:1fr}.quote-suggestions__head{align-items:start;flex-direction:column;gap:2px}
  .modal__content{padding:22px 17px}.modal__heading h2{font-size:31px}.promo-specs span{font-size:9px}
  .mobile-nav a,.mobile-nav button{position:relative}.mobile-nav .is-active{color:var(--green)}.mobile-nav .is-active::before{content:"";position:absolute;top:4px;left:50%;width:22px;height:3px;border-radius:999px;background:var(--green);transform:translateX(-50%)}
  .footer__brand img{height:84px}
}
@media(max-width:420px){
  .shell{--shell:min(100% - 24px,1240px)}
  .announcement__inner{white-space:nowrap;overflow:hidden}.announcement__inner span:last-child{display:none}
  .hero h1{font-size:37px}.hero__lead{max-width:330px}.hero-search button{padding:0 12px}.hero__trust{grid-template-columns:1fr;font-size:8.5px}.hero__trust span:last-child{grid-column:auto}
  .hero-stage{min-height:312px}.stage-card--main{height:245px}.stage-card--top{height:122px}.stage-card--bottom{top:137px;height:120px}.stage-card--accent{height:82px}
  .business-panel__intro h2{font-size:30px}.business-card{min-height:84px}.business-card svg{font-size:17px}
  .catalog-intro h2{font-size:42px}.catalog-shortcuts button{font-size:8.5px}
}

/* ===== Fase A ===== */
.hero{overflow:visible}
.hero__halos{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-search-wrap{position:relative;z-index:30;max-width:720px}
.hero-search-wrap .search-suggestions{top:calc(100% + 8px);max-height:min(60vh,380px);overflow:auto}

/* --- Fase A · legibilidad: mínimos en todos los anchos (sin cambiar paleta ni layout) --- */
.announcement__inner{font-size:12px}
.eyebrow,.kicker,.section-note{font-size:12px}
.hero__trust{font-size:13px}
.quick-intents button{font-size:13px;min-height:40px;padding:8px 14px}
.link-button{font-size:13px}
.business-card b{font-size:15px}.business-card small{font-size:13px}
.season-tabs button{font-size:13px;min-height:40px;padding:8px 14px}
.season-product b{font-size:13px}.season-product strong,.season-product small{font-size:12px}
.stage-product__info small{font-size:11px}.stage-product__info b{font-size:14px}.stage-product__price{font-size:12px}
.editorial-card__content small,.editorial-card__content span,.editorial-card__content em,.editorial-card__content strong{font-size:12px}
.category-card__copy span{font-size:12px}
.product-kicker{font-size:12px}
.product-card__title{font-size:15px}
.product-card__code{font-size:12px}
.product-card__promo-meta,.product-card__promo-meta b,.product-card__promo-meta span{font-size:12px}
.product-card__add{font-size:14px;min-height:44px}
.budget__quick button{font-size:13px}
.results-line,#loadSummary,.active-filter{font-size:13px}
.catalog-shortcuts button,.filter-trigger,.sort-select{font-size:14px}
.catalog-search input,.hero-search input{font-size:16px}
.hero-search button{font-size:14px}
.footer__grid span,.footer__brand p,.footer__bottom{font-size:13px}
.mobile-nav span{font-size:12px}
.fineprint{font-size:12px;line-height:1.5}
.modal-code-line code,.copy-code-button{font-size:13px}
.promo-specs span{font-size:13px}
.qty-section__head b,.promo-variant-block>b{font-size:14px}
.qty-presets button{min-height:44px;font-size:15px}
.qty-custom{font-size:13px}
.qty-custom input,#personalizationSelect,#itemNoteInput{font-size:16px;min-height:44px}
.promo-config-grid label{font-size:12px}
.variant-pills button{min-height:40px;font-size:14px;padding:8px 14px}
.variant-pills .variant-tbd{border-style:dashed}
.variant-pills{max-height:none}
.modal-in-quote{margin:0;padding:10px 12px;border-radius:12px;background:var(--green-pale);color:var(--green);font-size:14px;font-weight:700}
.modal__actions{display:grid;gap:8px}
.field-error{display:block;margin:6px 0 0;color:var(--danger);font-size:13px;font-weight:700;line-height:1.4;text-transform:none;letter-spacing:0}
[aria-invalid="true"]{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(190,50,40,.12)}

/* Panel de cotización: una sola zona de scroll y acciones siempre visibles */
.drawer__body{display:grid;align-content:start;gap:16px}
.quote-progress{font-size:14px}
.cart-item__body>b{font-size:15px}
.cart-item__body>span{font-size:12px}
.cart-item__body>small{font-size:13px}
.cart-item__controls{gap:8px;margin-top:8px}
.cart-item__controls button:not(.cart-item__remove){width:44px;height:44px;font-size:20px;border-radius:12px}
.cart-item__qty{width:96px!important;height:44px!important;font-size:16px;text-align:center;border:1px solid var(--line);border-radius:12px}
.cart-item__links{display:flex;gap:4px;margin-top:2px}
.cart-item__edit,.cart-item__remove{min-height:44px;padding:0 10px;border:0;background:transparent;font-size:14px;font-weight:800;border-radius:10px}
.cart-item__edit{color:var(--green)}.cart-item__remove{color:var(--danger)}
.cart-item.is-unlisted .cart-item__body>span{color:var(--muted);font-family:inherit}
.quote-suggestions__grid button{min-height:44px}
.quote-suggestions__head span{font-size:13px}.quote-suggestions__head small,.quote-suggestions__grid small{font-size:12px}.quote-suggestions__grid b{font-size:13px}
.quote-form{display:grid;gap:12px;padding-top:6px;border-top:1px solid var(--line)}
.quote-form__head h3{margin:10px 0 2px;font-family:var(--serif);font-weight:400;font-size:26px}
.quote-form__head p,.quote-required-note{margin:0;font-size:13px;color:var(--muted)}
.quote-contact-grid label,.quote-comment{font-size:12px}
.quote-contact-grid input,.quote-contact-grid select,.quote-comment textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;min-height:46px;padding:0 12px;color:var(--ink);font-size:16px;text-transform:none;letter-spacing:0;font-weight:500}
.quote-comment textarea{padding:10px 12px;min-height:72px}
.quote-contact-grid .optional,.quote-comment .optional{text-transform:none;letter-spacing:0;font-weight:600}
.quote-trust{font-size:12px}
.drawer__cta{padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:#fff;display:grid;gap:6px;box-shadow:0 -12px 30px rgba(6,17,13,.06)}
.drawer__cta .btn--whatsapp{min-height:52px;font-size:15px}
.drawer__cta-secondary{display:flex;justify-content:space-between;gap:8px}
.drawer-clear{min-height:44px;padding:0 8px;font-size:14px}
.drawer-empty p{margin:0;font-size:14px}
#quoteDrawer .icon-btn{min-width:44px;min-height:44px}
.post-send{display:grid;gap:8px;padding:14px;border-radius:14px;background:var(--green-pale);font-size:14px}
.post-send p{margin:0}
.post-send__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.post-send__actions .btn{font-size:14px}

/* Estado sin resultados */
.empty-state{grid-column:1/-1;padding:40px 20px;text-align:center;display:grid;gap:14px;justify-items:center;background:#fff;border:1px solid var(--line);border-radius:24px}
.empty-state h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,32px);text-wrap:balance}
.empty-state p{margin:0;max-width:52ch;color:var(--muted);font-size:15px}
.empty-state__form{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:end}
.empty-state__form label{display:grid;gap:6px;font-size:13px;font-weight:700;text-align:left}
.empty-state__form input{width:150px;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:0 12px;font-size:16px}
.empty-state__form .btn{font-size:14px}
.empty-state__alt{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;font-size:14px;color:var(--muted)}
.empty-state__alt button{min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:var(--paper);font-size:14px;font-weight:700;color:var(--ink)}

/* --- Fase A · móvil --- */
@media(max-width:560px){
  .product-card__title{font-size:14px;min-height:38px}
  .product-card__add{height:44px}
  .sort-select,.filter-fields select{font-size:16px}
  .quote-contact-grid{grid-template-columns:1fr}
  .modal__actions{position:sticky;bottom:-22px;z-index:3;margin:0 -17px -22px;padding:12px 17px calc(14px + env(safe-area-inset-bottom,0px));background:var(--paper);box-shadow:0 -10px 24px rgba(6,17,13,.08)}
  .drawer__head{padding:18px 20px}
  .drawer__body{padding:12px 18px}
  .empty-state__form{flex-direction:column;align-items:stretch}
  .empty-state__form input{width:100%}
}
/* Con una capa abierta (modal o cotización), el aviso sube para no tapar sus acciones */
.toast{font-size:14px;padding:12px 18px;max-width:calc(100vw - 32px);text-align:center}
body.no-scroll .toast{top:calc(16px + env(safe-area-inset-top,0px));bottom:auto}

/* ===== Mejoras B ===== */
/* Hero: la tarjeta decorativa ya no tapa el nombre del producto principal */
.stage-card--main{height:372px}
.stage-card--accent{bottom:-6px;height:150px}
@media(max-width:840px){
  .stage-card--main{height:250px}
  .stage-card--accent{display:none}
}
@media(max-width:420px){.stage-card--main{height:236px}}
/* Tablet: la regla de 2 columnas de ≤1120px no debe dejar una columna fantasma en ≤840px */
@media(max-width:840px){.editorial-card:nth-child(2){grid-column:auto}}

/* Cómo funciona */
.how-section{padding:10px 0 34px}
.how{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:28px;align-items:start}
.how__intro h2{margin:8px 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,40px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.how__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;counter-reset:paso}
.how__steps li{counter-increment:paso;background:#fff;border:1px solid var(--line);border-radius:22px;padding:20px 20px 22px;display:grid;gap:8px;align-content:start}
.how__steps li::before{content:counter(paso);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green-pale);color:var(--green);font-weight:800;font-size:15px}
.how__steps b{font-size:16px;line-height:1.3}
.how__steps span{font-size:14px;line-height:1.55;color:var(--muted)}
@media(max-width:840px){.how{grid-template-columns:1fr;gap:16px}.how__steps{grid-template-columns:1fr}.how__steps li{grid-template-columns:34px 1fr;column-gap:14px;padding:16px}.how__steps li::before{grid-row:1/3}}

/* Objetivo: acción explícita junto a los filtros */
.active-filter--action{background:var(--green);color:#fff;border-color:var(--green)}
.active-filter{min-height:40px}
.copy-code-button{min-height:40px}
.modal-code-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ===== Cotizador: personalización, arte y precios ===== */
.print-block{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff}
.print-block__head{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.print-block__head b{font-size:15px}
.print-block__head span{font-size:13px;color:var(--muted)}
.print-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.print-grid label,.print-note{display:grid;gap:6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.print-grid select,.print-grid input,.print-note input{width:100%;min-height:46px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:#fff;color:var(--ink);font-size:16px;font-weight:500;letter-spacing:0;text-transform:none}
.print-grid select:disabled,.print-grid input:disabled{opacity:.45;cursor:not-allowed}
.print-grid select:focus-visible,.print-grid input:focus-visible,.print-note input:focus-visible{outline:2px solid var(--green);outline-offset:1px}

.art-block{display:grid;gap:8px;padding:16px;border:1px dashed var(--line-strong,var(--line));border-radius:18px;background:var(--green-pale)}
.art-block__head{display:grid;gap:2px}
.art-block__head b{font-size:15px}
.art-block__head span{font-size:13px;color:var(--muted);line-height:1.5}
.art-drop{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:1px solid var(--green);border-radius:999px;background:#fff;color:var(--green);font-size:14px;font-weight:800;cursor:pointer;width:max-content;transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease}
.art-drop:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(21,93,71,.14)}
.art-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.art-drop:focus-within{outline:2px solid var(--green);outline-offset:2px}
.art-status{margin:0;font-size:13px;font-weight:700;color:var(--green);min-height:18px}
.art-status[data-state="error"]{color:var(--danger)}

.price-block{display:grid;gap:10px}
.price-block .btn{width:100%}
.price-panel{display:grid;gap:10px;padding:16px;border:1px solid var(--line);border-radius:18px;background:#fff;animation:price-in .28s ease both}
@keyframes price-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.price-panel{animation:none}}
.price-line{display:grid;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.price-line:last-of-type{border-bottom:0;padding-bottom:0}
.price-line__head{display:grid;gap:2px}
.price-line__head span{font-size:14px;font-weight:800;line-height:1.3}
.price-line__head small{font-size:12px;color:var(--muted)}
.price-line__unit{font-size:15px;font-variant-numeric:tabular-nums}
.price-line__unit b{font-size:19px;color:var(--green)}
.price-line__tiers summary{font-size:13px;font-weight:800;color:var(--green);cursor:pointer;min-height:36px;display:flex;align-items:center}
.price-line__tiers ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:4px}
.price-line__tiers li{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-variant-numeric:tabular-nums;padding:6px 10px;border-radius:10px;background:var(--paper-2,#f1f3ee)}
/* La fila de entrega nunca tuvo estilo propio y el monto quedaba pegado a la etiqueta. */
.price-logistics{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;font-size:14px;color:var(--muted)}
.price-logistics b{color:var(--ink);font-weight:800;font-variant-numeric:tabular-nums}
.price-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:10px;border-top:2px solid var(--ink)}
.price-total span{font-size:14px;font-weight:800}
.price-total b{font-family:var(--serif);font-size:26px;font-variant-numeric:tabular-nums}
.price-note,.price-pending{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.price-pending{color:var(--gold,#8a6d1f);font-weight:700}
@media(max-width:560px){.print-grid{grid-template-columns:1fr}}

/* =========================================================
   Dirección visual: "taller de marca"
   Editorial + técnico. Jerarquía por peso y espacio, no por ruido.
   El movimiento explica (de dónde viene el contenido), no decora.
   ========================================================= */

/* 1. Ritmo y jerarquía --------------------------------------------------- */
.section{padding:clamp(56px,7vw,96px) 0}
.section-head h2,.catalog-intro h2,.business-panel__intro h2{letter-spacing:-.025em}
.kicker,.eyebrow{display:inline-flex;align-items:center;gap:8px}
.kicker::before,.eyebrow::before{content:"";width:18px;height:2px;background:var(--green);border-radius:2px}
.section-head{align-items:end;position:relative}

/* Índice editorial: numerar las secciones ordena la lectura y da oficio. */
.section-index{position:absolute;right:0;top:-6px;font-family:var(--serif);font-size:clamp(46px,5vw,74px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(176,138,79,.42);pointer-events:none;user-select:none}
.section-head>div{position:relative;z-index:1}


/* 2. Tarjetas de producto ------------------------------------------------
   El producto manda: fondo neutro con viñeta, sombra propia bajo la pieza,
   y la acción toma color de marca al acercarse. */
.product-card{position:relative;border:1px solid var(--line);background:#fff;box-shadow:var(--elev-1);transition:border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.product-card:hover{border-color:rgba(21,93,71,.26);box-shadow:var(--elev-2);transform:translateY(-4px)}
.product-card__image{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 12%,#fdfdfb 0%,#f1f3ee 62%,#e7eae4 100%)}
.product-card__image::after{content:"";position:absolute;inset:auto 18% 9% 18%;height:12px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(13,32,25,.16),transparent 72%);opacity:0;transition:opacity var(--dur-2) var(--ease);pointer-events:none}
.product-card:hover .product-card__image::after{opacity:1}
.product-card__image img{position:relative;z-index:1;transition:transform var(--dur-3) var(--ease-out)}
.product-card:hover .product-card__image img{transform:scale(1.055) translateY(-3px)}
.product-card__add{transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.product-card:hover .product-card__add{background:var(--green);box-shadow:0 6px 14px rgba(20,23,26,.2)}
.product-card.is-selected{border-color:var(--green)}

/* Sello de mínimo: responde la pregunta que todo cliente B2B hace primero. */
.product-card__stamp{position:absolute;top:11px;left:11px;z-index:3;display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 11px;border-radius:999px;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid rgba(11,26,21,.07);font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--gold-ink);box-shadow:var(--elev-1)}
.product-card__stamp svg{font-size:11px}

/* "Ver detalle" se insinúa sobre la imagen solo con puntero fino. */
.product-card__peek{position:absolute;left:11px;right:11px;bottom:11px;z-index:2;height:36px;border-radius:11px;background:rgba(11,26,21,.82);backdrop-filter:blur(10px);color:#fff;font-size:12px;font-weight:800;letter-spacing:.05em;display:none;align-items:center;justify-content:center;gap:6px;opacity:0;transform:translateY(8px);transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);pointer-events:none}
@media(hover:hover) and (pointer:fine){
  .product-card__peek{display:flex}
  .product-card:hover .product-card__peek,.product-card:focus-within .product-card__peek{opacity:1;transform:none}
}

/* 3. Señales de valor: volumen y ahorro en oro, precio en verde */
.tier-flag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--gold,#8a6d1f);background:rgba(176,138,79,.12);border-radius:999px;padding:4px 10px}
.price-line__tiers li[data-best]{background:rgba(21,93,71,.10);font-weight:800}
.price-line__tiers li b{color:var(--green)}
.price-total b{letter-spacing:-.02em}

/* 4. Movimiento: entra desde donde vive, una sola vez, corto --------------- */
.reveal{opacity:1}
.js-motion .reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease-out);transition-delay:var(--reveal-delay,0ms)}
.js-motion .reveal.is-in{opacity:1;transform:none}
/* Variantes de entrada: el contenido llega desde el lado que le corresponde. */
/* Las variantes se enganchan a .reveal, que solo pone el observador. Si se escriben por atributo,
   un elemento dibujado después del arranque queda invisible para siempre: pasó con las familias. */
.js-motion .reveal[data-reveal="izq"]{transform:translateX(-22px)}
.js-motion .reveal[data-reveal="der"]{transform:translateX(22px)}
.js-motion .reveal[data-reveal="escala"]{transform:scale(.965)}
.js-motion .reveal[data-reveal].is-in{opacity:1;transform:none}

/* Entrada del hero: cada pieza entra en orden, no todas de golpe. */
.js-motion .hero [data-enter]{opacity:0;transform:translateY(18px);animation:entrar .8s var(--ease-out) forwards;animation-delay:calc(var(--enter,0)*90ms + 80ms)}
@keyframes entrar{to{opacity:1;transform:none}}

/* Profundidad al desplazar y al mover el cursor (lo aplica src/lib/motion.js). */
[data-parallax]{transform:translate3d(0,var(--parallax-y,0),0);will-change:transform}
[data-tilt]{transition:transform var(--dur-3) var(--ease-out)}
.hero-stage:hover [data-tilt]{transition:transform var(--dur-1) linear}

@media(prefers-reduced-motion:reduce){
  .js-motion .reveal,.js-motion [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .js-motion .hero [data-enter]{opacity:1;transform:none;animation:none}
  [data-parallax],[data-tilt]{transform:none!important}
  .product-card,.product-card__image img,.product-card__add,.art-drop,.btn{transition:none!important}
  .product-card:hover{transform:none}
  .price-panel{animation:none!important}
  html{scroll-behavior:auto}
}

/* 5. Botón principal con más presencia */
.btn--primary,.btn--whatsapp{box-shadow:0 6px 16px rgba(20,23,26,.18)}
.btn--primary:hover,.btn--whatsapp:hover{transform:translateY(-1px)}
.btn{transition:transform var(--dur-1) ease,box-shadow var(--dur-1) ease,background var(--dur-1) ease}

/* 6. Foco visible y consistente en toda la página */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:6px}

/* 7. Encabezado: se achica al bajar y muestra cuánto falta de página ------- */
.site-header{transition:background var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.site-header.is-compact{background:rgba(246,244,238,.93);box-shadow:0 8px 30px rgba(13,32,25,.06);border-color:var(--line)}
/* El alto de la barra sí cambia (gana espacio de lectura) y lo anima la regla base de .nav.
   El logo se achica con transform: no toca el flujo, así el contenido de abajo no salta. */
.site-header.is-compact .nav{height:62px}
.brand img{transform-origin:left center;transition:transform var(--dur-2) var(--ease)}
.site-header.is-compact .brand img{transform:scale(.77)}
.header-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--green),var(--gold));opacity:0;transition:opacity var(--dur-2) var(--ease)}
.site-header.is-compact .header-progress{opacity:1}

/* La sección que se está viendo queda marcada en el menú. */
.nav__links a{transition:color var(--dur-1) var(--ease)}
.nav__links a.is-current{color:var(--green)}
.nav__links a.is-current::after{right:0}

/* 8. Hero: el titular se subraya solo y la escena respira ------------------ */
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.07em;border-radius:99px;background:linear-gradient(90deg,var(--gold),rgba(176,138,79,.25));transform-origin:left}
.js-motion .hero h1 em::after{transform:scaleX(0);animation:subrayar .9s var(--ease-out) .75s forwards}
@keyframes subrayar{to{transform:scaleX(1)}}
.stage-card[data-tilt]{transform:translate3d(var(--tilt-x,0),var(--tilt-y,0),0) rotate(calc(var(--rot,0deg) + var(--tilt-r,0deg)))}
.stage-card--main[data-tilt]{--rot:-1.2deg}
.stage-card--top[data-tilt]{--rot:3deg}
.stage-card--bottom[data-tilt]{--rot:1.2deg}
.stage-card--accent[data-tilt]{--rot:2.4deg}
.stage-card--accent:not([data-tilt]){transform:rotate(2.4deg)}

/* 9. Volver arriba: aparece cuando ya se recorrió bastante ----------------- */
.to-top{position:fixed;right:18px;bottom:88px;z-index:45;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(12px);color:var(--ink);display:grid;place-items:center;box-shadow:var(--elev-1);opacity:0;transform:translateY(10px) scale(.92);pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{box-shadow:var(--elev-2);color:var(--green)}
.to-top svg{font-size:18px;transform:rotate(-90deg)}
@media(min-width:861px){.to-top{right:26px;bottom:26px}}
@media(prefers-reduced-motion:reduce){.to-top{transition:none}}

/* ===== Buscar por presupuesto ===== */
.budget-section{padding:clamp(40px,6vw,72px) 0}
/* La herramienta que nos diferencia: tiene que verse y sentirse como una herramienta. */
.budget{position:relative;display:grid;gap:18px;padding:clamp(24px,3.4vw,40px);border-radius:30px;color:#fff;overflow:hidden;
  background:
    radial-gradient(120% 140% at 8% -10%,rgba(31,122,94,.55) 0%,transparent 58%),
    linear-gradient(160deg,#0f2620 0%,var(--ink) 55%,#08150f 100%);
  box-shadow:var(--elev-3)}

.budget::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(176,138,79,.75),transparent)}
.budget>*{position:relative;z-index:1}
.budget .kicker{color:#9cc8b8}
.budget .kicker::before{background:#9cc8b8}
.budget__intro h2{margin:8px 0 6px;font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.budget__intro p{margin:0;max-width:58ch;color:#c3d2cb;font-size:15px;line-height:1.6}
/* Una sola rejilla con áreas nombradas: en escritorio los campos y el botón van en fila;
   en celular los atajos suben antes del botón y nada se sale de la tarjeta. */
.budget__tool{display:grid;gap:16px 12px;align-items:end;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  grid-template-areas:"monto gente accion" "chips chips chips" "lectura lectura lectura"}
.budget__cell--monto{grid-area:monto}.budget__cell--gente{grid-area:gente}
.budget__cell--accion{grid-area:accion}.budget__cell--chips{grid-area:chips}.budget__cell--lectura{grid-area:lectura}
.budget__tool label{min-width:0;display:grid;gap:6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#9fb3aa}
/* El monto es el dato protagonista: número grande, símbolo fijo, cifras de ancho parejo. */
.budget__field{position:relative;display:flex;align-items:center;gap:8px;min-width:0;min-height:60px;border:1px solid rgba(255,255,255,.18);border-radius:16px;background:rgba(255,255,255,.06);padding:0 16px;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.budget__field:focus-within{border-color:rgba(156,200,184,.85);background:rgba(255,255,255,.1)}
.budget__field i{font-style:normal;font-size:19px;color:#9cc8b8;font-weight:800;flex:0 0 auto}
.budget__tool input{flex:1;min-width:0;min-height:56px;border:0;border-radius:0;background:transparent;color:#fff;padding:0;font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.budget__tool input:focus-visible{outline:0}
.budget__tool input::-webkit-outer-spin-button,.budget__tool input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Atajos: en celular nadie quiere teclear 500000. */
.budget__quick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.budget__quick-label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#7e938a}
.budget__quick-sep{width:1px;height:18px;background:rgba(255,255,255,.14);margin:0 4px}
.budget__quick button{min-height:38px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#dfe9e4;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.budget__quick button:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-1px)}
.budget__quick button.is-active{background:#9cc8b8;border-color:#9cc8b8;color:var(--ink)}

/* Respuesta inmediata mientras escribe, antes de pedir nada al servidor. */
.budget__perhead{margin:0;font-size:15px;color:#c3d2cb;display:flex;align-items:center;gap:8px}
.budget__perhead::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--gold)}
.budget__perhead b{color:#fff;font-size:20px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.budget__perhead.is-low b{color:#e8d9bd}
.budget__tool input::placeholder{color:#7b8d85}
.budget__tool input:focus-visible{outline:2px solid #9cc8b8;outline-offset:2px}
.budget__tool .btn{min-height:60px;padding:0 24px;white-space:nowrap;box-shadow:0 10px 24px rgba(20,23,26,.22)}
.budget-results{display:grid;gap:12px}
.budget-results__head{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;color:#c3d2cb;font-size:14px}
.budget-results__head b{color:#fff;font-size:18px;font-variant-numeric:tabular-nums}
.budget-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.budget-card{display:grid;gap:8px;padding:14px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.budget-card img{width:100%;height:120px;object-fit:contain;background:#fff;border-radius:12px;mix-blend-mode:normal}
.budget-card b{font-size:14px;line-height:1.3}
.budget-card small{font-size:12px;color:#a9bdb4}
.budget-card__price{font-size:17px;font-weight:800;color:#9cc8b8;font-variant-numeric:tabular-nums}
.budget-card__price span{display:block;font-size:12px;font-weight:600;color:#c3d2cb}
.budget-card button{min-height:44px;border:0;border-radius:12px;background:#fff;color:var(--ink);font-size:13px;font-weight:800;cursor:pointer}
.budget-empty{color:#e8d9bd;font-size:15px;line-height:1.6;margin:0}
.budget-note{margin:0;color:#9fb3aa;font-size:12px;line-height:1.5}
@media(max-width:840px){.budget__tool{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"monto gente" "chips chips" "accion accion" "lectura lectura"}}
@media(max-width:560px){.budget__tool{grid-template-columns:minmax(0,1fr);grid-template-areas:"monto" "gente" "chips" "accion" "lectura"}.budget__quick{gap:7px}}

/* Mínimo vigente junto al título de cantidad: cambia al elegir marcaje. */
.qty-section__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qty-min{font-size:12px;font-weight:700;color:var(--gold-ink);white-space:nowrap}

/* Formas de pago dentro del panel de precios: el cliente compara y elige. */
.pay-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:14px}
.pay-option{position:relative;display:grid;gap:5px;text-align:left;padding:14px;border-radius:16px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),transform var(--dur-1) var(--ease)}
.pay-option:hover{border-color:rgba(21,93,71,.3);box-shadow:var(--elev-1);transform:translateY(-1px)}
.pay-option.is-active{border-color:var(--green);box-shadow:0 0 0 2px rgba(21,93,71,.12)}
.pay-option__head{display:flex;align-items:baseline;gap:8px}
.pay-option__head b{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.02em;color:var(--ink)}
.pay-option__head i{font-style:normal;font-size:12px;font-weight:800;color:var(--green);background:var(--green-pale);border-radius:999px;padding:3px 8px}
.pay-option__label{font-size:13px;font-weight:700;color:var(--ink)}
.pay-option__split{font-size:12px;color:var(--muted);line-height:1.4}
.pay-option.is-active::after{content:"";position:absolute;inset:auto 14px 0 14px;height:2px;border-radius:2px;background:var(--green)}

/* Aviso de marcaje: lo que NO incluye el estimado, dicho antes de que pregunten. */
.price-print{margin:10px 0 0;padding:11px 13px;border-radius:12px;background:var(--gold-soft);color:var(--gold-ink);font-size:13px;line-height:1.5}
.price-print b{color:var(--ink)}

/* Artes del logo: una tarjeta por logo con todo lo que el proveedor necesita para cotizar. */
.art-list{display:grid;gap:12px;margin:12px 0}
.art-card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:14px;display:grid;gap:12px}
.art-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.art-card__head b{font-size:13px;letter-spacing:.02em}
.art-card__remove{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.art-card__remove:hover{color:var(--danger);border-color:rgba(168,73,61,.35)}
.art-card__file{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.art-file{display:inline-flex;align-items:center;gap:8px;font-size:13px;min-width:0}
.art-file b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(46vw,260px)}
.art-file i{font-style:normal;font-size:11px;font-weight:800;border-radius:999px;padding:3px 8px}
.art-file__ok{background:var(--green-pale);color:var(--green)}
.art-file__warn{background:var(--gold-soft);color:var(--gold-ink)}
.art-file__swap{font-size:12px;font-weight:800;color:var(--green);cursor:pointer;text-decoration:underline}
.art-file__swap input,.art-card__file .art-drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.art-warn{flex:1 1 100%;margin:0;font-size:12px;line-height:1.5;color:var(--gold-ink)}
.art-card__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.art-card__grid label{display:grid;gap:5px;font-size:12px;font-weight:700;color:#4c5853;min-width:0}
.art-card__grid input,.art-card__grid select{min-height:44px;border:1px solid var(--line);border-radius:11px;background:#fff;padding:0 11px;font-size:14px;font-family:inherit;color:var(--ink);min-width:0}
.art-card__grid input:focus-visible,.art-card__grid select:focus-visible{border-color:var(--green);outline:2px solid transparent;box-shadow:var(--ring)}
.art-card__wide{grid-column:1/-1}
.art-add{width:100%;justify-content:center}
.art-add[disabled]{opacity:.5;cursor:not-allowed}

/* Texto solo para lectores de pantalla. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Menú de familias en el encabezado: navegar sin bajar hasta el mosaico. */
.nav__drop{position:relative}
.nav__drop-btn{border:0;background:transparent;font:inherit;color:inherit;display:inline-flex;align-items:center;gap:5px;padding:12px 0;cursor:pointer;position:relative}
.nav__drop-btn svg{font-size:13px;transform:rotate(90deg);transition:transform var(--dur-2) var(--ease);color:var(--green)}
.nav__drop-btn[aria-expanded="true"]{color:var(--green)}
.nav__drop-btn[aria-expanded="true"] svg{transform:rotate(-90deg)}
.nav__drop-btn::after{content:"";position:absolute;left:0;right:100%;bottom:5px;height:1px;background:var(--green);transition:right var(--dur-1)}
.nav__drop-btn:hover::after,.nav__drop-btn[aria-expanded="true"]::after{right:0}
.nav__menu{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-6px);width:min(520px,86vw);padding:14px;border-radius:20px;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);border:1px solid var(--line);box-shadow:var(--elev-2);display:grid;grid-template-columns:repeat(2,1fr);gap:4px;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease);z-index:60}
.nav__menu[data-open]{opacity:1;transform:translateX(-50%);pointer-events:auto}
.nav__menu a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:12px;font-size:13px;font-weight:700;color:var(--ink);transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.nav__menu a:hover{background:var(--green-pale);color:var(--green)}
.nav__menu a i{font-style:normal;font-size:11px;font-weight:700;color:var(--muted)}
.nav__menu a:hover i{color:var(--green)}

/* Por qué Nexo: cada punto responde algo que la competencia deja sin responder. */
.edge-section{padding:clamp(36px,5vw,64px) 0 0}
.edge-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.edge{background:var(--paper);padding:24px 22px;display:grid;gap:7px;align-content:start;position:relative;transition:background var(--dur-2) var(--ease)}
.edge:hover{background:#fff}
.edge__num{font-family:var(--serif);font-size:13px;color:var(--gold);letter-spacing:.06em}
.edge b{font-size:16px;line-height:1.25;letter-spacing:-.01em}
.edge span:last-child{font-size:13px;line-height:1.6;color:var(--muted)}
@media(max-width:560px){.edge{padding:20px 18px}.edge b{font-size:15px}}

/* Disponibilidad en la ficha: es la primera pregunta de quien tiene fecha. */
.stock-note{display:flex;align-items:flex-start;gap:9px;margin:12px 0 0;padding:11px 13px;border-radius:12px;background:var(--green-pale);font-size:13px;line-height:1.55;color:#33453e}
.stock-note svg{font-size:16px;color:var(--green);flex:0 0 auto;margin-top:1px}
.stock-note b{color:var(--ink)}

/* El menú entra en orden al cargar, no todo de golpe. */
.js-motion [data-nav-enter]>*:not(.nav__indicador){opacity:0;transform:translateY(-8px);animation:navEntra .5s var(--ease-out) forwards}
.js-motion [data-nav-enter]>*:not(.nav__indicador):nth-child(1){animation-delay:.10s}
.js-motion [data-nav-enter]>*:not(.nav__indicador):nth-child(2){animation-delay:.16s}
.js-motion [data-nav-enter]>*:not(.nav__indicador):nth-child(3){animation-delay:.22s}
.js-motion [data-nav-enter]>*:not(.nav__indicador):nth-child(4){animation-delay:.28s}
.js-motion [data-nav-enter]>*:not(.nav__indicador):nth-child(5){animation-delay:.34s}
@keyframes navEntra{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.js-motion [data-nav-enter]>*:not(.nav__indicador){opacity:1;transform:none;animation:none}}

/* La cotización formal es la acción principal; WhatsApp queda como consulta rápida. */
.btn--request{width:100%;min-height:52px;font-size:14px}
.drawer__promise{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}
.drawer-clear--wa{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:800}
.drawer-clear--wa svg{font-size:14px}

/* Adjuntar el logo desde la ficha, donde el cliente ya está definiendo el marcaje. */
.print-art{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:13px 14px;border:1px dashed var(--line-strong);border-radius:14px;background:rgba(255,255,255,.5)}
.print-art__info{display:grid;gap:3px;min-width:0;flex:1 1 220px}
.print-art__info b{font-size:13px}
.print-art__info span{font-size:12px;line-height:1.5;color:var(--muted)}
.print-art__drop{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--green);background:#fff;color:var(--green);font-size:13px;font-weight:800;cursor:pointer;max-width:100%;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.print-art__drop:hover{background:var(--green);color:#fff}
.print-art__drop svg{font-size:16px;flex:0 0 auto}
.print-art__drop span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.print-art__drop input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.print-art.is-set{border-style:solid;border-color:rgba(21,93,71,.3);background:var(--green-pale)}
.print-art.is-set .print-art__drop{background:var(--green);color:#fff}

/* =========================================================================
   DIRECCIÓN "ÁREA DE MARCAJE"
   El recuadro punteado de las láminas del proveedor deja de ser un defecto y
   pasa a ser el sistema: cada producto se muestra dentro de su área marcable.
   El número del pedido está siempre a la vista. El color de familia es acento,
   nunca fondo: las fotos traen fondo blanco horneado y sobre color se rompen.
   ========================================================================= */

/* 1. Titulares en la familia de display ------------------------------------
   Esta regla forzaba todos los titulares a la misma familia del texto, con peso 800.
   Era la decisión de "una sola familia" del sistema anterior, y pisaba la variable de
   display que ya existía: por eso la página no tenía contraste tipográfico ninguno.
   Bricolage Grotesque es de tamaño óptico variable — a 78 px aprieta solo y no necesita
   tanto peso para pesar. */
.hero h1,.section-head h2,.catalog-intro h2,.business-panel__intro h2,
.season-card h2,.budget__intro h2,.how__intro h2,.modal__heading h2,.drawer__head h2{
  font-family:var(--display);font-optical-sizing:auto;font-weight:700;
  letter-spacing:-.035em;line-height:1.02}
.hero h1{font-size:clamp(46px,5.4vw,78px);max-width:16ch}
.hero h1 em{font-style:normal;color:var(--ink)}
.hero h1 em::after{display:none}          /* el subrayado dorado era del sistema anterior */
.section-head h2,.catalog-intro h2{font-size:clamp(30px,3.6vw,50px)}
.catalog-intro h2 em{font-style:normal;color:var(--muted);font-weight:700}
.stage-product__price,.stage-note span{font-family:var(--sans);font-style:normal}

/* Las etiquetas en mayúsculas sobre cada bloque eran ruido: quedan como rótulo fino. */
.kicker,.eyebrow{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.kicker::before,.eyebrow::before{width:14px;height:1px;background:var(--registro);border-radius:0}
.section-index{display:none}              /* numerar lo que no es secuencia confunde */

/* 2. La pieza: producto dentro de su área de marcaje ----------------------- */
.product-card__image{
  background:linear-gradient(168deg,#fcfcfa 0%,#f2f1ec 100%)}
.product-card__image::before{content:"";position:absolute;inset:13px;border:1px dashed var(--registro-suave);pointer-events:none;z-index:1;
  transition:border-color var(--dur-2) var(--ease),inset var(--dur-2) var(--ease)}
.product-card:hover .product-card__image::before{border-color:var(--registro)}
.product-card__image::after{display:none}  /* la sombra bajo la pieza peleaba con la cuadrícula */
.product-card{border-radius:4px}
.product-card__add{border-radius:3px}
.product-card__code{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.02em;
  color:var(--registro);background:transparent;padding:0;border-radius:0}
.product-card__price b,.product-card__title{font-family:var(--sans)}
.product-card__price b{font-weight:800;letter-spacing:-.025em}
.product-card__stamp{border-radius:3px;background:rgba(255,255,255,.94);color:var(--ink);
  border-color:var(--line-strong);font-weight:600;letter-spacing:0}
.product-card__stamp svg{color:var(--registro)}
.product-card__peek{border-radius:3px}

/* Acento de familia: una barra, no un fondo. */
.product-card{border-top:2px solid var(--fam,transparent)}
[data-fam="Bebidas"]{--fam:#0e6b58}
[data-fam="Textil y exteriores"]{--fam:#b5472f}
[data-fam="Bolsos y viaje"]{--fam:#1f4b7a}
[data-fam="Oficina y escritura"]{--fam:#c98a1e}
[data-fam="Tecnología"]{--fam:#4a3f84}
[data-fam="Regalos y otros"]{--fam:#7a2f4a}
[data-fam="Herramientas y accesorios"]{--fam:#3f5b44}

/* 3. El número siempre visible: el pedido en curso viaja en el encabezado --- */
.cart-button{border-radius:4px;background:var(--ink);gap:10px}
.cart-total{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.01em;font-size:13px}
.cart-total[hidden]{display:none}
/* El contador en ámbar SOLO cuando hay algo pendiente: es el único punto de la pantalla
   que pide atención ahora mismo, y por eso se le reserva ese color. En cero es neutro,
   porque un contador vacío no tiene nada que pedir. Antes usaba --registro, que en este
   sistema es marca técnica —códigos, medidas— y no estado del pedido. */
.cart-button b{border-radius:3px;background:rgba(255,255,255,.16);color:#fff;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.cart-button b.tiene-algo{background:var(--gold);color:var(--ink);font-weight:700}

/* 4. Superficies y botones: esquinas de documento, no de aplicación -------- */
.btn,.hero-search,.hero-search button,.catalog-search,.filter-trigger,.sort-select,
.pay-option,.art-card,.edge-grid,.category-card,.editorial-card,.business-panel,
.budget,.modal__panel,.drawer__panel,.season-card,.how__steps li{border-radius:6px}
.quick-intents button,.catalog-shortcuts button,.budget__quick button{border-radius:999px}
.btn--primary{background:var(--green)}
.edge__num{font-family:var(--sans);font-weight:600;font-size:12px;color:var(--registro)}

/* 5. Movimiento: un solo momento orquestado, el trazo del área de marcaje --- */
@media(hover:hover) and (pointer:fine){
  .js-motion .product-card__image::before{inset:19px}
  .js-motion .product-card.is-in .product-card__image::before{inset:13px}
}

/* Segunda línea del titular en peso medio: el contraste lo da la tipografía, no el color. */
.hero h1 em,.catalog-intro h2 em{font-weight:500;letter-spacing:-.03em}
/* La familia del producto se lee, no se grita. */
.product-kicker{text-transform:none;letter-spacing:.01em;font-size:12px;font-weight:600;color:var(--fam,var(--muted))}
.editorial-card__content small,.category-card__copy span,.stage-product__info small{text-transform:none;letter-spacing:.01em}

/* La barra de diferenciadores no puede cortarse: en pantallas angostas se muestra
   una sola a la vez, rotando, en vez de recortar la tercera a media palabra. */
.announcement__inner{overflow:hidden}
@media(max-width:700px){
  .announcement__inner{gap:0;justify-content:center}
  .announcement__dot{display:none}
  .announcement__inner span{display:none}
  .announcement__inner span:first-child{display:block;animation:rotarAviso 12s infinite}
}
.announcement__inner span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@keyframes rotarAviso{0%,100%{opacity:1}46%,54%{opacity:0}}
@media(prefers-reduced-motion:reduce){.announcement__inner span:first-child{animation:none!important}}

/* =========================================================================
   Correcciones de la auditoría técnica (impeccable audit).
   Aclarar el papel dejó varios grises por debajo de AA: se corrigen en el token,
   no en cada uso. Y se quitan los recursos que el detector marca como firma
   genérica y que además ya no pertenecen a esta dirección.
   ========================================================================= */

/* 1. Contraste: todos los grises verificados contra el papel nuevo (#fbfaf7). */
:root{
  --muted:#636b66;        /* 5,26:1  (antes 4,44:1) */
  --muted-2:#717975;      /* 4,29:1 en texto grande; no se usa en cuerpo */
}
.hero__trust{color:var(--muted)}
.business-card small{color:#b9c6c0}
.season-card__eyebrow,.budget .kicker,.stage-note span{color:#cfe4db}
.budget .kicker::before{background:#cfe4db}

/* 2. Texto funcional por debajo del piso legible. */
.nav-icon span,.stage-product__info small,.business-card small,.stage-note small{font-size:11px}
.announcement__inner{font-size:12px;letter-spacing:.01em}
.hero__trust{font-size:13px}
.stage-product__info small{text-transform:none;letter-spacing:.02em}

/* 3. La barra superior tenía el texto pegado a los bordes. */
.announcement__inner{padding:7px 0;height:auto;min-height:34px}

/* 4. Fuera los recursos que ya no son de esta dirección:
      el resplandor radial del hero y la sombra de color sobre fondo oscuro. */
.budget{box-shadow:0 1px 2px rgba(20,23,26,.06),0 18px 44px rgba(20,23,26,.14)}

/* 5. La cuadrícula del marco era decorativa: no codificaba ninguna medida real,
      porque la escala cambia con cada foto. Queda solo el área de marcaje,
      que sí dice algo: dónde entra el logo. */

/* La imagen del producto aparece al abrir la ficha, no antes. */
#modalImage[hidden]{display:none}

/* =========================================================================
   Rendimiento del scroll (medido, no supuesto).
   El desenfoque de fondo en elementos fijos se repinta en cada cuadro mientras
   se hace scroll. Con dos barras fijas desenfocadas el costo eran 9 cuadros
   lentos de cada 46; sin ellas, 2. Se quita donde la barra está siempre en
   pantalla y se deja donde aparece un instante (capas, sellos, menús).
   ========================================================================= */
.site-header{backdrop-filter:none;background:rgba(251,250,247,.97)}
.site-header.is-compact{background:rgba(251,250,247,.985)}
.catalog-toolbar{backdrop-filter:none;background:rgba(251,250,247,.97)}
.mobile-nav{backdrop-filter:none;background:#fff}
.product-card__stamp{backdrop-filter:none}
.product-card__fav{backdrop-filter:none;background:rgba(255,255,255,.95)}

/* Quien navega con teclado no tiene por qué recorrer el encabezado entero: el primer tabulador
   ofrece ir directo al catálogo. Fuera de foco no ocupa lugar ni se ve. */
.saltar-contenido{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;
  padding:11px 18px;border-radius:0 0 12px 12px;font-size:13px;font-weight:600;text-decoration:none;
  transition:top var(--dur-1) ease}
.saltar-contenido:focus-visible{top:0}
@media (prefers-reduced-motion:reduce){.saltar-contenido{transition:none}}


/* ---- Tarjeta de catálogo: el precio manda -------------------------------------------
   El precio es el único dato que ninguna competencia en Costa Rica publica, así que es
   lo más grande de la tarjeta. Se fueron la categoría, el contador de variantes y el
   sello "Desde 25 u." que se repetía idéntico en las 48 tarjetas de la página. */
/* En columna, no en grid: así el precio se puede empujar al fondo y quedar alineado
   entre tarjetas de distinta altura de título. Sin eso, los precios de una misma fila
   quedan a alturas distintas y la grilla deja de ser escaneable. */
.product-card__body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:8px}
.product-card__title{font-size:14px;font-weight:600;line-height:1.28;letter-spacing:-.012em;min-height:0}

.product-card__meta{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted);
  min-width:0}
.product-card__code{font:500 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.02em;
  background:none;border-radius:0;padding:0;color:var(--muted);flex:none}
/* La familia se lee por el punto de color, no por otra línea de texto gris. */
.product-card__fam{position:relative;padding-left:12px;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.product-card__fam::before{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;
  margin-top:-2.5px;border-radius:50%;background:var(--fam,var(--muted))}

.product-card__price{margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.product-card__price b{font-family:var(--display);font-optical-sizing:auto;
  font-size:23px;font-weight:700;letter-spacing:-.04em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1}
.product-card__price small{font-size:11px;color:var(--muted)}
/* Sin precio en la tarjeta: lo que se comunica es el mínimo de compra, que sí es público
   y es lo que el cliente necesita para decidir si le sirve. */
.product-card__price--minimo b{font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:-.005em;color:var(--ink)}
.product-card__price--minimo small{font-size:11.5px;color:var(--muted)}

.product-card__actions{display:grid;grid-template-columns:1fr}
/* Con contorno, no relleno: 48 botones negros sólidos en pantalla le ganaban al precio,
   que es lo que la tarjeta tiene que decir primero. Se llena al pasar el mouse. */
.product-card__add{height:38px;font-size:12px;font-weight:600;letter-spacing:0;
  background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:10px;
  position:relative;overflow:hidden;transition:color var(--dur-1) ease,border-color var(--dur-1) ease}
.product-card__add{isolation:isolate}
.product-card__add>span{position:relative;z-index:1}
.product-card__add::before{content:"";position:absolute;inset:0;background:var(--ink);
  transform:translateY(101%);transition:transform var(--dur-2) var(--ease-out);z-index:0}
.product-card__add:hover{color:#fff}
.product-card__add:hover::before{transform:translateY(0)}
.product-card__add.is-selected{background:var(--ink);color:#fff}
@media (prefers-reduced-motion:reduce){
  .product-card__add,.product-card__add::before{transition:none}
  .product-card__add:hover{background:var(--ink);color:#fff}
}

/* Nada de barra de familia al pasar el mouse: la tarjeta ya la lleva arriba y el punto
   junto al nombre la repite. Tres señales para el mismo dato es ruido, y una menos es
   además un repintado menos por tarjeta. */

/* Los tamaños de celular respetan el piso de legibilidad que ya exige el sitio y que
   vigila tests/e2e/a12-mobile.spec.mjs: título ≥14 px, código ≥12 px, botón ≥13 px,
   y como mucho un 5% de los textos por debajo de 12 px. */
@media (max-width:860px){
  .product-card__title{font-size:14px}
  .product-card__meta{font-size:12px;gap:6px}
  .product-card__code{font-size:12px}
  .product-card__price b{font-size:20px}
  .product-card__price small{font-size:12px}
}
@media (max-width:560px){
  .product-card__body{padding:11px 11px 12px;gap:7px}
  .product-card__title{font-size:14px;line-height:1.25}
  .product-card__meta{font-size:12px;gap:0}
  .product-card__code{font-size:12px}
  /* En dos columnas el código y la familia no caben en una línea a 12 px. La familia se
     va: la barra de color del borde superior ya la dice, sin gastar ancho. */
  .product-card__fam{display:none}
  .product-card__price{padding-top:8px}
  .product-card__price b{font-size:19px}
  .product-card__price small{font-size:12px}
  .product-card__add{height:auto;min-height:44px;font-size:13px}
}


/* ---- Piso de legibilidad en celular ------------------------------------------------
   Al quitarle tres líneas a la tarjeta del catálogo, la grilla dejó de aportar cientos
   de nodos al total y quedó a la vista lo que el promedio venía tapando: 22 textos entre
   8 y 11 px repartidos por la página. En un teléfono eso no se lee. El mínimo es 12 px,
   y los botones 13, que es lo que ya exigía tests/e2e/a12-mobile.spec.mjs. */
@media (max-width:640px){
  .stage-product__info small{font-size:12px}
  .stage-product__price{font-size:12px}
  .business-card small{font-size:12px}
  .editorial-reason{font-size:12px}
  .season-card__copy p{font-size:12px}
  .filter-fields label{font-size:12px}
  .filter-trigger b{font-size:12px}
  .cart-button b,.filter-panel__actions .btn{font-size:12px}
  .btn--light,.btn--ghost,.btn--outline,.btn--primary{font-size:13px}
  .budget__cell--accion{font-size:13px}
  .load-area .btn{font-size:13px}
}



}


/* ==== Indicador del menú: una sola barra que se desliza ============================
   Antes cada enlace tenía su propio subrayado animando `right`, que es una propiedad de
   layout y no da continuidad: el subrayado aparecía y desaparecía en su sitio. Esta barra
   viaja entre enlaces con transform, sigue al mouse y vuelve sola a la sección activa. */
.nav__links{position:relative}
.nav__links a::after{display:none}          /* lo reemplaza el indicador compartido */
.nav__indicador{position:absolute;left:0;bottom:2px;height:2px;width:1px;border-radius:2px;
  background:var(--green);transform-origin:left center;pointer-events:none;
  opacity:0;transform:translateX(0) scaleX(0);
  transition:transform var(--dur-3) var(--ease-out),opacity var(--dur-1) ease}
.nav__indicador.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.nav__indicador{transition:opacity var(--dur-1) ease}}


/* ==== Vitrina del hero: el catálogo en movimiento ==================================
   Tres columnas de producto a distinta velocidad y en direcciones alternas. Reemplaza la
   pieza única con el rectángulo de marcaje encima: ese dibujo es información de taller,
   no de portada, y se leía como un error de maquetación.

   El bucle es puro CSS: la lista va duplicada y se anima translateY de 0 a -50%, que al
   reiniciar cae en un punto idéntico. Solo transform: no dispara layout. */
/* El muro se inclina en el espacio: las columnas recorren un plano que se aleja, no una
   lista plana. Es lo que le da movimiento propio y no se parece a un carrusel de catálogo.
   Es transform puro, así que no cuesta más que la versión plana. */
.vitrina{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  height:clamp(420px,52vw,560px);overflow:hidden;
  perspective:1400px;perspective-origin:30% 50%;
  /* Se desvanece arriba y abajo para que el movimiento no tenga un corte duro. */
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 13%,#000 87%,transparent)}

.vitrina__col{transform-style:preserve-3d}
/* Cada columna se aleja un poco más que la anterior. */
.vitrina__col:nth-child(1){transform:rotateY(9deg) translateZ(-40px)}
.vitrina__col:nth-child(2){transform:rotateY(4deg) translateZ(10px)}
.vitrina__col:nth-child(3){transform:rotateY(-2deg) translateZ(-70px)}
.vitrina__cinta{display:grid;gap:14px;will-change:transform}
.vitrina__col[data-vel="lenta"] .vitrina__cinta{animation:vitrinaBaja 46s linear infinite}
.vitrina__col[data-vel="media"] .vitrina__cinta{animation:vitrinaSube 38s linear infinite}
.vitrina__col[data-vel="rapida"] .vitrina__cinta{animation:vitrinaBaja 31s linear infinite}
/* La del medio arranca desplazada para que las tres no queden alineadas. */
.vitrina__col--sube{margin-top:-40px}

@keyframes vitrinaBaja{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes vitrinaSube{from{transform:translateY(-50%)}to{transform:translateY(0)}}

/* Al pasar el mouse se detiene: si algo llama la atención, hay que poder mirarlo. */
.vitrina:hover .vitrina__cinta,
.vitrina:focus-within .vitrina__cinta{animation-play-state:paused}

.vitrina__pieza{position:relative;display:grid;gap:8px;padding:16px 14px 13px;border:0;
  background:#fff;border-radius:18px;text-align:left;pointer-events:none;
  box-shadow:0 1px 2px rgba(16,19,17,.05),0 10px 26px rgba(16,19,17,.05);
  transition:box-shadow var(--dur-2) ease}
.vitrina__pieza img{width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply}
.vitrina__pieza span{font-size:12px;line-height:1.3;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media (prefers-reduced-motion:reduce){
  .vitrina__cinta{animation:none!important}
  .vitrina{height:clamp(380px,46vw,480px)}
}
@media (max-width:860px){
  /* En celular la perspectiva estorba: el espacio es poco y deforma las fotos. */
  .vitrina{grid-template-columns:repeat(2,1fr);height:clamp(340px,70vw,420px);gap:10px;
    perspective:none}
  .vitrina__col:nth-child(1),.vitrina__col:nth-child(2),.vitrina__col:nth-child(3){transform:none}
  .vitrina__col[data-vel="rapida"]{display:none}
  .vitrina__pieza{padding:12px 11px 10px;border-radius:14px}
}

/* ==== Retícula técnica de fondo ====================================================
   Idea tomada de los fondos de patrón de 21st.dev (Dashed Grid / Dot Pattern), no de los
   de aurora o partículas: sobre un catálogo B2B esos se ven disfrazados, y además compiten
   con fotos que son casi todas navy sobre blanco.

   La retícula encaja por tema: este negocio es precisión y especificación. Es la misma
   idea del marcaje, sin el rectángulo literal encima del producto.

   Va muy tenue a propósito. Se dibuja con gradientes repetidos, sin nodos ni imágenes. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--ink) 4%, transparent) 1px, transparent 1px);
  background-size:62px 62px;
  /* Se desvanece hacia abajo: da carácter arriba y deja el catálogo limpio. */
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
  mask-image:linear-gradient(180deg,#000,transparent 82%)}
body > *{position:relative;z-index:1}

/* ==== Fondo del hero: luz que se mueve despacio ==================================
   Dos manchas de color muy tenues que se desplazan. Da profundidad sin competir con el
   producto, que es lo que tiene que mirarse. */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:120%;z-index:-1;
  background:
    radial-gradient(42% 46% at 18% 28%, color-mix(in oklab, var(--green) 16%, transparent), transparent 70%),
    radial-gradient(38% 42% at 82% 62%, color-mix(in oklab, var(--registro) 11%, transparent), transparent 70%);
  animation:respira 22s ease-in-out infinite alternate;pointer-events:none}
@keyframes respira{
  from{transform:translate3d(-2%,-1%,0) scale(1)}
  to{transform:translate3d(3%,2%,0) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){.hero::before{animation:none}}


/* ==== Barra superior en movimiento ================================================
   Era una barra quieta con tres frases. Ahora desfila de derecha a izquierda, que es lo
   que de verdad cabe en el encabezado sin robarle espacio al contenido.

   La tanda va duplicada y se anima translateX de 0 a -100%: al reiniciar, la segunda copia
   está justo donde estaba la primera, así que el bucle no tiene salto. Solo transform.
   Se detiene al pasar el mouse para poder leerla. */
.announcement{background:var(--ink);color:#e8efe9;font-size:12px;letter-spacing:.01em;
  padding-inline:0;overflow:hidden}
.announcement__pista{display:flex;width:max-content;height:34px;align-items:center}
.announcement__cinta{display:flex;align-items:center;gap:0;flex:none;
  animation:desfila 42s linear infinite}
.announcement__cinta span{padding:0 18px;white-space:nowrap}
/* Separadores neutros. Estaban en ámbar, que es el color de atención: doce puntos
   decorativos lo gastaban y dejaban de señalar nada. */
.announcement__cinta i{width:4px;height:4px;border-radius:50%;
  background:currentColor;flex:none;opacity:.34}
.announcement:hover .announcement__cinta{animation-play-state:paused}
@keyframes desfila{from{transform:translateX(0)}to{transform:translateX(-100%)}}

@media (prefers-reduced-motion:reduce){
  .announcement__cinta{animation:none}
  /* Sin movimiento, la copia duplicada sobra. */
  .announcement__cinta[aria-hidden="true"]{display:none}
}
@media (max-width:640px){
  .announcement__pista{height:30px}
  .announcement__cinta span{padding:0 13px;font-size:12px}
}


/* ==== Familias: el color de familia por fin hace algo ==============================
   Las tarjetas eran cajas grises con la foto lavada por un degradado, y encima esa foto
   era el recorte de la lámina del proveedor con "Plata" y "Negro" impresos. Ahora la foto
   va limpia sobre el color de la familia, que ya vivía en el sistema (--fam) y solo se
   usaba en una barra de 2 px arriba de la tarjeta del catálogo. */
.category-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:250px;padding:0;border:0;border-radius:20px;overflow:hidden;cursor:pointer;
  background:var(--fam,var(--green));color:#fff;text-align:left;isolation:isolate;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) ease}
.category-card:hover{transform:translateY(-6px);box-shadow:0 26px 54px rgba(16,19,17,.18)}
.category-card:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* Una veladura desde abajo para que el texto se lea sobre cualquier foto. */
.category-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(0,0,0,.28) 100%)}

/* La foto del proveedor viene sobre blanco opaco y no hay recorte transparente. Sobre un
   campo de color ese blanco se ve como un rectángulo pegado. Multiply tampoco sirve acá:
   sobre fondo oscuro ennegrecería el producto. Así que el blanco se vuelve deliberado —
   una lámina que flota sobre el color, como una ficha de producto. */
.category-card__image{position:absolute;inset:14px 14px 30% 14px;z-index:0;
  display:block;overflow:hidden;
  background:#fff;border-radius:13px;padding:14px;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
/* La imagen ocupa el contenedor entero y object-fit se encarga de encajarla; el margen
   lo da el relleno del contenedor. Con width/height en porcentaje el alto se resolvía
   contra la tarjeta —que no tiene alto definido— y el producto salía recortado. */
.category-card__image img{display:block;width:100%;height:100%;
  object-fit:contain;mix-blend-mode:normal;padding:0;
  transition:transform var(--dur-3) var(--ease-out)}
.category-card:hover .category-card__image img{transform:scale(1.07) translateY(-4px)}

.category-card__copy{position:relative;z-index:2;display:grid;gap:2px;padding:16px 18px 17px}
.category-card__copy b{font-family:var(--display);font-optical-sizing:auto;
  font-size:20px;font-weight:700;letter-spacing:-.025em;line-height:1.1}
.category-card__copy span{font-size:12.5px;opacity:.86}

@media (prefers-reduced-motion:reduce){
  .category-card,.category-card__image img{transition:none}
  .category-card:hover{transform:none}
  .category-card:hover .category-card__image img{transform:none}
}
@media (max-width:560px){
  .category-card{min-height:190px;border-radius:16px}
  .category-card__copy{padding:12px 13px 13px}
  .category-card__copy b{font-size:16px}
  .category-card__copy span{font-size:12px}
}


/* ==== Destello que sigue al cursor ================================================
   Técnica del "Spotlight Card" de 21st.dev, reescrita para CSS vanilla. Se eligió esta y
   no un fondo de aurora o partículas porque la grilla son 48 tarjetas y es el 75% del alto
   del sitio: que respondan al puntero cambia la sensación de la página entera.

   Es una capa con opacidad, no un repintado del fondo de la tarjeta: la posición viaja en
   dos variables y solo se anima `opacity`. */
.product-card,.category-card{--dx:50%;--dy:50%}
.product-card::before,.category-card::before{content:"";position:absolute;inset:0;z-index:3;
  pointer-events:none;opacity:0;transition:opacity var(--dur-2) ease;border-radius:inherit;
  background:radial-gradient(180px circle at var(--dx) var(--dy),
    color-mix(in oklab, var(--fam, var(--green)) 22%, transparent), transparent 62%)}
.product-card:hover::before,.category-card:hover::before{opacity:1}

/* La tarjeta del catálogo tiene la foto sobre fondo claro: el destello va por debajo del
   contenido para no velar el precio ni el botón. */
.product-card__body,.category-card__copy{position:relative;z-index:4}

@media (prefers-reduced-motion:reduce){
  .product-card::before,.category-card::before{display:none}
}
@media (hover:none),(pointer:coarse){
  .product-card::before,.category-card::before{display:none}
}


/* ==== Estados de interacción: lo que faltaba ======================================
   Auditado antes de escribir esto: 0 reglas `:active` en toda la hoja y 0 de estado de
   carga. Ningún botón respondía al presionarlo, y en los tres momentos donde el sitio se
   queda pensando —calcular precio, subir el arte, enviar la solicitud— no pasaba nada
   visible. Esos son justo los instantes donde el cliente duda si funcionó.

   Se aplica a TODOS los botones con `:where()`, que no suma especificidad: cualquier
   botón existente lo hereda sin reescribir sus 29 variantes. */

/* 1. Presión: el botón cede. Es el gesto que dice "te escuché".
      Con :where() no funcionaba: al no sumar especificidad, cualquier regla de hover ya
      escrita le ganaba y el botón seguía mostrando el desplazamiento del hover. La regla
      de presión tiene que pesar MÁS que la de hover, no igual. */
:where(button,.btn,[role="button"]){transition:transform var(--dur-1) var(--ease)}
button:not([disabled]):active,
.btn:not([disabled]):active,
[role="button"]:not([disabled]):active,
button:not([disabled]):hover:active,
.btn:not([disabled]):hover:active{
  transform:translateY(1px) scale(.988)}
@media (prefers-reduced-motion:reduce){
  button:not([disabled]):active,.btn:not([disabled]):active,
  button:not([disabled]):hover:active,.btn:not([disabled]):hover:active{transform:none}
}

/* 2. Deshabilitado: se ve inerte, y el cursor lo dice antes del clic. */
:where(button,.btn):disabled{opacity:.45;cursor:not-allowed}
:where(button,.btn):disabled:active{transform:none}

/* 3. Ocupado. `aria-busy` lo anuncia al lector de pantalla; la barra lo muestra a quien
      ve. No se usa un giro: una barra que recorre el botón dice "esto sigue andando"
      sin fingir que sabe cuánto falta. */
:where(button,.btn)[aria-busy="true"]{position:relative;overflow:hidden;cursor:progress}
:where(button,.btn)[aria-busy="true"]::after{content:"";position:absolute;inset:auto 0 0 0;
  height:2px;background:currentColor;opacity:.55;
  animation:recorre 1.1s var(--ease) infinite}
@keyframes recorre{
  from{transform:translateX(-100%) scaleX(.4)}
  to{transform:translateX(100%) scaleX(.4)}
}
@media (prefers-reduced-motion:reduce){
  :where(button,.btn)[aria-busy="true"]::after{animation:none;opacity:.3;
    transform:scaleX(1)}
}


/* ==== Zona de arte: arrastrar, soltar y saber qué pasa ============================
   Era un botón que abría el diálogo de archivos y nada más. Entregar un logo es el paso
   donde el cliente más duda —si llegó, si sirve el formato— y no había una sola señal.

   El <input type=file> sigue existiendo: arrastrar se suma, no reemplaza. Quien navega
   con teclado o prefiere el diálogo no pierde nada. */
.art-drop{width:100%;min-height:96px;flex-direction:column;gap:6px;border-radius:14px;
  border:1.5px dashed var(--line-strong);background:var(--paper);
  transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease),
             transform var(--dur-1) var(--ease)}
.art-drop::after{content:"o arrastrá el archivo acá";font-size:11.5px;font-weight:500;
  color:var(--muted);letter-spacing:0}

/* Encima: el borde se cierra y el fondo se tiñe. Dice "soltá acá" sin texto extra. */
.art-drop.esta-encima{border-style:solid;border-color:var(--green);
  background:var(--green-pale);transform:scale(1.01)}
.art-drop:hover{transform:none;box-shadow:none;border-color:var(--green)}

/* Subiendo: la zona se apaga y una barra recorre el borde inferior. */
.art-drop[aria-busy="true"]{position:relative;overflow:hidden;cursor:progress;opacity:.75}
.art-drop[aria-busy="true"]::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;
  background:var(--green);animation:recorre 1.1s var(--ease) infinite}

@media (prefers-reduced-motion:reduce){
  .art-drop,.art-drop.esta-encima{transition:none;transform:none}
  .art-drop[aria-busy="true"]::before{animation:none}
}


/* ==== Campañas: la sección tenía UN elemento con movimiento en 597 px ==============
   Medido antes de tocarla. Las tres piezas estaban inertes y cambiar de pestaña
   intercambiaba el contenido de golpe, sin que nada dijera que algo pasó. */

/* Las piezas se separan del grupo al pasar el mouse, cada una con su propio retardo para
   que no respondan como un bloque. */
/* Se usan las propiedades `translate` y `scale` en vez de `transform`: las piezas ya
   vienen rotadas para el efecto de reparto, y un `transform` nuevo reemplazaría esa
   rotación en vez de sumarse. Estas propiedades componen sobre el transform existente. */
.season-product{transition:translate var(--dur-2) var(--ease-out),scale var(--dur-2) var(--ease-out),
  box-shadow var(--dur-2) var(--ease)}
.season-card__products:hover .season-product{translate:0 -6px}
.season-card__products:hover .season-product:nth-child(2){transition-delay:40ms}
.season-card__products:hover .season-product:nth-child(3){transition-delay:80ms}
/* La que se mira se adelanta sobre las otras. */
.season-product:hover{translate:0 -14px;scale:1.03;z-index:3;
  box-shadow:0 30px 60px rgba(0,0,0,.28)}

/* Al cambiar de campaña las piezas entran escalonadas: se ve que el contenido cambió. */
.season-card__products.cambio .season-product{animation:entraPieza var(--dur-3) var(--ease-out) both}
.season-card__products.cambio .season-product:nth-child(2){animation-delay:70ms}
.season-card__products.cambio .season-product:nth-child(3){animation-delay:140ms}
@keyframes entraPieza{
  from{opacity:0;transform:translateY(18px) scale(.97)}
  to{opacity:1;transform:none}
}

/* La pestaña activa se marca con una barra que crece, no solo con color. */
.season-tabs button{position:relative;transition:color var(--dur-1) var(--ease)}
.season-tabs button::after{content:"";position:absolute;inset:auto 12px 6px 12px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:center;
  transition:transform var(--dur-2) var(--ease-out)}
.season-tabs button.is-active::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .season-product,.season-tabs button::after{transition:none}
  .season-card__products:hover .season-product,.season-product:hover{translate:none;scale:none}
  .season-card__products.cambio .season-product{animation:none}
}

/* ASEBAC 2026: no mostrar estimaciones públicas ni precios de cotización. */
#presupuesto,#showPrices,[data-payment],#priceResults,#priceBreakdown{display:none!important}