:root{
  --ivory:#F4F2EB; --mist:#DEE6D7; --sage:#CFDBC9;
  --ink:#3F4B3B; --forest:#3F4B3B; --leaf:#5E7256; --gold:#A8863C; --white:#fff;
  --menta:#D3DECC; --menta2:#C3D1BB; --deep:#2C3628;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-weight:300;color:var(--ink);background:var(--menta);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:22px 6vw;transition:background .4s,box-shadow .4s,padding .4s}
nav.scrolled{background:rgba(211,222,204,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(63,75,59,.08);padding:14px 6vw}
.logo{display:inline-block;text-decoration:none}
.logo svg{height:50px;width:auto;display:block;transition:height .4s}
nav.scrolled .logo svg{height:40px}
.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{text-decoration:none;font-size:.8rem;letter-spacing:.08em;position:relative;padding-bottom:3px}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--forest);transition:width .35s}
.nav-links a:hover::after{width:100%}
.nav-cta{border:1px solid var(--forest);border-radius:999px;padding:9px 22px !important}
.nav-cta:hover{background:var(--forest);color:var(--menta) !important}
.nav-cta::after{display:none}
.burger{display:none;background:none;border:none;font-size:1.4rem;color:var(--forest);cursor:pointer}

/* BTN */
.btn{display:inline-block;text-decoration:none;font-size:.82rem;letter-spacing:.12em;color:var(--menta);background:var(--forest);padding:15px 36px;border-radius:999px;border:none;cursor:pointer;font-family:'Inter',sans-serif;transition:transform .35s cubic-bezier(.34,1.56,.64,1),background .3s}
.btn:hover{transform:translateY(-3px);background:var(--deep)}
.btn.ghost{background:transparent;color:var(--forest);border:1px solid var(--forest)}
.btn.ghost:hover{background:var(--forest);color:var(--menta)}
.btn.light{background:var(--menta);color:var(--forest)}
.btn.light:hover{background:var(--white)}

/* HERO - texto izquierda, planta creciendo */
.hero{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding:130px 6vw 60px;gap:3vw;background:var(--menta);position:relative;overflow:hidden}
.hero-text h1{font-size:clamp(3rem,6.2vw,5.8rem);line-height:1.0;letter-spacing:-.02em;margin-bottom:30px;color:var(--deep)}
.hero-text .lede{font-size:1.08rem;max-width:40ch;color:var(--ink);margin-bottom:40px}
.hero-visual{position:relative;height:82vh;min-height:460px;display:flex;align-items:center;justify-content:center}
/* planta crece desde abajo */
.hero-plant{position:relative;width:112%;max-width:none;height:auto;transform-origin:50% 100%;filter:drop-shadow(0 22px 34px rgba(44,54,40,.24))}
.hero-ph{color:#8a9b7e;font-size:.8rem;letter-spacing:.14em;text-align:center;border:1px dashed #9fb096;border-radius:8px;padding:80px 40px;background:rgba(255,255,255,.25)}
.float-leaf{position:absolute;pointer-events:none;opacity:.5;animation:drift 11s ease-in-out infinite alternate}
.float-leaf.f2{animation-duration:14s;animation-delay:-4s;opacity:.35}
.float-leaf.f3{animation-duration:9s;animation-delay:-7s;opacity:.4}
@keyframes drift{from{transform:translateY(-12px) rotate(-4deg)}to{transform:translateY(14px) rotate(5deg)}}

/* LEAF DIVIDER */
.leaf-divider{display:flex;justify-content:center;height:0;position:relative;z-index:5}
.leaf-divider svg{transform:translateY(-50%);animation:drift 10s ease-in-out infinite alternate}

section{padding:120px 6vw}
.eyebrow{font-size:.76rem;letter-spacing:.3em;color:var(--gold);margin-bottom:24px;text-align:center}
.sec-title{font-size:clamp(2rem,3.6vw,3.2rem);text-align:center;max-width:22ch;margin:0 auto;color:var(--deep)}
.sec-lead{text-align:center;max-width:56ch;margin:24px auto 0;color:var(--ink);font-size:1rem}

/* TIRA AUTO-SCROLL - drag natural con inercia */
.forms{background:var(--ivory);padding:120px 0 100px;overflow:hidden}
.forms .eyebrow,.forms .sec-title{padding:0 6vw}
.marquee{margin-top:-90px;overflow:hidden;padding:0}
.marquee-viewport{overflow:hidden;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-viewport.dragging{cursor:grabbing}
.marquee-track{display:flex;gap:40px;width:max-content;padding:360px 6vw 0;will-change:transform}
.marquee-track.autoscroll{animation:scroll 50s linear infinite}
.marquee:hover .marquee-track.autoscroll{animation-play-state:paused}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.m-card{flex:0 0 300px;position:relative;user-select:none}
.m-frame{background:var(--menta);border-radius:8px;height:300px;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:28px 24px 34px;text-align:center;overflow:visible}
.m-txt{position:relative;z-index:3}
/* imagen anclada MÁS ARRIBA para no pisar el texto */
.m-card .m-img{position:absolute;left:50%;bottom:52%;transform:translateX(-50%);height:auto;width:86%;max-width:none;filter:drop-shadow(0 18px 26px rgba(44,54,40,.22));z-index:2;pointer-events:none;-webkit-user-drag:none}
/* semilla 15% más grande y un poco más abajo para que desborde a los lados */
.m-card.seed .m-img{width:74%;bottom:57%}
.m-card h3{color:var(--deep);font-size:1.35rem;font-weight:500;position:relative;font-family:'Fraunces',serif}
.m-card p{color:var(--ink);font-size:.82rem;position:relative;margin-top:8px;line-height:1.5}
.m-card .mtag{font-size:.64rem;letter-spacing:.2em;color:var(--gold);margin-top:12px;position:relative}
.forms .sec-foot{text-align:center;margin-top:50px;padding:0 6vw}

/* 3 CATEGORÍAS (our flowers) */
.lines{background:var(--white)}
.lines-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px}
.line-card{border-radius:10px;overflow:hidden;position:relative;aspect-ratio:3/4;display:flex;align-items:flex-end;padding:34px;color:var(--menta);text-decoration:none}
.line-card .bg{position:absolute;inset:0;z-index:0;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.line-card:hover .bg{transform:scale(1.06)}
.line-card .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(44,54,40,.05),rgba(44,54,40,.72))}
.line-card .bg img{width:100%;height:100%;object-fit:cover}
.line-card .lc-txt{position:relative;z-index:1}
.line-card h3{font-size:1.5rem;margin-bottom:6px}
.line-card p{font-size:.82rem;color:rgba(244,242,235,.9)}

/* PROCESS */
.process{background:var(--forest);color:var(--menta);text-align:center}
.process h2{font-size:clamp(1.9rem,3.4vw,3rem);max-width:22ch;margin:0 auto 26px;line-height:1.2;color:var(--white)}
.process .p-body{max-width:60ch;margin:0 auto 60px;color:rgba(244,242,235,.82);font-size:1rem}
.process .p-body strong{color:var(--white);font-weight:500}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:30px;max-width:1280px;margin:0 auto;align-items:start}
.step .ic{width:96px;height:96px;margin:0 auto 22px;border-radius:50%;background:rgba(168,134,60,.12);border:1px solid rgba(168,134,60,.4);display:flex;align-items:center;justify-content:center;transition:transform .5s,background .4s}
.step:hover .ic{transform:scale(1.06);background:rgba(168,134,60,.2)}
.step .ic svg{width:52px;height:52px}
.step .num{font-size:.68rem;letter-spacing:.2em;color:var(--gold);margin-bottom:12px;display:block}
.step h4{font-family:'Fraunces',serif;font-weight:500;font-size:1rem;margin-bottom:7px}
.step h4{margin-bottom:4px}
.step .ssub{display:block;font-family:'Fraunces',serif;font-style:italic;font-size:.86rem;color:var(--gold);margin-bottom:10px}
.step p{font-size:.8rem;color:rgba(244,242,235,.68);line-height:1.62;max-width:24ch;margin:0 auto}

