/* Layout de referencia (Voldog): header con logo centrado, hero en tarjeta redondeada, secciones que se encastran con curvas, tarjetas blancas flotantes, garabatos a mano. Paleta y tipografías: identidad COCON. */
:root{
  --salvia:#3F5442; --salvia-2:#4B6350; --umber:#6E5236; --crema:#F2EBDD; --crema-2:#E9E0CE; --papel:#FBF8F2; --blanco:#FFFFFF;
  --brote:#C7D36F; --humus:#221B16; --muted:#6B6257; --line:#E2D8C5;
  --display:"Barlow Condensed","Arial Narrow",sans-serif; --body:"Barlow",system-ui,sans-serif; --hand:"Caveat","Comic Sans MS",cursive;
  --r-xl:40px; --r-l:28px; --r-m:20px;
  --shadow:0 18px 40px -22px rgba(34,27,22,.35);
  --hh-top:112px; --hh:72px; --tb:30px; --card-top:94px; --hb:32px; --inset:30px; --ns:1;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:124px}
/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--crema);color:var(--humus);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-family:var(--body);font-weight:500;line-height:1.12;color:var(--salvia);text-wrap:balance}
h2 strong,h3 strong{font-weight:700}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1440px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--brote);outline-offset:3px}

/* botones */
.pill{display:inline-flex;align-items:center;gap:14px;background:var(--blanco);color:var(--salvia);text-decoration:none;font-family:var(--body);font-weight:600;font-size:16px;border:0;border-radius:60px;padding:8px 8px 8px 22px;box-shadow:var(--shadow);cursor:pointer;transition:transform .2s}
.pill:hover{transform:translateY(-2px)}
.pill .arr{width:40px;height:40px;border-radius:50%;background:var(--brote);display:grid;place-items:center;flex:none;transition:transform .2s}
.pill:hover .arr{transform:translateX(3px)}
.pill .arr svg{width:18px;height:18px}
.pill.flat{box-shadow:none;background:var(--crema)}
.cta-b{display:inline-flex;align-items:center;gap:10px;background:var(--brote);color:var(--salvia);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:16px;text-decoration:none;border:0;border-radius:40px;padding:12px 22px;cursor:pointer;transition:transform .2s,background .2s}
.cta-b:hover{transform:translateY(-2px)}
.cta-b svg{width:18px;height:18px}
.cta-b.dark{background:var(--salvia);color:var(--crema)}
.cta-b.ok{background:var(--salvia);color:var(--brote)}
.tag{display:inline-block;background:var(--blanco);color:var(--salvia);font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.14em;font-size:14px;padding:8px 18px;border-radius:30px;box-shadow:0 6px 16px -10px rgba(34,27,22,.3)}

/* garabatos */
.doodle{position:absolute;pointer-events:none}
.squig{display:block;width:150px;height:30px;margin:14px auto 0;color:var(--umber)}
.hl{position:relative;white-space:nowrap}
.hl svg{position:absolute;left:-4%;bottom:-.32em;width:108%;height:.42em;color:var(--brote);z-index:-1}
.hl{z-index:0}