/* PILLARS */
.pillars{background:var(--sage)}
.pill-grid{display:grid;grid-template-columns:1fr;gap:50px;max-width:600px;margin:0 auto}
.pill{text-align:center}
.pill .ic{width:92px;height:92px;margin:0 auto 24px;border-radius:50%;background:var(--menta);display:flex;align-items:center;justify-content:center;transition:transform .5s}
.pill:hover .ic{transform:scale(1.06)}
.pill .ic svg{width:50px;height:50px}
.pill h3{font-size:1.3rem;font-weight:500;margin-bottom:14px;color:var(--forest)}
.pill p{font-size:.9rem;color:var(--deep);line-height:1.7;max-width:34ch;margin:0 auto;overflow-wrap:break-word}

/* ORIGIN - foto sobresale del marco */
.origin{background:var(--ivory);display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center;overflow:hidden}
.origin .o-frame{position:relative;background:var(--menta);border-radius:26px;aspect-ratio:1/1;display:flex;align-items:flex-end;justify-content:center}
.origin .o-frame img{width:100%;height:100%;object-fit:cover;border-radius:26px}
.origin h2{font-size:clamp(1.9rem,3.2vw,2.8rem);margin-bottom:24px;color:var(--deep)}
.origin p{max-width:50ch;color:var(--ink);margin-bottom:18px;font-size:.97rem}
.origin .quote{font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem;color:var(--forest);border-left:2px solid var(--gold);padding-left:22px;margin:30px 0}

/* TRACE */
.trace{background:var(--deep);color:var(--menta);text-align:center}
.trace h2{font-size:clamp(1.8rem,3vw,2.7rem);font-weight:300;max-width:24ch;margin:0 auto 20px;color:var(--white)}
.trace .t-lead{max-width:54ch;margin:0 auto;color:rgba(244,242,235,.72);font-size:.95rem}
.params{max-width:620px;margin:56px auto 0;text-align:left}
.param{display:flex;align-items:center;gap:24px;padding:20px 0;border-bottom:1px solid rgba(244,242,235,.14)}
.param .pn{font-family:'Fraunces',serif;font-size:1.4rem;color:var(--gold);min-width:42px}
.param .pl{font-size:1rem;color:rgba(244,242,235,.9)}

/* CONTADORES DE IMPACTO */
.impact{background:var(--deep);color:var(--menta);padding:150px 6vw 130px;text-align:center}
.impact-grid{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:0 60px}
.impact-item{min-width:0;text-align:center}
.impact-title{font-family:'Fraunces',serif;font-size:clamp(1.75rem,3vw,2.5rem);color:var(--gold);margin:0 0 78px;font-weight:400;letter-spacing:.005em}
.impact-num{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.6rem,5.5vw,4.4rem);color:var(--white);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.impact-label{margin-top:16px;font-size:.9rem;letter-spacing:.12em;color:rgba(244,242,235,.72);text-transform:uppercase}
.impact-divider{width:1px;height:90px;background:rgba(168,134,60,.4)}
@media(max-width:700px){.impact-grid{grid-template-columns:1fr;gap:46px 0}.impact-divider{width:120px;height:1px;justify-self:center}.impact-title{margin-bottom:54px}}

/* SOCIAL TEASER */
.social{background:var(--ivory);padding:60px 6vw}
.social-frame{position:relative;border-radius:10px;overflow:hidden;min-height:420px;display:flex;align-items:center}
.social-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.social-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(30,38,27,.92) 0%,rgba(30,38,27,.82) 38%,rgba(30,38,27,.34) 100%);z-index:0}
.social-overlay{position:relative;z-index:1;max-width:520px;margin-left:6%;padding:50px 0;color:var(--menta)}
.social-overlay .eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--ivory);font-weight:600;font-size:.72rem;letter-spacing:.26em;text-align:left;margin-bottom:22px;text-shadow:0 1px 10px rgba(20,26,18,.5)}
.social-overlay .eyebrow::before{content:'';width:26px;height:2px;background:var(--gold);flex:0 0 26px;border-radius:2px}
.social-overlay h2{font-size:clamp(1.5rem,2.6vw,2.2rem);font-weight:400;margin-bottom:16px;line-height:1.25;color:var(--white);text-shadow:0 2px 16px rgba(20,26,18,.5)}
.social-overlay p{color:rgba(244,242,235,.9);font-size:.95rem;margin-bottom:26px;line-height:1.7;text-shadow:0 1px 12px rgba(20,26,18,.45)}

/* FINDER */
.finder{background:var(--menta);text-align:center;padding:104px 6vw;display:flex;flex-direction:column;align-items:center;justify-content:center}
.finder h2{font-size:clamp(1.9rem,3.2vw,2.8rem);margin:0 0 34px;color:var(--deep);max-width:18ch;line-height:1.18}
.finder p{max-width:52ch;margin:0 auto 38px;color:var(--ink);font-size:1rem}
.finder .hint{font-style:italic;color:var(--leaf);font-size:.9rem;margin-top:26px}

/* CLOSING */
.closing{background:var(--forest);color:var(--menta);text-align:center}
.closing h2{font-size:clamp(2rem,3.6vw,3.2rem);max-width:20ch;margin:0 auto 22px;color:var(--white)}
.closing p{max-width:46ch;margin:0 auto 40px;color:rgba(244,242,235,.8)}
.closing .cline{margin-top:24px;font-size:.85rem;color:rgba(244,242,235,.6);letter-spacing:.06em}

/* FOOTER */
footer{background:var(--deep);color:var(--menta);padding:56px 6vw 40px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:22px}
footer .logo svg{height:44px}
footer .small{font-size:.74rem;color:rgba(244,242,235,.5);letter-spacing:.05em}
footer .flinks{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:center;max-width:100%}
footer .flinks a{text-decoration:none;font-size:.79rem;color:rgba(244,242,235,.85)}
footer .flinks a:hover{color:var(--gold)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(44,54,40,.55);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s;display:flex;align-items:center;justify-content:center;padding:24px}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal-wrap{position:relative;max-width:560px;width:100%}
.modal{background:var(--ivory);border-radius:24px;padding:52px 48px;max-height:90vh;overflow-y:auto;transform:translateY(40px) scale(.97);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.modal-overlay.open .modal{transform:none}
.modal .eyebrow{text-align:left;margin-bottom:12px}
.modal h3{font-size:1.7rem;margin-bottom:12px;line-height:1.2;color:var(--deep)}
.modal .msub{font-size:.9rem;color:var(--ink);margin-bottom:28px}
.modal label{display:block;font-size:.76rem;letter-spacing:.05em;margin:16px 0 6px;font-weight:500}
.modal input,.modal textarea,.modal select{width:100%;padding:12px 15px;border:1px solid #b9c9b3;border-radius:10px;font-family:'Inter',sans-serif;font-size:.9rem;color:var(--ink);background:var(--white)}
.modal input:focus,.modal textarea:focus,.modal select:focus{outline:none;border-color:var(--leaf)}
.modal textarea{resize:vertical;min-height:76px}
.modal .row{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.modal .btn{width:100%;margin-top:26px}
.modal .close{position:absolute;top:18px;right:22px;background:none;border:none;font-size:1.6rem;color:var(--ink);cursor:pointer;opacity:.5}
.modal .close:hover{opacity:1}
.modal-success{display:none;text-align:center;padding:20px 0}
.modal-success.show{display:block}
.modal-success .check{font-size:2.4rem;color:var(--leaf);margin-bottom:14px}

/* REVEAL - apariciones estelares */
.reveal{opacity:0;transform:translateY(48px);transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.13s}.reveal.d2{transition-delay:.26s}.reveal.d3{transition-delay:.39s}.reveal.d4{transition-delay:.52s}
.hero-text>*{opacity:0;transform:translateY(28px);animation:rise 1.3s cubic-bezier(.16,1,.3,1) forwards}
.hero-text .lede{animation-delay:.18s}.hero-text .btn{animation-delay:.36s}
.hero-visual{opacity:0;animation:grow 1.6s cubic-bezier(.16,1,.3,1) .3s forwards}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes sway{from{transform:rotate(-1deg)}to{transform:rotate(1.2deg)}}
@keyframes grow{from{opacity:0;transform:translateY(40px) scale(.94)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  /* Con las animaciones apagadas, nada puede quedarse invisible:
     todo lo que el sitio oculta para animar se muestra aqui. */
  .reveal,.hero-text>*,.hero-visual,.m-ver{opacity:1 !important;transform:none !important}
  .pd-bar[data-fill] .pd-bar-fill,
  .sizes-tab[data-reveal-rows] tbody tr{opacity:1 !important;transform:none !important}
  .pd-bar[data-fill] .pd-bar-fill span{opacity:1 !important}
  .marquee-track{animation:none !important}
  [data-depth]{transform:none !important}
}

/* RESPONSIVE - orden Foglia en celular */
@media(max-width:960px){
 .nav-links{display:none}.burger{display:block}
 .hero{grid-template-columns:1fr;padding-top:120px;text-align:center;min-height:auto}
 .hero-text{padding-bottom:20px}.hero-text .lede{margin-left:auto;margin-right:auto}
 .hero-visual{height:56vh;order:2}
 .lines-grid{grid-template-columns:1fr}.steps{grid-template-columns:repeat(2,1fr);gap:34px}
 .pill-grid{grid-template-columns:1fr;gap:44px}
 .origin{grid-template-columns:1fr}.origin .o-frame{max-width:400px;margin:0 auto;order:-1}
 .m-card{flex:0 0 250px}
 .social-overlay{margin:0 auto;padding:40px 24px;text-align:center} .social-overlay .eyebrow{justify-content:center}
}
@media(max-width:560px){
 .hero-text h1{font-size:clamp(2.6rem,12vw,3.5rem)}
 section{padding:80px 6vw}
}

/* --- MENU MOVIL --- */
.burger{display:none;z-index:120;position:relative}
@media(max-width:960px){
 .nav-links{display:flex;position:fixed;top:0;left:0;width:100%;height:100%;height:100dvh;background:var(--menta);flex-direction:column;justify-content:center;align-items:center;gap:30px;transform:translateY(-100%);transition:transform .55s cubic-bezier(.16,1,.3,1);z-index:110}
 .nav-links.open{transform:none}
 .nav-links a{font-size:1.25rem;font-family:'Fraunces',serif;letter-spacing:.02em}
 .nav-cta{padding:12px 30px !important}
 .burger{display:block}
 body.menu-open{overflow:hidden}
}

@media(max-width:960px){ .step p{max-width:30ch} }
@media(max-width:560px){ .steps{grid-template-columns:1fr;gap:44px} .step p{max-width:34ch} }

.modal-intro{font-size:.9rem;color:rgba(44,54,40,.72);line-height:1.6;margin:-6px 0 20px}

@media(max-width:560px){ .finder{padding:76px 6vw} .finder h2{margin-bottom:28px} }

/* --- Selector de idioma --- */
.nav-right{display:flex;align-items:center;gap:18px}
.lang{display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.1em;font-weight:500;color:rgba(63,75,59,.5);border:1px solid rgba(63,75,59,.22);border-radius:999px;padding:7px 13px;text-decoration:none;transition:border-color .3s,color .3s;white-space:nowrap}
.lang:hover{border-color:rgba(63,75,59,.5);color:var(--forest)}
.lang .on{color:var(--forest);font-weight:600}
.lang .sep{opacity:.4}
@media(max-width:960px){ .nav-right{gap:12px} .lang{font-size:.68rem;padding:6px 11px} }

@media(max-width:560px){ .pill p,.step p{max-width:100%} .pill,.step{padding:0 4px} }

@media(max-width:560px){ .m-card.seed .m-img{width:70%;bottom:59%} }

/* ---------- PAGINAS LEGALES ---------- */
.legal-page{background:var(--ivory)}
.legal-page nav{background:rgba(244,242,235,.96);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(63,75,59,.10)}
.legal-page nav .logo svg{height:40px}
.legal-page nav{padding:14px 6vw}
main.legal{max-width:760px;margin:0 auto;padding:140px 6vw 90px;color:var(--ink)}
main.legal h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.1rem,4.6vw,3.1rem);color:var(--forest);line-height:1.14;margin-bottom:10px}
main.legal .legal-date{font-size:.82rem;letter-spacing:.06em;color:var(--gold);text-transform:uppercase;margin-bottom:56px}
main.legal h2{font-family:'Fraunces',serif;font-weight:400;font-size:1.32rem;color:var(--forest);margin:52px 0 16px;line-height:1.3}
main.legal p{font-size:.97rem;line-height:1.82;margin-bottom:17px}
main.legal ul{margin:0 0 20px 20px;padding:0}
main.legal li{font-size:.97rem;line-height:1.8;margin-bottom:9px}
main.legal strong{color:var(--forest);font-weight:600}
main.legal a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(168,134,60,.55)}
main.legal a:hover{text-decoration-color:var(--gold)}
.legal-back{margin-top:52px;padding-top:28px;border-top:1px solid rgba(63,75,59,.16)}
.legal-back a{text-decoration:none;font-size:.9rem;letter-spacing:.03em}
@media(max-width:560px){ main.legal{padding:130px 7vw 90px} main.legal h2{font-size:1.18rem;margin-top:42px} }

/* ---------- FORMULARIO: consentimiento, error, antispam ---------- */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;align-items:flex-start;gap:10px;margin:22px 0 6px;font-size:.82rem;line-height:1.55;color:rgba(44,54,40,.8);cursor:pointer;font-family:'Inter',sans-serif;letter-spacing:0;text-transform:none}
.consent input{appearance:none;-webkit-appearance:none;flex:0 0 17px;width:17px;height:17px;margin-top:1px;border:1px solid rgba(63,75,59,.42);border-radius:4px;background:transparent;cursor:pointer;transition:background .2s,border-color .2s;position:relative}
.consent input:checked{background:var(--forest);border-color:var(--forest)}
.consent input:checked::after{content:'';position:absolute;left:5px;top:1.5px;width:4px;height:9px;border:solid var(--ivory);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.consent a{color:var(--forest);text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(168,134,60,.6)}
.form-error{display:none;font-size:.84rem;color:#8C3A2E;background:rgba(140,58,46,.07);border-left:2px solid #8C3A2E;padding:9px 13px;border-radius:0 5px 5px 0;margin:14px 0 0;line-height:1.5}
.form-error.show{display:block}
#sendFinder{margin-top:18px}
#sendFinder:disabled{opacity:.6;cursor:wait}

/* ---------- PAGINA DE LABOR SOCIAL (bitacora) ---------- */
.social-page{background:var(--ivory)}
main.social-main{max-width:1000px;margin:0 auto;padding:140px 7vw 84px;color:var(--ink)}
main.social-main .eyebrow{color:var(--gold);margin-bottom:20px}
main.social-main h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.3rem,5.4vw,3.7rem);color:var(--forest);line-height:1.1;margin-bottom:30px}
.social-lead{font-size:1.05rem;line-height:1.82;max-width:60ch;color:rgba(44,54,40,.86)}

.social-log{margin-top:96px;display:flex;flex-direction:column;gap:88px}
.log-entry{display:grid;grid-template-columns:0.9fr 1.1fr;gap:44px;align-items:start;padding-top:44px;border-top:1px solid rgba(63,75,59,.16)}
.log-entry:first-child{border-top:none;padding-top:0}
.log-media{border-radius:20px;overflow:hidden;background:var(--menta);aspect-ratio:4/3}
.log-media img{width:100%;height:100%;object-fit:cover;display:block}
.log-empty{background:repeating-linear-gradient(45deg,var(--menta),var(--menta) 12px,rgba(168,134,60,.09) 12px,rgba(168,134,60,.09) 24px)}
.log-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
.log-date{color:var(--gold);font-weight:500}
.log-place{color:rgba(63,75,59,.6)}
.log-body h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.4rem,2.4vw,1.85rem);color:var(--forest);line-height:1.24;margin-bottom:18px}
.log-body p{font-size:.98rem;line-height:1.8;margin-bottom:18px}
.log-facts{list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid rgba(168,134,60,.3);display:flex;flex-wrap:wrap;gap:14px 46px}
.log-facts li{font-size:.86rem;color:rgba(63,75,59,.75);letter-spacing:.02em}
.log-facts strong{display:block;font-family:'Fraunces',serif;font-size:1.9rem;font-weight:400;color:var(--forest);line-height:1;margin-bottom:5px}

.social-close{margin-top:72px;padding:46px 6vw;background:var(--menta);border-radius:22px;text-align:center}
.social-close h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.35rem,2.6vw,1.9rem);color:var(--forest);margin-bottom:20px}
.social-close p{font-size:.98rem;line-height:1.8;max-width:56ch;margin:0 auto 14px;color:rgba(44,54,40,.85)}
.social-close a{color:var(--forest);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(168,134,60,.6)}