/* secciones con curva (encastre tipo Voldog) */
.band{position:relative;padding-block:110px calc(var(--ch) + 30px)}
/* empresas y organizaciones */
.band.salvia{background:var(--salvia);color:var(--crema)}
.band.salvia h2,.band.salvia h3{color:var(--crema)}
.band.salvia h2 strong{color:var(--brote)}
.band.salvia .eyebrow{color:var(--brote)}
.biz-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:44px}
.biz-head h2{font-size:clamp(32px,4.2vw,54px)}
.biz-head>p{color:#DCE2D6;max-width:48ch}
.biz-hand{font-family:var(--hand);font-weight:700;color:var(--brote);font-size:clamp(26px,2.6vw,34px);line-height:1;margin-top:14px;transform:rotate(-2deg);transform-origin:left}
.biz-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.biz-card{background:rgba(242,235,221,.08);border:1.5px solid rgba(242,235,221,.16);border-radius:var(--r-l);padding:26px;display:grid;gap:10px;align-content:start;transition:background .3s,transform .3s}
.biz-card:hover{background:rgba(242,235,221,.13);transform:translateY(-4px)}
.biz-card .n{width:50px;height:50px;border-radius:50%;background:var(--brote);color:var(--salvia);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:26px}
.biz-card h3{font-size:22px;font-weight:700}
.biz-card p{color:#DCE2D6;font-size:16px}
.biz-foot{margin-top:22px;background:var(--crema);color:var(--humus);border-radius:var(--r-l);padding:28px 32px;display:grid;grid-template-columns:1.1fr 1fr auto;gap:28px;align-items:center}
.band.salvia .biz-foot h3{color:var(--salvia);font-size:20px;font-weight:700;margin-bottom:12px}
.biz-tags{display:flex;flex-wrap:wrap;gap:8px}
.biz-tags span{background:var(--blanco);color:var(--salvia);font-weight:600;font-size:14px;padding:7px 14px;border-radius:30px}
.biz-gains{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.biz-gains li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:#3d362f}
.biz-gains .ck{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brote);display:grid;place-items:center;margin-top:1px}
.biz-gains .ck svg{width:13px;height:13px}
.biz-foot .pill{white-space:nowrap}
@media (max-width:1100px){.biz-steps{grid-template-columns:1fr 1fr}.biz-foot{grid-template-columns:1fr 1fr}.biz-foot .pill{grid-column:1/-1;justify-self:start}}
@media (max-width:760px){.biz-head,.biz-foot{grid-template-columns:1fr;gap:18px}.biz-steps{grid-template-columns:1fr}}

/* curvas animadas: el borde pasa de cóncavo a cúpula al hacer scroll (como la referencia) */
:root{--ch:150px}
.curve{position:relative}
.curve-svg{position:absolute;left:0;width:100%;height:var(--ch);top:calc(var(--ch) * -1 + 1px);display:block;overflow:visible;pointer-events:none;z-index:0}
.band.papel{background:var(--papel)}
.band.crema{background:var(--crema)}
.band.crema2{background:var(--crema-2)}
@media (max-width:700px){.band{padding-block:84px calc(var(--ch) + 24px)}:root{--ch:70px}}

/* header */
.topbar{position:fixed;top:0;left:0;right:0;z-index:41;height:var(--tb);background:var(--humus);color:var(--crema);overflow:hidden;display:flex;align-items:center;font-size:13px;line-height:1;transform:translateY(-100%);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.topbar.show{transform:none}
.tb-track{display:flex;width:max-content;animation:tbmq 38s linear infinite}
.topbar:hover .tb-track{animation-play-state:paused}
.tb-i{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;padding-right:46px}
.tb-i::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--brote);margin-left:46px}
.topbar svg{width:15px;height:15px;flex:none;color:var(--brote)}
.topbar b{color:var(--brote);font-weight:600}
@keyframes tbmq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tb-track{animation:none}}
header.site{position:fixed;top:0;left:0;right:0;z-index:40;background:rgba(242,235,221,0);border-bottom:1px solid transparent;transition:top .35s ease,background .35s,border-color .35s,box-shadow .35s}
header.site.scrolled{top:var(--tb)}
header.site.scrolled{background:rgba(251,248,242,.92);backdrop-filter:blur(10px)}
main{padding-top:0}
header.site.scrolled{border-color:var(--line);box-shadow:0 8px 24px -20px rgba(34,27,22,.4)}
.hbar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;height:var(--hh-top);transition:height .35s ease}
header.site.scrolled .hbar{height:var(--hh)}
.hbar>*{transition:transform .35s ease}
header.site:not(.scrolled) nav.main{transform:translateX(var(--inset))}
header.site:not(.scrolled) .hright{transform:translateX(calc(var(--inset) * -1))}
nav.main ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
nav.main a{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:16px;text-decoration:none;color:var(--salvia);white-space:nowrap;transition:color .35s}
nav.main a:hover{color:var(--umber)}
.logo{position:relative;display:block;justify-self:center;width:200px;height:var(--hh-top);transition:height .35s ease}
.logo svg{position:absolute;left:50%;top:50%;width:auto;display:block;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.lg-word{height:46px;opacity:0;transform:translate(-50%,-30%)}
header.site:not(.scrolled) .logo{pointer-events:none}
header.site.scrolled .logo{height:var(--hh)}
header.site.scrolled .lg-word{opacity:1;transform:translate(-50%,-50%)}
@media (prefers-reduced-motion:reduce){.logo svg,.hbar,.logo{transition:none}}
.hright{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.badge[hidden]{display:none}
.badge{background:var(--salvia);color:var(--brote);border-radius:20px;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:13px;padding:0 6px;letter-spacing:0}
.burger{flex:none;width:46px;height:46px;border-radius:50%;background:var(--brote);border:0;display:grid;place-items:center;cursor:pointer;color:var(--salvia)}
.burger svg{width:20px;height:20px}
.menu{position:fixed;inset:0;z-index:60;background:var(--salvia);color:var(--crema);display:grid;align-content:center;justify-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s}
.menu.open{opacity:1;pointer-events:auto}
.menu a{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,6vw,58px);text-decoration:none;line-height:1.15}
.menu a:hover{color:var(--brote)}
.menu .close{position:absolute;top:18px;right:20px;width:50px;height:50px;border-radius:50%;border:0;background:var(--brote);color:var(--salvia);font-size:26px;cursor:pointer}
.menu .hand{font-family:var(--hand);font-size:30px;color:var(--brote);margin-top:20px}

@media (max-width:980px){nav.main ul{display:none}.hright .cta-b .lbl{display:none}.hright .cta-b{padding:12px 13px}.hright{gap:6px}:root{--hh-top:84px;--hh:64px;--card-top:78px;--inset:0px;--ns:.78}.lg-word{height:36px}.logo{width:150px}}

/* hero: textos de la v2 sobre la tarjeta verde */
.hero{padding-top:var(--card-top);padding-bottom:calc(var(--ch) + 10px)}
.hero-wrap{position:relative}
.notch{position:absolute;left:50%;top:0;z-index:3;width:calc(148.0px * var(--ns));height:calc(126.0px * var(--ns));transform:translate(-50%,calc(-76.0px * var(--ns)));pointer-events:none}
.notch svg{position:absolute;display:block}
.notch-shape{inset:0;width:100%;height:100%;fill:var(--crema)}
.notch-icon{left:50%;top:calc(64.0px * var(--ns));height:calc(86px * var(--ns));width:auto;transform:translate(-50%,-50%)}
.hero-card{position:relative;background:#38443A;border-radius:var(--r-xl);min-height:max(520px,calc(100vh - var(--card-top) - var(--hb)));min-height:max(520px,calc(100dvh - var(--card-top) - var(--hb)));overflow:hidden;isolation:isolate;display:grid;align-items:center;padding:clamp(64px,9vh,96px) clamp(28px,6vw,96px) clamp(44px,6vh,72px)}
.hero-copy{position:relative;z-index:2;max-width:1100px}
.hero-copy .eyebrow{color:var(--brote);margin-bottom:18px}
.hero h1{font-family:var(--display);font-weight:800;text-transform:uppercase;color:#FFFFFF;font-size:clamp(52px,8vw,124px);line-height:.92;letter-spacing:-.005em;transition:opacity .3s}
.hero h1.swap,.hero-tag.swap{opacity:0}
.hero h1.long{font-size:clamp(40px,7.2vw,112px);hyphens:manual}
.hero h1 em{font-style:normal;color:var(--brote)}
.hero-tag{font-family:var(--hand);font-weight:700;color:var(--crema);font-size:clamp(26px,2.8vw,38px);line-height:1;margin-top:14px;transform:rotate(-2deg);transform-origin:left;transition:opacity .3s}
.hero .lead{color:#DCE2D6;font-size:clamp(17px,1.5vw,20px);max-width:46ch;margin-top:26px;transition:opacity .3s}
.hero .lead b{color:var(--crema);font-weight:600;background:linear-gradient(transparent 62%,rgba(199,211,111,.45) 0)}
.hero .lead.swap{opacity:0}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ghost{display:inline-flex;align-items:center;gap:10px;color:var(--crema);text-decoration:none;font-family:var(--body);font-weight:600;font-size:16px;border:2px solid rgba(242,235,221,.5);border-radius:60px;padding:14px 22px;transition:border-color .2s,background .2s}
.ghost:hover{border-color:var(--brote);background:rgba(199,211,111,.12)}
.hero .scribble{position:absolute;z-index:1;color:var(--brote);pointer-events:none}
.hero .sc-1{right:9%;top:30%;width:120px;opacity:.9}
.hero .sc-2{right:6%;bottom:12%;width:min(34%,380px);color:rgba(242,235,221,.22)}
.hero .sc-3{right:24%;top:52%;width:64px;color:var(--crema)}
.switch{display:flex;gap:6px;background:var(--blanco);border-radius:50px;padding:7px;box-shadow:var(--shadow)}
.switch button{display:flex;align-items:center;gap:8px;border:0;background:transparent;border-radius:40px;padding:8px 16px 8px 8px;cursor:pointer;font-family:var(--body);font-weight:600;font-size:15px;color:var(--muted)}
.switch button .ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--crema)}
.switch button svg{width:22px;height:22px}
.switch button[aria-pressed="true"]{background:var(--brote);color:var(--salvia)}
.switch button[aria-pressed="true"] .ic{background:var(--blanco)}
@media (max-width:980px){.hero .sc-1,.hero .sc-3{display:none}}
@media (max-width:700px){
  .hero-card{border-radius:30px;padding:84px 22px 28px;min-height:max(480px,calc(100dvh - var(--card-top) - 20px))}
  .hero-actions{flex-direction:column;align-items:stretch}
  .switch{align-self:flex-start}
  .hero-ctas{flex-direction:column}
  .hero-ctas .pill,.hero-ctas .ghost{justify-content:space-between;white-space:nowrap}
  .hero-ctas .ghost{justify-content:center}
  .hero .sc-2{display:none}
}

/* encabezados de sección */
.head-c{text-align:center;max-width:820px;margin:0 auto 48px;position:relative}
.head-c h2,.head-split h2{font-size:clamp(32px,4.2vw,54px)}
.head-c p{color:var(--muted);max-width:62ch;margin:18px auto 0}
.head-split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px;position:relative}
.head-split p{color:var(--salvia);max-width:44ch}
.eyebrow{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:15px;color:var(--umber);margin-bottom:12px}
@media (max-width:860px){.head-split{grid-template-columns:1fr;gap:16px}}



/* productos */
.tabs{display:inline-flex;gap:6px;background:var(--blanco);border-radius:50px;padding:6px;box-shadow:var(--shadow);margin-bottom:34px}
.tabs button{border:0;background:transparent;border-radius:40px;padding:10px 20px;font-family:var(--body);font-weight:600;font-size:15px;color:var(--muted);cursor:pointer}
.tabs button[aria-pressed="true"]{background:var(--brote);color:var(--salvia)}
@media (max-width:620px){.tabs{display:flex;flex-wrap:wrap;border-radius:26px;max-width:100%}.tabs button{padding:9px 14px;font-size:14px}}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.card .pic img.photo{width:min(210px,90%);aspect-ratio:1;object-fit:cover;border-radius:50%;border:8px solid var(--blanco);filter:none;box-shadow:0 18px 30px -18px rgba(34,27,22,.5)}
.card{background:var(--crema);border-radius:var(--r-l);padding:20px 20px 24px;display:grid;grid-template-rows:auto 250px auto 1fr auto;gap:10px;position:relative;transition:transform .3s,box-shadow .3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card[hidden]{display:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;min-height:28px}
.chips button,.chips span{font-family:var(--body);font-size:13px;font-weight:600;border:0;border-radius:20px;padding:5px 12px;background:var(--crema-2);color:var(--salvia);cursor:pointer}
.chips span{cursor:default}
.chips button[aria-pressed="true"]{background:var(--salvia);color:var(--crema)}
.card .pic{display:grid;place-items:center;min-height:0}
.card .pic img{max-height:236px;width:auto;max-width:92%;filter:drop-shadow(0 18px 16px rgba(34,27,22,.22));transition:transform .4s}
.card:hover .pic img{transform:scale(1.04) rotate(-1.5deg)}
.card h3{font-size:24px;font-weight:700}
.card .sub{color:var(--umber);font-weight:600;font-size:15px;margin-top:2px}
.card p{color:#4a4239;font-size:15.5px}
.card .pill{justify-self:start;box-shadow:none;margin-top:6px;font-size:15px;padding:6px 6px 6px 18px}
.card .pill .arr{width:34px;height:34px}
.card .pill.ok{background:var(--salvia);color:var(--brote)}
.card .pic{position:relative}
.card .ribbon-tag{position:absolute;top:2px;right:-4px;z-index:1;background:var(--brote);color:var(--salvia);font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;padding:6px 12px;border-radius:20px;transform:rotate(4deg)}
@media (max-width:1320px){.grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:860px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}

/* beneficios: foto central + tarjetas flotantes */
.ben-stage{position:relative;max-width:1180px;margin:0 auto;min-height:620px}
.ben-wave{position:absolute;left:50%;width:100vw;transform:translateX(-50%);top:16%;height:68%;z-index:0;overflow:visible}
.ben-wave path{stroke-dasharray:1 1;stroke-dashoffset:1}
.ben-photo{position:absolute;left:50%;top:50%;width:min(330px,28vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;overflow:hidden;z-index:1;border:10px solid var(--blanco);box-shadow:0 40px 60px -30px rgba(34,27,22,.55)}
.ben-photo img{width:100%;height:100%;object-fit:cover}
.ben-card{position:absolute;z-index:2;background:var(--blanco);border-radius:var(--r-m);padding:18px 22px;max-width:290px;box-shadow:var(--shadow);display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.ben-card .ck{grid-row:span 2;width:26px;height:26px;border-radius:50%;background:var(--brote);display:grid;place-items:center;margin-top:2px}
.ben-card .ck svg{width:14px;height:14px}
.ben-card h3{font-size:18px;font-weight:700}
.ben-card p{font-size:15px;color:#4a4239}
.b1{left:2%;top:4%}.b2{right:2%;top:12%}.b3{left:6%;bottom:6%}.b4{right:5%;bottom:2%}
.float{position:absolute;z-index:2;pointer-events:none}
.f-leaf{width:70px;left:30%;top:2%;transform:rotate(-20deg)}
.f-leaf2{width:54px;right:28%;bottom:4%;transform:rotate(30deg)}
.f-dots{width:110px;left:18%;bottom:30%}
@media (max-width:900px){
  .ben-stage{min-height:0;display:grid;gap:14px}
  .ben-wave,.float{display:none}
  .ben-photo{position:relative;left:auto;top:auto;transform:none;width:min(360px,80vw);margin:0 auto 10px}
  .ben-card{position:relative;inset:auto;max-width:none}
}

/* cómo funciona */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:10px}
.step{background:var(--blanco);border-radius:var(--r-l);padding:28px;display:grid;gap:10px;align-content:start;position:relative;box-shadow:var(--shadow)}
.step .n{width:54px;height:54px;border-radius:50%;background:var(--brote);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:28px;color:var(--salvia)}
.step h3{font-size:22px;font-weight:700}
.step p{color:#4a4239;font-size:16px}
.como-arrow{position:absolute;right:16%;top:-10px;width:120px;color:var(--umber)}
.analysis{background:var(--salvia);color:var(--crema);border-radius:var(--r-l);padding:28px 32px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;margin-top:26px}
.analysis h3{color:var(--crema);font-size:26px;font-weight:700}
.analysis .eyebrow{color:var(--brote);margin-bottom:4px}
.analysis .data{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.analysis .data div{border-left:2px solid rgba(242,235,221,.25);padding-left:12px}
.analysis b{display:block;font-family:var(--display);font-size:32px;font-weight:700;color:var(--brote);line-height:1;font-variant-numeric:tabular-nums}
.analysis span{font-size:13px;color:#DCE2D6}
@media (max-width:980px){.steps{grid-template-columns:1fr}.como-arrow{display:none}.analysis{grid-template-columns:1fr}.analysis .data{grid-template-columns:repeat(4,1fr);row-gap:14px}}
@media (max-width:520px){.analysis .data{grid-template-columns:repeat(3,1fr)}}

/* reseñas con cinta */
.rib-clip{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ribbon{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.ribbon text{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.rev-sec .wrap{position:relative;z-index:1}
.rev-head{text-align:center;max-width:640px;margin:0 auto 52px;display:grid;justify-items:center;gap:22px;padding-top:60px;position:relative}
.rev-head h2{font-size:clamp(32px,4.2vw,52px)}
.rev-head .spark{position:absolute;right:-30px;top:40px;width:44px;color:var(--umber)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{margin:0;background:var(--blanco);border-radius:var(--r-m);padding:24px;display:grid;gap:12px;align-content:start;box-shadow:var(--shadow)}
.rev .who{display:flex;align-items:center;gap:12px}
.rev .av{width:42px;height:42px;border-radius:50%;background:var(--crema-2);flex:none}
.rev .who b{display:block;color:var(--salvia);font-size:16px}
.rev .who small{color:var(--muted);font-size:13px}
.rev .stars{color:var(--brote);letter-spacing:.12em;font-size:20px;-webkit-text-stroke:.6px var(--salvia)}
.rev blockquote{margin:0;font-size:16px;color:var(--muted)}
.rev.ph{outline:2px dashed var(--line);outline-offset:-8px}
.ph-note{margin-top:18px;text-align:center;font-size:13px;color:var(--muted)}
@media (max-width:980px){.reviews{grid-template-columns:1fr}.rev-head .spark{display:none}}

/* faq */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:start}
.faq .side{display:grid;gap:18px;justify-items:start;position:sticky;top:110px}
.faq .side h2{font-size:clamp(32px,4.2vw,52px)}
.faq .side p{color:var(--salvia);max-width:40ch}
.faq details{border-bottom:1.5px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:20px;cursor:pointer;font-weight:600;font-size:18px;color:var(--salvia)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex:none;width:34px;height:34px;border-radius:50%;background:var(--crema-2);display:grid;place-items:center;transition:transform .3s,background .3s;color:var(--salvia);font-size:20px;line-height:1}
.faq details[open] summary .pl{transform:rotate(45deg);background:var(--brote)}
.faq details p{padding-bottom:20px;color:#4a4239;max-width:62ch}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:28px}.faq .side{position:static}}

/* pedido */
.order-card{background:var(--salvia);color:var(--crema);border-radius:var(--r-xl);padding:clamp(28px,5vw,60px);display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);align-items:start;position:relative;overflow:hidden}
.order-card h2{color:var(--crema);font-size:clamp(34px,4.4vw,56px)}
.order-card h2 strong{color:var(--brote)}
.order-card .lead{color:#DCE2D6;margin-top:16px;max-width:46ch}
.order-card .hand{font-family:var(--hand);font-weight:700;color:var(--brote);font-size:30px;margin-top:18px;transform:rotate(-3deg);display:inline-block}
.contact{display:grid;gap:10px;margin-top:24px}
.contact a{display:flex;align-items:center;gap:14px;text-decoration:none;background:rgba(242,235,221,.1);border-radius:16px;padding:14px 16px}
.contact a:hover{background:rgba(242,235,221,.18)}
.contact .ic{width:42px;height:42px;border-radius:50%;background:var(--brote);color:var(--salvia);display:grid;place-items:center;flex:none}
.contact .ic svg{width:20px;height:20px}
.contact small{display:block;font-size:13px;color:var(--brote);font-family:var(--display);text-transform:uppercase;letter-spacing:.12em}
.contact b{font-size:18px;overflow-wrap:anywhere}
.order{background:var(--blanco);color:var(--humus);border-radius:var(--r-l);padding:24px;display:grid;gap:14px}
.order h3{font-size:20px;font-weight:700}
.order ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.order li{display:flex;align-items:center;gap:10px;background:var(--crema);border-radius:14px;padding:10px 12px}
.order li .nm{flex:1;font-weight:600;font-size:16px;color:var(--salvia)}
.order li .nm small{display:block;font-weight:500;color:var(--muted);font-size:13px}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:32px;height:32px;border-radius:50%;border:0;background:var(--blanco);color:var(--salvia);font-size:18px;line-height:1;cursor:pointer}
.qty b{font-family:var(--display);font-size:22px;min-width:20px;text-align:center;font-variant-numeric:tabular-nums}
.order-empty{color:var(--muted);font-size:15px}
.quick{display:flex;flex-wrap:wrap;gap:8px}
.quick button{font-family:var(--body);font-weight:600;font-size:14px;padding:7px 13px;border-radius:30px;border:1.5px solid var(--line);background:transparent;color:var(--salvia);cursor:pointer}
.quick button:hover{border-color:var(--salvia);background:var(--crema)}
#order-send{justify-self:start;margin-top:4px}
#order-send[aria-disabled="true"]{opacity:.45;pointer-events:none}
@media (max-width:900px){.order-card{grid-template-columns:1fr}}

/* footer verde, sin logo (regla de marca) */
footer{background:var(--salvia);color:var(--crema);margin-top:calc(var(--ch) + 60px);padding-block:90px 40px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:32px}
footer .claim{font-family:var(--hand);font-weight:700;font-size:clamp(34px,3.4vw,44px);line-height:1;color:var(--brote);max-width:12ch}
footer .claim-sub{color:#DCE2D6;font-size:15px;margin-top:14px;max-width:32ch}
footer h4{font-family:var(--body);font-weight:700;font-size:17px;color:var(--crema);margin-bottom:12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:#DCE2D6}
footer a{text-decoration:none}footer a:hover{color:var(--brote)}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:42px;height:42px;border-radius:50%;background:var(--brote);color:var(--salvia);display:grid;place-items:center}
.social svg{width:20px;height:20px}
.legal{grid-column:1/-1;border-top:1px solid rgba(242,235,221,.18);padding-top:18px;margin-top:20px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:#BFC8B9}
@media (max-width:1100px){footer .cols{grid-template-columns:1fr 1fr 1fr}footer .cols>div:first-child{grid-column:1/-1}}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}footer{padding-top:60px}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}

/* cursor propio (como la referencia: punto lima) */
.cur{position:fixed;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--brote);pointer-events:none;z-index:100;opacity:0;transition:opacity .2s,width .25s,height .25s,margin .25s,background .25s;mix-blend-mode:multiply}
.cur-on .cur{opacity:1}
.cur-hover .cur{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(199,211,111,.55)}

/* aparición suave */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero .lead{transition:none}}

/* ===== tarjetas de producto: enlaces al detalle ===== */
.grid{grid-template-columns:repeat(3,1fr)!important;gap:22px!important}
@media (max-width:980px){.grid{grid-template-columns:1fr 1fr!important}}
@media (max-width:620px){.grid{grid-template-columns:1fr!important}}
.card .pic a{display:grid;place-items:center;width:100%;height:100%;text-decoration:none}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--umber)}
.card .acts{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:6px}
.card .acts .pill{margin-top:0}
.more{font-weight:600;font-size:15px;color:var(--salvia);text-decoration:none;display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid var(--brote);padding-bottom:2px}
.more:hover{color:var(--umber)}
.card .pic .ph-img{width:min(220px,80%)}

/* marcador de imagen (hasta que lleguen las fotos) */
.ph-img{aspect-ratio:1;border-radius:24px;background:repeating-linear-gradient(-45deg,rgba(63,84,66,.05) 0 12px,transparent 12px 24px),var(--crema-2);border:2px dashed rgba(63,84,66,.25);display:grid;place-items:center;align-content:center;gap:10px;color:var(--salvia);text-align:center;padding:16px}
.ph-img svg{width:44px;height:44px;opacity:.6}
.ph-img span{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:13px;opacity:.75}

/* ===== header en páginas internas: logotipo siempre visible ===== */
header.site.solid .lg-word{opacity:1;transform:translate(-50%,-50%)}
header.site.solid .logo{pointer-events:auto}
header.site.solid:not(.scrolled) nav.main,header.site.solid:not(.scrolled) .hright{transform:none}

/* ===== página de detalle ===== */
.pd-top{padding-top:calc(var(--hh-top) + 4px);padding-bottom:calc(var(--ch) + 40px)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin-bottom:22px}
.crumbs a{text-decoration:none;color:var(--salvia);font-weight:600}
.crumbs a:hover{color:var(--umber)}
.crumbs span[aria-hidden]{opacity:.5}
.pd-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start}

/* galería (Swiper) */
.gallery{position:sticky;top:calc(var(--hh) + var(--tb) + 16px);min-width:0}
.pg-main{border-radius:var(--r-xl);overflow:hidden;background:var(--papel);position:relative}
.pg-main .swiper-slide{aspect-ratio:1;display:grid;place-items:center;background:var(--papel)}
.pg-main .swiper-slide img{width:100%;height:100%;object-fit:cover}
.pg-main .ph-img{width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:0}
.pg-main .ph-img svg{width:72px;height:72px}
.pg-main .ph-img span{font-size:15px}
.pg-nav{position:absolute;top:50%;z-index:5;width:48px;height:48px;border-radius:50%;border:0;background:var(--blanco);color:var(--salvia);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow);transform:translateY(-50%);transition:background .2s,opacity .2s}
.pg-nav:hover{background:var(--brote)}
.pg-nav svg{width:20px;height:20px}
.pg-prev{left:16px}.pg-next{right:16px}
.pg-nav.swiper-button-disabled{opacity:.35;pointer-events:none}
.pg-dots{position:absolute;left:0;right:0;bottom:16px!important;z-index:5;display:flex;justify-content:center;gap:6px}
.pg-dots .swiper-pagination-bullet{width:9px;height:9px;border-radius:9px;background:var(--salvia);opacity:.3;margin:0!important;transition:width .3s,opacity .3s}
.pg-dots .swiper-pagination-bullet-active{width:26px;opacity:1}
.pg-thumbs{margin-top:12px}
.pg-thumbs .swiper-slide{aspect-ratio:1;border-radius:16px;overflow:hidden;cursor:pointer;opacity:.55;transition:opacity .2s;border:2px solid transparent}
.pg-thumbs .swiper-slide-thumb-active{opacity:1;border-color:var(--brote)}
.pg-thumbs .ph-img{height:100%;aspect-ratio:auto;border-radius:0;border:0;padding:6px}
.pg-thumbs .ph-img svg{width:26px;height:26px}
.pg-thumbs .ph-img span{display:none}
/* sin Swiper: se ve la primera imagen */
.swiper:not(.swiper-initialized) .swiper-wrapper{display:flex;overflow:hidden}
.swiper:not(.swiper-initialized) .swiper-slide{flex:0 0 100%}
.pg-thumbs:not(.swiper-initialized) .swiper-slide{flex:0 0 calc(25% - 9px);margin-right:12px}

/* info */
.pd-info{display:grid;gap:18px;align-content:start;padding-top:8px}
.pd-info .eyebrow{margin:0}
.pd-info h1{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(44px,5.2vw,78px);line-height:.92;color:var(--salvia)}
.pd-info .hand{font-family:var(--hand);font-weight:700;color:var(--umber);font-size:clamp(26px,2.4vw,34px);line-height:1;transform:rotate(-2deg);transform-origin:left;margin-top:-6px}
.pd-info .desc{color:#433b33;font-size:17.5px;max-width:58ch}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.facts div{background:var(--papel);border-radius:16px;padding:14px 16px;display:grid;gap:2px}
.facts small{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--umber)}
.facts b{color:var(--salvia);font-size:16px;line-height:1.3}
.buy{background:var(--blanco);border-radius:var(--r-l);padding:22px;display:grid;gap:16px;box-shadow:var(--shadow)}
.buy .lbl{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:8px}
.pd-pres{display:flex;flex-wrap:wrap;gap:8px}
.pd-pres button{font-family:var(--body);font-weight:600;font-size:16px;border:2px solid var(--line);background:transparent;color:var(--salvia);border-radius:40px;padding:9px 18px;cursor:pointer;transition:all .2s}
.pd-pres button[aria-pressed="true"]{background:var(--salvia);border-color:var(--salvia);color:var(--crema)}
.buy-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.stepper{display:flex;align-items:center;background:var(--crema);border-radius:40px;padding:5px}
.stepper button{width:40px;height:40px;border-radius:50%;border:0;background:var(--blanco);color:var(--salvia);font-size:20px;cursor:pointer}
.stepper input{width:44px;text-align:center;border:0;background:transparent;font-family:var(--display);font-weight:700;font-size:22px;color:var(--salvia);-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.pd-add{flex:1;justify-content:center;font-size:17px;padding:15px 22px}
.buy .wa{display:inline-flex;align-items:center;gap:8px;color:var(--salvia);font-weight:600;font-size:15px;text-decoration:none}
.buy .wa svg{width:18px;height:18px}
.buy .wa:hover{color:var(--umber)}
.buy .note{font-size:13.5px;color:var(--muted)}
@media (max-width:900px){.pd-grid{grid-template-columns:1fr}.gallery{position:relative;top:auto}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}

/* bloques de detalle */
.pd-h2{font-size:clamp(30px,3.6vw,46px);margin-bottom:28px}
.ben-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ben-item{background:var(--blanco);border-radius:var(--r-m);padding:20px 22px;display:flex;gap:14px;align-items:flex-start;box-shadow:var(--shadow)}
.ben-item .ck{flex:none;width:28px;height:28px;border-radius:50%;background:var(--brote);display:grid;place-items:center;margin-top:1px}
.ben-item .ck svg{width:14px;height:14px}
.ben-item p{color:#3d362f;font-size:16.5px}
.apto{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.apto h3{font-size:18px;font-weight:700;margin-right:6px}
.apto span{background:var(--crema-2);color:var(--salvia);font-weight:600;font-size:15px;padding:8px 16px;border-radius:30px}
@media (max-width:980px){.ben-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.ben-grid{grid-template-columns:1fr}}

.uso-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start}
.uso-card{background:var(--blanco);border-radius:var(--r-l);padding:28px;box-shadow:var(--shadow)}
.uso-card .intro{color:#433b33;margin-bottom:18px;max-width:60ch}
.uso-list{list-style:none;margin:0;padding:0;display:grid}
.uso-list li{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 0;border-top:1.5px solid var(--line)}
.uso-list li:first-child{border-top:0}
.uso-list b{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--salvia);font-size:17px}
.uso-list span{color:#3d362f}
.uso-card .tip{margin-top:16px;background:var(--crema);border-radius:14px;padding:12px 16px;font-size:15px;color:var(--salvia);font-weight:500}
.side-blocks{display:grid;gap:18px}
.sblock{background:var(--salvia);color:var(--crema);border-radius:var(--r-l);padding:26px 28px}
.sblock h3{color:var(--crema);font-size:20px;font-weight:700;margin-bottom:12px}
.sblock ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.sblock li{display:flex;gap:10px;color:#DCE2D6}
.sblock li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--brote);margin-top:9px}
.sblock p{color:#DCE2D6}
.sblock .data{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px}
.sblock .data div{border-left:2px solid rgba(242,235,221,.25);padding-left:10px}
.sblock .data b{display:block;font-family:var(--display);font-size:28px;font-weight:700;color:var(--brote);line-height:1}
.sblock .data span{font-size:12.5px;color:#DCE2D6}
@media (max-width:900px){.uso-grid{grid-template-columns:1fr}.uso-list li{grid-template-columns:1fr;gap:4px}}
.sblock.light{background:var(--blanco);color:var(--humus);box-shadow:var(--shadow)}
.sblock.light h3{color:var(--salvia)}
.sblock.light li,.sblock.light p{color:#3d362f}

/* relacionados */
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rel{background:var(--crema);border-radius:var(--r-l);padding:18px;display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;text-decoration:none;transition:transform .3s,box-shadow .3s}
.rel:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.rel .ri{width:96px;height:96px;display:grid;place-items:center}
.rel .ri img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(34,27,22,.2))}
.rel .ri img.round{border-radius:50%;object-fit:cover;width:100%;height:100%;filter:none}
.rel .ri .ph-img{width:96px;padding:8px;border-radius:16px}
.rel .ri .ph-img svg{width:28px;height:28px}
.rel .ri .ph-img span{display:none}
.rel small{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--umber);font-size:12.5px}
.rel b{display:block;color:var(--salvia);font-size:18px;line-height:1.2;margin-top:2px}
.rel .more{margin-top:8px;font-size:14px}
@media (max-width:980px){.rel-grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.rel-grid{grid-template-columns:1fr}}

/* ajustes */
html{overflow-x:clip}
.pd-top{padding-bottom:calc(var(--ch) + 10px)}
.pg-thumbs{overflow:hidden}
.rel .ri img{max-height:96px;width:auto}
.band.crema .rel{background:var(--blanco)}
.side-blocks.solo{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* precios */
.card .price{font-family:var(--display);font-weight:800;font-size:28px;color:var(--salvia);margin-top:8px;line-height:1;font-variant-numeric:tabular-nums}
.card .price.ask,.pd-price.ask{font-family:var(--body);font-weight:600;font-size:15px;color:var(--umber)}
.pd-price-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pd-price{font-family:var(--display);font-weight:800;font-size:clamp(40px,4vw,54px);color:var(--salvia);line-height:1;font-variant-numeric:tabular-nums}
.pd-sub{color:var(--muted);font-size:15px;font-weight:500}
.order-total{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;border-top:1.5px dashed var(--line);padding-top:12px}
.order-total span{font-weight:600;color:var(--muted)}
.order-total b{font-family:var(--display);font-weight:800;font-size:30px;color:var(--salvia);font-variant-numeric:tabular-nums}
.order-total small{grid-column:1/-1;color:var(--muted);font-size:13px}
.order-total[hidden]{display:none}

/* acciones de tarjeta: "Ver detalle" + botón redondo con popover */
.card .acts .go-detail{box-shadow:none;font-size:15px;padding:6px 6px 6px 18px}
.card .acts .go-detail .arr{width:34px;height:34px}
.card .acts .go-detail .arr svg{width:16px;height:16px}
.add-btn{position:relative;flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--brote);color:var(--salvia);display:grid;place-items:center;cursor:pointer;transition:transform .2s,background .2s,color .2s}
.add-btn svg{width:20px;height:20px;transition:transform .3s}
.add-btn:hover{transform:scale(1.06)}
.add-btn:hover svg{transform:rotate(90deg)}
.add-btn.ok{background:var(--salvia);color:var(--brote)}
.add-btn::after,.add-btn::before{position:absolute;left:50%;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}
.add-btn::after{content:attr(data-tip);bottom:calc(100% + 12px);left:auto;right:-6px;transform:translateY(6px);background:var(--salvia);color:var(--crema);font-family:var(--body);font-weight:600;font-size:14px;white-space:nowrap;padding:8px 14px;border-radius:12px;box-shadow:var(--shadow)}
.add-btn::before{content:"";bottom:calc(100% + 6px);width:12px;height:12px;background:var(--salvia);transform:translate(-50%,6px) rotate(45deg);border-radius:2px}
.add-btn:hover::after,.add-btn:focus-visible::after,.add-btn.tip-on::after{opacity:1;transform:none}
.add-btn:hover::before,.add-btn:focus-visible::before,.add-btn.tip-on::before{opacity:1;transform:translate(-50%,0) rotate(45deg)}
.add-btn.ok::after,.add-btn.ok::before{background:var(--humus)}

/* beneficios: ocupa una pantalla (escritorio) */
@media (min-width:901px) and (min-height:620px){
  #beneficios{height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:16px;padding-bottom:calc(var(--ch) + 6px)}
  #beneficios>.wrap{flex:1;display:flex;flex-direction:column;min-height:0;width:100%}
  #beneficios .head-c{margin-bottom:6px}
  #beneficios .head-c h2{font-size:clamp(30px,3.3vw,46px)}
  #beneficios .squig{height:22px;margin-top:8px}
  #beneficios .head-c p{margin-top:8px;font-size:16px}
  #beneficios .ben-stage{flex:1;min-height:320px;width:100%}
  #beneficios .ben-photo{width:min(300px,30vh,28vw);border-width:8px}
  #beneficios .ben-card{padding:14px 18px;max-width:270px}
  #beneficios .b1{left:4%;top:6%}#beneficios .b2{right:4%;top:10%}#beneficios .b3{left:8%;bottom:4%}#beneficios .b4{right:7%;bottom:0}
  #beneficios .f-leaf{top:0}
}