@media(max-width:820px){
  .log-entry{grid-template-columns:1fr;gap:28px}
  .social-log{gap:64px}
  main.social-main{padding:140px 7vw 90px}
  .social-close{padding:42px 8vw}
}

/* --- social: pestanas y partes --- */
.social-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.stab{font-size:.8rem;letter-spacing:.06em;color:var(--forest);text-decoration:none;border:1px solid rgba(63,75,59,.25);border-radius:999px;padding:11px 22px;transition:background .3s,border-color .3s,color .3s}
.stab:hover{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.social-part{padding:0;margin-top:72px;scroll-margin-top:110px}
.part-num{font-family:'Fraunces',serif;font-size:.95rem;color:var(--gold);letter-spacing:.2em;margin-bottom:10px}
.part-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.8rem,3.6vw,2.6rem);color:var(--forest);line-height:1.16;margin-bottom:18px}
.part-lead{font-size:1rem;line-height:1.8;max-width:62ch;color:rgba(44,54,40,.82);margin-bottom:56px}
.facts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:rgba(63,75,59,.14);border:1px solid rgba(63,75,59,.14);border-radius:20px;overflow:hidden}
.fact{background:var(--ivory);padding:38px 34px}
.fact-num{display:block;font-family:'Fraunces',serif;font-size:clamp(2rem,3.6vw,2.7rem);color:var(--gold);line-height:1;margin-bottom:16px}
.fact h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.14rem;color:var(--forest);margin-bottom:12px;line-height:1.3}
.fact p{font-size:.92rem;line-height:1.72;color:rgba(44,54,40,.8)}
.part-note{margin-top:34px;background:var(--menta);border-radius:18px;padding:34px 36px;border-left:3px solid var(--gold)}
.part-note h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.16rem;color:var(--forest);margin-bottom:12px}
.part-note p{font-size:.94rem;line-height:1.78;color:rgba(44,54,40,.86)}
.log-body h3{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.3rem,2.2vw,1.7rem);color:var(--forest);line-height:1.26;margin-bottom:16px}
@media(max-width:820px){
  .facts-grid{grid-template-columns:1fr}
  .fact{padding:32px 26px}
  .social-part{margin-top:76px}
  .part-lead{margin-bottom:40px}
  .part-note{padding:28px 24px}
}

/* ---------- MANOS QUE COSECHAN ---------- */
.stories{margin-top:60px;display:flex;flex-direction:column;gap:64px}
.story{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;padding-top:44px;border-top:1px solid rgba(63,75,59,.16)}
.story:first-child{border-top:none;padding-top:0}
.story-media{border-radius:20px;overflow:hidden;background:var(--menta);aspect-ratio:16/10;position:relative}
.story-media img,.story-media video,.story-media iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.story-soon{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,var(--menta),var(--menta) 12px,rgba(168,134,60,.09) 12px,rgba(168,134,60,.09) 24px)}
.soon-tag{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--forest);background:var(--ivory);border:1px solid rgba(63,75,59,.18);border-radius:999px;padding:9px 20px}
.story-meta{display:flex;flex-direction:column;gap:5px;margin-bottom:18px}
.story-name{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--forest);line-height:1.1}
.story-role{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.story-body h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.35rem,2.3vw,1.75rem);color:var(--forest);line-height:1.26;margin-bottom:18px}
.story-body p{font-size:.98rem;line-height:1.8;margin-bottom:18px}
.story-quote{font-family:'Fraunces',serif;font-style:italic;font-size:1.15rem;line-height:1.65;color:var(--forest);border-left:2px solid var(--gold);padding-left:22px;margin:26px 0}
.story-when{font-size:.82rem;letter-spacing:.03em;color:rgba(63,75,59,.62);border-top:1px solid rgba(168,134,60,.3);padding-top:16px;margin-top:26px}
@media(max-width:820px){
  .story{grid-template-columns:1fr;gap:26px}
  .stories{gap:62px;margin-top:64px}
}

/* ---------- PARALLAX: preparacion de las capas ---------- */
/* Los marcos recortan el excedente que produce el desplazamiento */
.origin .o-frame,.social-frame{overflow:hidden}
/* El heroe no recorta: el producto debe poder desbordar como hasta ahora */
[data-depth]{backface-visibility:hidden}
/* La animacion de entrada define transform; el parallax la toma despues,
   asi que se limpia al terminar para que no se peleen */
.hero-visual{animation-fill-mode:forwards}
@media(prefers-reduced-motion:reduce){[data-depth]{transform:none !important}}
@media(max-width:960px){[data-depth]{transform:none !important}}

/* ================= CATEGORIAS ================= */
.cats{background:var(--ivory);padding:110px 6vw 120px}
.cats-title{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.7rem,3vw,2.4rem);
  color:var(--forest);text-align:center;margin-bottom:64px;letter-spacing:.005em}

.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;max-width:1240px;margin:0 auto}

.cat{display:block;text-decoration:none;color:inherit;position:relative}

/* --- la ventana: recorta el zoom --- */
.cat-img{position:relative;aspect-ratio:3/4.4;border-radius:16px;overflow:hidden;background:var(--menta)}
.cat-img img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);
  /* arranque decidido, frenado largo: la curva de iOS */
  transition:transform 1.05s cubic-bezier(.16,1,.3,1), filter .85s cubic-bezier(.16,1,.3,1);
  will-change:transform}

/* --- velo de color que se retira al pasar el cursor --- */
.cat-img::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(63,75,59,.10) 0%,rgba(44,54,40,.58) 100%);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),background .85s cubic-bezier(.16,1,.3,1)}

.cat-kicker{position:absolute;top:18px;left:20px;z-index:2;
  font-family:'Fraunces',serif;font-size:.86rem;color:var(--gold);letter-spacing:.14em;
  opacity:.85;transition:opacity .6s ease}

/* --- texto sobre la imagen, abajo --- */
.cat-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 22px 24px;
  pointer-events:none}
.cat-body h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.3rem;color:var(--ivory);
  line-height:1.2;margin-bottom:8px;text-shadow:0 1px 14px rgba(20,26,18,.45)}
.cat-body p{font-size:.78rem;line-height:1.55;color:rgba(244,242,235,.8);margin-bottom:16px;
  text-shadow:0 1px 12px rgba(20,26,18,.4)}
.cat-go{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ivory);
  opacity:0;transform:translateY(8px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.cat-go::after{content:'';width:18px;height:1px;background:var(--gold);
  transition:width .7s cubic-bezier(.16,1,.3,1)}

/* ---------- EL GESTO ---------- */
@media(hover:hover){
  .cat:hover .cat-img img,
  .cat:focus-visible .cat-img img{transform:scale(1.085)}

  /* el velo pasa de verde apagado a limpio y mas claro */
  .cat:hover .cat-img::after,
  .cat:focus-visible .cat-img::after{
    background:linear-gradient(180deg,rgba(63,75,59,0) 0%,rgba(44,54,40,.46) 100%)}

  .cat:hover .cat-go,
  .cat:focus-visible .cat-go{opacity:1;transform:none}
  .cat:hover .cat-go::after{width:30px}
  .cat:hover .cat-kicker{opacity:1}
}

.cat:focus-visible{outline:2px solid var(--gold);outline-offset:6px;border-radius:18px}

/* --- las que aun no existen --- */
.cat-soon{cursor:default}
.cat-soon .cat-img img{filter:grayscale(.55) brightness(.92)}
.cat-soon .cat-go{opacity:1;transform:none;color:rgba(244,242,235,.62)}
.cat-soon .cat-go::after{background:rgba(244,242,235,.35)}
@media(hover:hover){.cat-soon:hover .cat-img img{transform:scale(1.03)}}

@media(max-width:960px){
  .cat-grid{grid-template-columns:repeat(2,1fr);gap:18px}
  .cats{padding:84px 6vw 92px}
  .cats-title{margin-bottom:46px}
  .cat-go{opacity:1;transform:none}   /* en tactil no hay hover: siempre visible */
}
@media(max-width:560px){
  .cat-img{aspect-ratio:3/4}
  .cat-body{padding:20px 16px 18px}
  .cat-body h3{font-size:1.12rem}
}
@media(prefers-reduced-motion:reduce){
  .cat-img img,.cat-img::after,.cat-go{transition:none !important}
  .cat:hover .cat-img img{transform:none}
}

/* ================= PAGINA DE PRODUCTO ================= */
.product-page{background:var(--ivory)}
main.pd{max-width:1180px;margin:0 auto;padding:150px 6vw 80px;color:var(--ink)}

.pd-hero{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;margin:34px 0 64px}
.pd-hero-img{background:var(--menta);border-radius:22px;aspect-ratio:4/5;min-height:300px;position:relative;overflow:visible}
.pd-hero-img img{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);
  height:116%;width:auto;max-width:none;
  filter:drop-shadow(0 22px 34px rgba(44,54,40,.24));z-index:2;pointer-events:none}
.pd-hero-txt .eyebrow{text-align:left;margin-bottom:18px}
.pd-hero-txt h1{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(2.1rem,4.4vw,3.3rem);color:var(--forest);line-height:1.08;margin-bottom:8px}
.pd-hero-txt h1 em{font-style:italic}
.pd-common{font-size:.95rem;color:rgba(63,75,59,.62);letter-spacing:.04em;margin-bottom:26px}
.pd-lead{font-size:1rem;line-height:1.8;max-width:52ch;color:rgba(44,54,40,.85);margin-bottom:28px}

.pd-quick{display:flex;gap:44px;margin-bottom:30px;flex-wrap:wrap}
.q-num{display:block;font-family:'Fraunces',serif;font-size:1.9rem;color:var(--forest);line-height:1}
.q-lab{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(63,75,59,.6);margin-top:7px}

.pd-sec{padding:0;margin-bottom:60px;scroll-margin-top:110px}
.pd-sec .eyebrow{text-align:left;margin-bottom:16px}
.pd-h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.6rem,3vw,2.3rem);color:var(--forest);line-height:1.18;margin-bottom:22px}
.pd-h2-light{color:var(--ivory)}
.pd-lead-light{color:rgba(244,242,235,.85)}

.pd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px}
.pd-card{background:var(--white,#fff);border:1px solid rgba(63,75,59,.14);border-radius:16px;padding:26px 22px}
.pd-card-alt{background:var(--menta);border-color:rgba(63,75,59,.2)}
.pd-card h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.12rem;color:var(--forest);margin-bottom:18px;line-height:1.25}
.pd-card h3 span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.pd-tab{width:100%;border-collapse:collapse;font-size:.82rem}
.pd-tab td{padding:8px 0;border-bottom:1px solid rgba(63,75,59,.1);vertical-align:top}
.pd-tab tr:last-child td{border-bottom:none}
.pd-tab td:first-child{color:rgba(63,75,59,.62);padding-right:10px}
.pd-tab td:last-child{text-align:right;color:var(--forest);white-space:nowrap}

.pd-sec-dark{background:var(--deep);border-radius:22px;padding:46px 44px !important;color:var(--menta)}
.pd-sec-dark .eyebrow{color:var(--gold)}
.pd-bar{margin:34px 0 22px;border-radius:8px;overflow:hidden;height:46px;display:flex}
.pd-bar-fill{flex:1;display:flex;align-items:center;justify-content:center;font-size:.82rem;letter-spacing:.06em}
.pd-note{font-size:.86rem;line-height:1.75;color:rgba(244,242,235,.66);max-width:72ch}
.pd-note-dark{color:rgba(44,54,40,.7);border-left:2px solid var(--gold);padding-left:20px;margin-top:26px}

.pd-specs{display:grid;grid-template-columns:repeat(3,1fr);
  border:1px solid rgba(63,75,59,.14);border-radius:16px;overflow:hidden;margin-top:34px;background:var(--ivory)}
.pd-specs>div{background:var(--ivory);padding:26px 24px;
  border-right:1px solid rgba(63,75,59,.14);border-bottom:1px solid rgba(63,75,59,.14)}
.pd-specs>div:nth-child(3n){border-right:none}
.pd-specs span{display:block;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(63,75,59,.6);margin-bottom:9px}
.pd-specs strong{font-family:'Fraunces',serif;font-weight:400;font-size:1.28rem;color:var(--forest)}

.pd-cta{background:var(--deep);border-radius:22px;padding:52px 44px !important;text-align:center;margin-bottom:0}
.pd-cta .pd-lead-light{margin:0 auto 32px}

@media(max-width:1020px){ .pd-grid{grid-template-columns:repeat(2,1fr)} .pd-specs{grid-template-columns:repeat(2,1fr)} }
@media(max-width:820px){
  main.pd{padding:124px 7vw 66px}
  .pd-hero{grid-template-columns:1fr;gap:34px;margin-bottom:76px}
  .pd-hero-img{max-width:280px;margin:34px auto 0;aspect-ratio:4/4.4}
  .pd-hero-img img{height:112%;width:auto;bottom:4%}
  .pd-quick{gap:30px}
  .pd-sec{margin-bottom:52px}
  .pd-sec-dark,.pd-cta{padding:40px 26px !important}
}
@media(max-width:560px){
  .pd-grid{grid-template-columns:1fr}
  .pd-specs{grid-template-columns:1fr}
  .pd-bar-fill{font-size:.74rem;text-align:center;padding:0 10px}
}

/* producto: ficha unica con nota al lado */
.pd-grid-1{grid-template-columns:.9fr 1.1fr;align-items:stretch}
.pd-aside{background:var(--menta);border-radius:16px;padding:30px 28px}
.pd-aside h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.15rem;color:var(--forest);margin-bottom:16px}
.pd-aside p{font-size:.94rem;line-height:1.78;color:rgba(44,54,40,.84);margin-bottom:14px}
.pd-aside p:last-child{margin-bottom:0}
@media(max-width:820px){.pd-grid-1{grid-template-columns:1fr}}

/* ---------- Tarjeta del carrusel con ficha propia ----------
   La palma se levanta y aparece la invitacion. El cursor NO se toca:
   sigue diciendo que la tira se arrastra. */
.m-card[data-href]{cursor:pointer}
.m-card[data-href] .m-frame{transition:box-shadow .7s cubic-bezier(.16,1,.3,1)}
.m-card[data-href] .m-img{transition:transform .8s cubic-bezier(.16,1,.3,1),filter .8s cubic-bezier(.16,1,.3,1)}
.m-card[data-href] .mtag{transition:opacity .45s ease,transform .45s cubic-bezier(.16,1,.3,1)}

/* la invitacion vive donde estaba la etiqueta */
.m-card[data-href] .m-frame{position:relative}
.m-ver{position:absolute;left:0;right:0;bottom:34px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);
  opacity:0;transform:translateY(7px);pointer-events:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1) .06s,transform .55s cubic-bezier(.16,1,.3,1) .06s}
.m-ver i{font-style:normal;display:inline-block;transition:transform .55s cubic-bezier(.16,1,.3,1)}

@media(hover:hover){
  .m-card[data-href]:hover .m-img{transform:translateX(-50%) translateY(-14px) scale(1.035);
    filter:drop-shadow(0 30px 34px rgba(44,54,40,.26))}
  .m-card[data-href]:hover .m-frame{box-shadow:0 16px 40px rgba(44,54,40,.16)}
  .m-card[data-href]:hover .mtag{opacity:0;transform:translateY(-6px)}
  .m-card[data-href]:hover .m-ver{opacity:1;transform:none}
  .m-card[data-href]:hover .m-ver i{transform:translateX(5px)}
  /* mientras se arrastra, el gesto se apaga: no compite con la inercia */
  .dragging .m-card[data-href]:hover .m-img{transform:translateX(-50%)}
  .dragging .m-card[data-href]:hover .m-ver{opacity:0}
  .dragging .m-card[data-href]:hover .mtag{opacity:1;transform:none}
}
.dragging .m-card[data-href]{cursor:grabbing}
@media(prefers-reduced-motion:reduce){
  .m-card[data-href] .m-img,.m-ver,.m-ver i{transition:none !important}
}

/* --- producto: nuestra gente --- */
.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.people-shot{margin:0}
.people-shot img,.shot-ph{width:100%;aspect-ratio:4/3;border-radius:16px;object-fit:cover;display:block}
.shot-ph{background:repeating-linear-gradient(45deg,var(--menta),var(--menta) 12px,rgba(168,134,60,.1) 12px,rgba(168,134,60,.1) 24px);
  display:flex;align-items:center;justify-content:center}
.shot-ph span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--forest);
  background:var(--ivory);border:1px solid rgba(63,75,59,.16);border-radius:999px;padding:8px 18px}
.people-shot figcaption{margin-top:12px;font-size:.78rem;letter-spacing:.06em;color:rgba(63,75,59,.66)}
@media(max-width:820px){.people-grid{grid-template-columns:1fr;gap:22px}}

.pd-code{font-size:.66rem;letter-spacing:.2em;color:rgba(63,75,59,.45);margin:-12px 0 16px;font-family:'Inter',sans-serif}

/* --- comparativa de tamanos --- */
.sizes-fig{margin:30px 0 0;border-radius:18px;overflow:hidden;background:var(--menta)}
.sizes-fig img{width:100%;height:auto;display:block}
.sizes-tab{width:100%;border-collapse:collapse;margin-top:26px;font-size:.9rem}
.sizes-tab th{text-align:left;font-family:'Inter',sans-serif;font-weight:500;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(63,75,59,.6);
  padding:0 14px 12px 0;border-bottom:1px solid rgba(63,75,59,.2)}
.sizes-tab td{padding:14px 14px 14px 0;border-bottom:1px solid rgba(63,75,59,.1);color:var(--forest)}
.sizes-tab tbody tr:last-child td{border-bottom:none}
.sizes-tab td:first-child{font-family:'Fraunces',serif;font-size:1rem}
@media(max-width:640px){
  /* en pantalla chica el texto de la imagen no se lee: la tabla hace el trabajo */
  .sizes-fig{display:none}
  .sizes-tab{margin-top:22px;font-size:.82rem}
  .sizes-tab th,.sizes-tab td{padding-right:8px}
  .sizes-tab td:first-child{font-size:.9rem}
}

/* --- foto de producto dentro de la tarjeta: desborda el recuadro menta --- */
.pd-card{position:relative;overflow:visible}
.card-shot{height:118px;margin:-4px 0 14px;display:flex;align-items:flex-end;
  justify-content:center;pointer-events:none}
.card-shot img{width:auto;height:100%;max-width:none;
  filter:drop-shadow(0 14px 22px rgba(44,54,40,.2))}
.pd-grid{align-items:stretch}
@media(max-width:560px){
  .card-shot{height:104px}
}

/* --- pagina de producto: sin margen sobrante al final de cada bloque --- */
.pd-sec>*:last-child,.pd-hero-txt>*:last-child,.pd-aside>*:last-child,
.pd-card>*:last-child,.social-close>*:last-child{margin-bottom:0}
.pd-bar{margin-bottom:18px}
.pd-note{margin-bottom:0}
.sizes-tab{margin-bottom:0}
.pd-sizes .pd-note-dark{margin-top:22px}

/* --- Origen: dos fotos apiladas --- */
.o-stack{display:flex;flex-direction:column;gap:12px}
.o-shot{margin:0}
.o-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px;display:block}
.o-shot:first-child img{aspect-ratio:1/1}
.o-shot:first-child figcaption{display:none}
.o-shot figcaption{margin-top:9px;font-size:.72rem;letter-spacing:.08em;color:rgba(63,75,59,.6)}
@media(max-width:960px){.o-stack{max-width:420px;margin:0 auto}}

/* --- Origen: dos fotos apiladas (palma y fibra) --- */
.o-stack{display:flex;flex-direction:column;gap:12px}
.o-shot{margin:0}
.o-shot img{width:100%;border-radius:18px;object-fit:cover;display:block}
.o-shot:first-child img{aspect-ratio:4/3}
.o-shot:last-child img{aspect-ratio:21/9}
.o-shot:first-child figcaption{display:none}
.o-shot figcaption{margin-top:9px;font-size:.72rem;letter-spacing:.08em;color:rgba(63,75,59,.6);padding:0 2px}
@media(max-width:960px){.o-stack{max-width:420px;margin:0 auto}}



/* --- filas de medidas: entran una tras otra --- */
.sizes-tab[data-reveal-rows] tbody tr{
  opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.sizes-tab[data-reveal-rows] tbody tr.dentro{opacity:1;transform:none}

/* --- ficha: palma acostada, mas grande --- */
/* Teepee acostado: desborda el recuadro para dar sensacion de vivo */
.card-shot-wide{height:150px;margin:0 -30px 14px;overflow:visible;position:relative}
.card-shot-wide img{height:196px;width:auto;max-width:none;position:relative;top:-14px;
  filter:drop-shadow(0 16px 26px rgba(44,54,40,.22))}

/* --- nota pequena en especificaciones --- */
.spec-nota{display:block;font-style:normal;font-family:'Inter',sans-serif;
  font-size:.68rem;letter-spacing:.04em;color:rgba(63,75,59,.5);margin-top:5px}

/* --- foto del arreglo dentro del bloque de argumentos --- */
.aside-shot{margin:22px 0 0}
.aside-shot img{width:100%;border-radius:14px;display:block;aspect-ratio:4/3;object-fit:cover}

@media(max-width:560px){
  .card-shot-wide{height:124px;margin:0 -18px 12px}
  .card-shot-wide img{height:162px;top:-12px}
}

/* ---------- BARRA DE VIDA UTIL ----------
   Verde vivo, no dorado: el dorado se lee como material seco.
   Un pulso de luz recorre la barra en bucle, como una señal viva. */
.pd-bar[data-fill]{position:relative;background:rgba(244,242,235,.08);
  border:1px solid rgba(143,196,124,.22);overflow:hidden;height:52px;border-radius:10px}

.pd-bar[data-fill] .pd-bar-fill{
  position:relative;width:100%;height:100%;
  background:linear-gradient(90deg,#4E7A46 0%,#6FA45F 46%,#8FC47C 100%);
  transform:scaleX(1);transform-origin:left center;
  transition:transform 1.9s cubic-bezier(.16,1,.3,1);
  justify-content:flex-start;padding-left:24px;color:#F4F2EB;
  text-shadow:0 1px 6px rgba(26,40,22,.35)}
.pd-bar[data-fill] .pd-bar-fill.llena{transform:scaleX(1)}

.pd-bar[data-fill] .pd-bar-fill span{position:relative;z-index:2;white-space:nowrap;
  opacity:1;transition:opacity .9s ease .6s}
.pd-bar[data-fill] .pd-bar-fill.llena span{opacity:1}

/* el pulso: banda de luz que cruza y vuelve a empezar */
.pd-bar[data-fill] .pd-bar-fill::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 0%,transparent 34%,
    rgba(214,240,201,.10) 44%,
    rgba(230,248,220,.34) 50%,
    rgba(214,240,201,.10) 56%,
    transparent 66%,transparent 100%);
  background-size:220% 100%;background-position:-60% 0;
  opacity:0}
.pd-bar[data-fill] .pd-bar-fill.llena::after{
  opacity:1;animation:pulso-vida 3.6s cubic-bezier(.45,0,.35,1) 1.5s infinite}
@keyframes pulso-vida{
  0%{background-position:-60% 0}
  100%{background-position:160% 0}
}
@media(prefers-reduced-motion:reduce){
  .pd-bar[data-fill] .pd-bar-fill::after{animation:none !important;opacity:0}
}

.cta-destaca{display:block;margin-top:12px;color:var(--gold);font-weight:500;
  font-size:.95rem;letter-spacing:.02em}

/* especificaciones: sin huecos grises cuando la ultima fila queda incompleta */
.pd-specs>div:last-child{border-bottom:none}
.pd-specs>div:nth-last-child(-n+3):nth-child(3n+1),
.pd-specs>div:nth-last-child(-n+2):nth-child(3n+2),
.pd-specs>div:nth-last-child(-n+1):nth-child(3n){border-bottom:none}
@media(max-width:1020px){
  .pd-specs>div:nth-child(3n){border-right:1px solid rgba(63,75,59,.14)}
  .pd-specs>div:nth-child(2n){border-right:none}
}
@media(max-width:560px){
  .pd-specs>div,.pd-specs>div:nth-child(2n),.pd-specs>div:nth-child(3n){border-right:none}
  .pd-specs>div:last-child{border-bottom:none}
}

/* la ultima especificacion ocupa la fila completa: sin celdas huecas */
.pd-specs>div:nth-child(7){grid-column:1/-1;border-right:none;border-bottom:none}

/* ---------- MODAL DE COTIZACION ---------- */
#cotModal .modal{max-width:620px}
#cotModal h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.45rem;color:var(--forest);
  line-height:1.24;margin-bottom:12px}
#cotModal .eyebrow{text-align:left;margin-bottom:12px}
#cotModal label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(63,75,59,.62);margin:16px 0 7px}
#cotModal .opt{text-transform:none;letter-spacing:0;color:rgba(63,75,59,.42)}
#cotModal input:not([type="checkbox"]),#cotModal select,#cotModal textarea{
  width:100%;font-family:'Inter',sans-serif;font-size:.92rem;color:var(--ink);
  background:var(--ivory);border:1px solid rgba(63,75,59,.2);border-radius:10px;
  padding:12px 14px;transition:border-color .3s;resize:vertical}
#cotModal input:not([type="checkbox"]):focus,#cotModal select:focus,#cotModal textarea:focus{
  outline:none;border-color:var(--forest)}
#cotModal input#c-prod{background:var(--menta);border-color:transparent;
  font-family:'Fraunces',serif;font-size:.98rem;color:var(--forest);cursor:default}
#cotModal select#c-prod{background:var(--ivory)}
.modal-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.modal-row label{margin-top:16px}
#cotModal .consent{text-transform:none;letter-spacing:0;margin:20px 0 4px}
#cotModal #cotSend{width:100%;margin-top:18px}
#cotOk{display:none;text-align:center}
#cotOk.show{display:block}
#cotOk .eyebrow{text-align:center}
#cotOk .btn{margin-top:22px}
@media(max-width:560px){
  .modal-row{grid-template-columns:1fr;gap:0}
  #cotModal h3{font-size:1.25rem}
}

/* modal de cotizacion: casilla y boton de cierre con su propio estilo */
#cotModal .consent input[type="checkbox"]{width:17px;height:17px;flex:0 0 17px;padding:0;
  background:transparent;border:1px solid rgba(63,75,59,.42);border-radius:4px}
#cotModal .consent input[type="checkbox"]:checked{background:var(--forest);border-color:var(--forest)}
#cotModal .modal-x{background:none;border:none;font-size:1.7rem;line-height:1;
  color:rgba(63,75,59,.45);cursor:pointer;position:absolute;top:18px;right:22px;padding:4px 8px;
  transition:color .3s}
#cotModal .modal-x:hover{color:var(--forest)}
#cotModal .modal{position:relative;padding-top:38px}
#cotModal .consent span{padding-left:2px}
#cotModal .consent{gap:12px;align-items:flex-start}

/* --- solo cuando el JS toma el control se oculta para animar --- */
.anim-js .pd-bar[data-fill] .pd-bar-fill{transform:scaleX(0)}
.anim-js .pd-bar[data-fill] .pd-bar-fill.llena{transform:scaleX(1)}
.anim-js .pd-bar[data-fill] .pd-bar-fill span{opacity:0}
.anim-js .pd-bar[data-fill] .pd-bar-fill.llena span{opacity:1}
.anim-js .pd-bar[data-fill] .pd-bar-fill::after{opacity:0}
.anim-js .pd-bar[data-fill] .pd-bar-fill.llena::after{opacity:1}
.anim-js .sizes-tab[data-reveal-rows] tbody tr{opacity:0;transform:translateY(14px)}
.anim-js .sizes-tab[data-reveal-rows] tbody tr.dentro{opacity:1;transform:none}
/* el pulso corre siempre que la barra este llena, con o sin JS */
.pd-bar[data-fill] .pd-bar-fill::after{opacity:1;
  animation:pulso-vida 3.6s cubic-bezier(.45,0,.35,1) 1.5s infinite}

/* Safari en Mac con "Reducir movimiento" apagaba la animacion y dejaba
   el heroe en opacity:0. Estas reglas garantizan que siempre termine visible. */
.hero-visual{animation-fill-mode:both}
.hero-text>*{animation-fill-mode:both}
.no-anim .hero-visual,.no-anim .hero-text>*{opacity:1 !important;transform:none !important}

/* ---------- JAPONES ----------
   Fraunces e Inter no tienen kanji. Noto Serif/Sans JP los cubren
   y se colocan DESPUES en la pila, para que el latin siga viendose igual. */
html[lang="ja"] body{font-family:'Inter','Noto Sans JP',sans-serif;
  letter-spacing:.01em;line-height:1.85}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] h4,
html[lang="ja"] .q-num,html[lang="ja"] .impact-num,html[lang="ja"] .logo-txt{
  font-family:'Fraunces','Noto Serif JP',serif;font-weight:500;letter-spacing:.02em}
/* el japones no lleva cursiva: se sustituye por peso */
html[lang="ja"] em{font-style:normal;font-weight:500}
html[lang="ja"] em[lang="la"],html[lang="ja"] .pd-common em{font-style:italic;font-weight:400}
/* las mayusculas espaciadas no aplican al japones */
html[lang="ja"] .eyebrow,html[lang="ja"] .mtag,html[lang="ja"] .m-ver,
html[lang="ja"] .impact-label,html[lang="ja"] .cat-go{letter-spacing:.14em}
html[lang="ja"] .lede,html[lang="ja"] .pd-lead{line-height:1.95}
html[lang="ja"] .hero h1{line-height:1.3}

/* selector de tres idiomas */
.lang3{display:inline-flex;align-items:center;gap:5px;font-family:'Inter',sans-serif;
  font-size:.7rem;letter-spacing:.09em;font-weight:500;
  border:1px solid rgba(63,75,59,.22);border-radius:999px;padding:7px 13px;white-space:nowrap}
.lang3 a{color:rgba(63,75,59,.5);text-decoration:none;transition:color .3s}
.lang3 a:hover{color:var(--forest)}
.lang3 .on{color:var(--forest);font-weight:600}
.lang3 .sep{opacity:.35;color:rgba(63,75,59,.5)}
@media(max-width:960px){.lang3{font-size:.66rem;padding:6px 11px;gap:4px}}

/* el correo en el pie no se subraya como los demas enlaces */
.flinks a[href^="mailto"]{letter-spacing:.02em;overflow-wrap:anywhere}

/* Red de seguridad: ningun elemento debe poder ensanchar la pagina.
   El desbordamiento horizontal en movil se produjo por una cadena larga
   sin espacios (una direccion de correo) en el pie. */

footer{max-width:100%;overflow-x:hidden}
@media(max-width:560px){
  footer .flinks{gap:12px 20px}
  footer .flinks a{font-size:.74rem}
}

/* ================= LA OPERACION: fotos sobre la mesa =================
   El scroll deja de desplazar y pasa a repartir las fotos en la escena. */
.mesa-wrap{height:700vh;position:relative;background:var(--ivory);padding:0}
.mesa{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;max-width:100vw}
.mesa-tit{position:absolute;top:10vh;left:0;right:0;text-align:center;z-index:1;pointer-events:none}
.mesa-tit .eyebrow{margin-bottom:14px}
.mesa-tit h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--forest);line-height:1.2;margin:0}

.mesa .foto{--fuera:0;position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%)
            translate(calc(var(--x) + var(--ex)*var(--fuera)),
                      calc(var(--y) + var(--ey,0%)*var(--fuera) + var(--arco,0%)))
            rotate(calc(var(--eg)*var(--giro,var(--fuera)) + var(--g)*(1 - var(--giro,var(--fuera)))))
            scale(calc(1 - .05*var(--esc,var(--fuera))));
  
  margin:0;will-change:transform,opacity}
.mesa .foto.horiz{width:min(340px,30vw)}
.mesa .foto.vert{width:min(230px,20vw)}
.mesa .foto img{width:100%;display:block;border:4px solid var(--ivory);border-radius:3px;
  box-shadow:0 26px 54px rgba(44,54,40,.22),0 3px 10px rgba(44,54,40,.12)}
.mesa .foto.horiz img{aspect-ratio:4/3;object-fit:cover}
.mesa .foto figcaption{position:absolute;left:0;right:0;bottom:-24px;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(63,75,59,.55);text-align:center;
  opacity:calc(1 - var(--fuera)*2.6)}

@media(max-width:860px){
  .mesa-wrap{height:640vh}
  .mesa .foto.horiz{width:58vw}
  .mesa .foto.vert{width:38vw}
  /* en pantalla angosta los desplazamientos se reducen: si no, las fotos se salen */
  .mesa .foto{
    transform:translate(-50%,-50%)
              translate(calc((var(--x) + var(--ex)*var(--fuera)) * .62), calc(var(--y)*.78 + var(--ey,0%)*var(--fuera) + var(--arco,0%)))
              rotate(calc(var(--eg)*var(--giro,var(--fuera)) + var(--g)*(1 - var(--giro,var(--fuera)))))
              scale(calc(1 - .06*var(--fuera)))}
  .mesa-tit{top:13vh}
  .mesa-tit h2{font-size:1.5rem}
  .mesa .foto figcaption{font-size:.58rem;bottom:-20px;letter-spacing:.1em}
}
@media(max-width:560px){
  .mesa .foto.horiz{width:62vw}
  .mesa .foto.vert{width:40vw}
  .mesa .foto{
    transform:translate(-50%,-50%)
              translate(calc((var(--x) + var(--ex)*var(--fuera)) * .54), calc(var(--y)*.72 + var(--ey,0%)*var(--fuera) + var(--arco,0%)))
              rotate(calc(var(--eg)*var(--giro,var(--fuera)) + var(--g)*(1 - var(--giro,var(--fuera)))))
              scale(calc(1 - .06*var(--fuera)))}
}
/* sin movimiento: retícula simple, el contenido nunca se pierde */
@media(prefers-reduced-motion:reduce){
  .mesa-wrap{height:auto}
  .mesa{position:static;height:auto;display:grid;grid-template-columns:repeat(3,1fr);
    gap:30px;padding:90px 6vw;overflow:visible}
  .mesa .foto{position:static;width:100%!important;transform:none!important;opacity:1!important}
  .mesa .foto figcaption{position:static;margin-top:10px;opacity:1!important}
  .mesa-tit{position:static;grid-column:1/-1;margin-bottom:10px}
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){
  .mesa{grid-template-columns:1fr 1fr}
}

/* la ultima foto cierra el relato: entra al centro, mas grande, encima de todas */
.mesa .foto.remate{width:min(420px,36vw)}
.mesa .foto.remate img{border-width:5px;
  box-shadow:0 34px 68px rgba(44,54,40,.28),0 4px 14px rgba(44,54,40,.16)}
@media(max-width:860px){.mesa .foto.remate{width:70vw}}
@media(max-width:560px){.mesa .foto.remate{width:76vw}}

/* --- artículo de Manos que cosechan --- */
.story-foto{margin:0}
.story-foto img{width:100%;border-radius:16px;display:block;aspect-ratio:4/5;
  object-fit:cover;object-position:50% 18%}
.story-fecha{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(63,75,59,.45);margin-bottom:26px}
.story-body h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.18rem;
  color:var(--forest);margin:34px 0 14px}
.story-body p{line-height:1.85;margin-bottom:18px}
.story-body em{font-style:italic;color:var(--forest)}
.story-cierre{margin-top:30px;padding-top:20px;border-top:1px solid rgba(63,75,59,.14);
  font-size:.84rem;color:rgba(63,75,59,.6);line-height:1.7}
.story .shot-ph{aspect-ratio:4/5;border-radius:16px}
@media(max-width:860px){
  .story-body h3{font-size:1.08rem;margin:28px 0 12px}
}

/* ============ ÍNDICE DE MANOS QUE COSECHAN ============ */
.destacada{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:center;
  text-decoration:none;color:inherit;padding-bottom:46px;
  border-bottom:1px solid rgba(63,75,59,.16);
  /* el palpitar al tocar: la pieza cede y vuelve, como una tecla fisica */
  transition:transform .5s cubic-bezier(.16,1,.3,1)}
.destacada:active{transform:scale(.985)}
.dest-foto{margin:0;overflow:hidden;border-radius:18px}
.dest-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 18%;display:block;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.destacada:hover .dest-foto img{transform:scale(1.035)}
.dest-meta{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(63,75,59,.5);margin-bottom:12px}
.destacada h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--forest);line-height:1.18;margin-bottom:16px}
.dest-entrada{line-height:1.8;color:rgba(44,54,40,.82);margin-bottom:16px}
.dest-quien{font-family:'Fraunces',serif;font-size:.95rem;color:var(--gold);margin-bottom:22px}
.dest-leer{display:inline-flex;align-items:center;gap:9px;font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--forest)}
.dest-leer i{font-style:normal;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.destacada:hover .dest-leer i{transform:translateX(6px)}

/* filas de conversaciones anteriores */
.fila-art{display:grid;grid-template-columns:132px 1fr auto;gap:28px;align-items:center;
  padding:26px 4px;border-bottom:1px solid rgba(63,75,59,.12);
  text-decoration:none;color:inherit;
  transition:background .45s,padding-left .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.fila-art:hover{background:rgba(211,222,204,.3);padding-left:14px}
.fila-art:active{transform:scale(.99)}
.fila-art img{width:132px;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block}
.fila-art h3{font-family:'Fraunces',serif;font-weight:400;font-size:1.18rem;color:var(--forest);margin-bottom:5px}
.fila-art .quien{font-size:.84rem;color:rgba(63,75,59,.6)}
.fila-art .flecha{font-size:1.1rem;color:rgba(63,75,59,.32);
  transition:transform .5s cubic-bezier(.16,1,.3,1),color .45s}
.fila-art:hover .flecha{transform:translateX(5px);color:var(--forest)}

.archivo{margin-top:52px}
.archivo-tit{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(63,75,59,.5);margin-bottom:20px}
.archivo-vacio{font-size:.9rem;color:rgba(63,75,59,.55);padding:22px 0;
  border-top:1px solid rgba(63,75,59,.12)}

/* página del artículo */
.art-page .story{grid-template-columns:.82fr 1.18fr}
.art-volver{margin:0 0 40px;padding:0;border:none}
.art-volver a{font-size:.8rem}

@media(max-width:860px){
  /* la pagina del articulo tambien se apila: si no, el texto queda en 180px */
  .art-page .story{grid-template-columns:1fr;gap:26px}
  .art-page .story-media{max-width:360px}
  .destacada{grid-template-columns:1fr;gap:24px}
  .dest-foto img{aspect-ratio:4/3;object-position:50% 14%}
  .fila-art{grid-template-columns:92px 1fr;gap:18px}
  .fila-art .flecha{display:none}
}
@media(prefers-reduced-motion:reduce){
  .destacada,.fila-art,.dest-foto img,.dest-leer i,.fila-art .flecha{transition:none!important;transform:none!important}
}

/* transicion de salida al abrir un articulo */
body{transition:opacity .26s ease}
body.saliendo{opacity:0}
@media(prefers-reduced-motion:reduce){body,body.saliendo{transition:none;opacity:1!important}}

/* más margen lateral en pantallas chicas: el texto no debe rozar el borde */
@media(max-width:600px){
  main.social-main{padding-left:8vw;padding-right:8vw}
  main.pd{padding-left:8vw;padding-right:8vw}
  main.legal{padding-left:8vw;padding-right:8vw}
}
/* la fila del archivo no deja que el texto toque la miniatura */
.fila-art{column-gap:26px}
.fila-art>div{min-width:0}
.fila-art h3,.fila-art .quien{overflow-wrap:anywhere}

/* --- compartir artículo --- */
.compartir{margin-top:38px;padding-top:26px;border-top:1px solid rgba(63,75,59,.14)}
.comp-tit{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(63,75,59,.5);margin-bottom:14px}
.comp-btns{display:flex;flex-wrap:wrap;gap:10px}
.comp{display:inline-flex;align-items:center;gap:9px;
  font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.03em;
  color:var(--forest);background:transparent;cursor:pointer;
  border:1px solid rgba(63,75,59,.22);border-radius:999px;padding:9px 17px;
  text-decoration:none;
  transition:background .4s,border-color .4s,transform .4s cubic-bezier(.16,1,.3,1)}
.comp:hover{background:var(--menta);border-color:transparent}
.comp:active{transform:scale(.96)}
.comp svg{flex:0 0 auto;opacity:.75}
.comp.listo{background:var(--forest);border-color:var(--forest);color:var(--ivory)}
.comp.listo svg{opacity:1}
@media(max-width:560px){.comp{font-size:.74rem;padding:8px 14px}}
@media(prefers-reduced-motion:reduce){.comp{transition:none}}