/* ============================================================
   Embreea — hoja de estilos compartida
   ============================================================ */
:root{
  --deep-mid:#3A1626; --deep:#2A0F1C; --coral:#8C2545; --coral-deep:#6B1633;
  --accent:#5E6B4E; --accent-warm:#E6C594; --accent-blue:#5E6B4E; --sand:#F6F2ED; --sand-2:#EEE7DF; --ink:#2B1420; --muted:#5C4A54;
  --line:rgba(42,15,28,.11); --line-light:rgba(246,242,237,.18);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --wrap:1120px; --r:8px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--sans);font-size:16.5px;line-height:1.7;color:var(--ink);
  background:var(--sand);-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px;position:relative;z-index:1;}
section{padding:68px 0;position:relative;overflow:hidden;}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.18;letter-spacing:-.012em;margin:0 0 20px;}
h1{font-size:clamp(2.1rem,4.4vw,3.25rem);}
h2{font-size:clamp(1.7rem,3vw,2.35rem);}
h3{font-size:1.2rem;line-height:1.34;}
p{margin:0 0 18px;}
.lead{font-size:clamp(1.04rem,1.9vw,1.22rem);color:var(--muted);max-width:60ch;}
.lead strong,.measure strong{color:var(--ink);font-weight:600;}
.measure{max-width:62ch;}
.eyebrow{font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:600;color:var(--coral-deep);margin:0 0 16px;}

/* ---- botones ---- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 27px;border-radius:var(--r);
  border:1.5px solid transparent;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;transition:.18s;}
.btn-primary{background:var(--deep-mid);color:var(--sand);}
.btn-primary:hover{background:var(--deep);transform:translateY(-1px);}
.btn-coral{background:var(--coral-deep);color:#fff;}
.btn-coral:hover{background:#551024;transform:translateY(-1px);}

.btn-ghost{background:transparent;color:var(--deep-mid);border-color:var(--line);}
.btn-ghost:hover{background:rgba(42,15,28,.05);border-color:var(--coral-deep);}
.btn-outline{background:transparent;color:var(--deep-mid);border-color:var(--line);}
.btn-outline:hover{border-color:var(--coral-deep);color:var(--coral-deep);}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none;}

/* ---- barra de progreso de scroll ---- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--coral);z-index:80;
  width:0%;transition:width .1s linear;}

/* ---- header / nav ---- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(246,242,237,.94);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px;}
.nav-logo{display:block;flex:none;margin-right:auto;}
.nav-logo svg{height:34px;width:auto;}
.logo-word{font-family:var(--serif);font-size:1.85rem;font-weight:500;letter-spacing:-.01em;
  color:var(--ink);display:inline-flex;align-items:center;line-height:1;white-space:nowrap;}
.logo-mark{height:.85em;width:auto;margin:0 1px;display:inline-block;position:relative;top:.04em;}
footer .logo-word{font-size:1.6rem;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{text-decoration:none;font-size:14px;font-weight:500;color:var(--muted);
  padding-bottom:3px;border-bottom:1.5px solid transparent;transition:.18s;white-space:nowrap;}
.nav-links a:hover{color:var(--deep-mid);border-bottom-color:var(--coral);}
.nav-links a.active{color:var(--deep-mid);border-bottom-color:var(--coral-deep);}
.nav-links .btn{padding:11px 18px;font-size:13.5px;border-bottom:0;}
.nav-links a.btn{color:#fff;border-bottom:1.5px solid transparent;}
.nav-links a.btn:hover{color:#fff;background:#551024;border-bottom-color:transparent;}
.nav-toggle{display:none;background:none;border:0;padding:8px;cursor:pointer;color:var(--deep-mid);}

/* ---- selector de idioma ---- */
.lang-switch{flex:none;display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted);
  border:1.5px solid var(--line);border-radius:100px;padding:7px 13px;text-decoration:none;
  transition:.18s;white-space:nowrap;}
.lang-switch:hover{border-color:var(--coral-deep);color:var(--coral-deep);}
@media (max-width:900px){.lang-switch{padding:6px 11px;font-size:12px;}}

/* ---- hero genérico (subpáginas) ---- */
.page-hero{background:var(--sand-2);color:var(--ink);padding:74px 0 64px;position:relative;overflow:hidden;}
.page-hero .wrap{position:relative;z-index:1;}
.page-hero h1{max-width:26ch;}
.page-hero-mark{position:absolute;z-index:0;right:20px;top:50%;transform:translateY(-50%);
  width:180px;pointer-events:none;opacity:.09;}
.page-hero-mark img{display:block;width:100%;height:auto;}
@media (max-width:900px){.page-hero-mark{width:130px;opacity:.06;}}
@media (max-width:600px){.page-hero-mark{width:100px;}}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:18px;}
.breadcrumb a{color:var(--ink);text-decoration:none;opacity:.72;}
.breadcrumb a:hover{color:var(--coral-deep);opacity:1;}

/* ---- hero home ---- */
.hero{background:var(--sand-2);color:var(--ink);padding:112px 0 100px;position:relative;overflow:hidden;}
.hero .wrap{position:relative;z-index:1;}
.hero h1{max-width:18ch;}
.hero h1 em{font-style:normal;color:var(--coral-deep);}/* ---- contexto ---- */
.ctx{background:var(--sand);position:relative;overflow:hidden;}
.ctx-grid{display:grid;grid-template-columns:.72fr 1fr;gap:72px;align-items:start;}
.ctx-list{list-style:none;margin:0;padding:0;}
.ctx-list li{padding:24px 0;border-bottom:1px solid var(--line);display:flex;gap:18px;align-items:flex-start;}
.ctx-list li:first-child{border-top:1px solid var(--line);}
.ctx-n{font-family:var(--serif);font-size:1.35rem;color:var(--coral-deep);line-height:1.2;flex:none;width:34px;}
.ctx-n-ico{display:flex;flex-direction:column;align-items:flex-start;gap:8px;}
.ctx-n-ico svg{width:34px;height:34px;}
.ctx-list p{margin:0;font-size:16px;color:var(--muted);}
.ctx-list strong{color:var(--ink);font-weight:600;}

/* ---- método ---- */
.method{background:#fff;}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
.method-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:40px 0 56px;}
.mstep{background:var(--sand);border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;}
.mstep-icon{width:30px;height:30px;margin-bottom:16px;}
.mstep h3{font-size:1.05rem;margin-bottom:10px;}
.mstep p{font-size:14.5px;color:var(--muted);margin:0;}
.panel{background:rgba(107,22,51,.055);border:1px solid rgba(107,22,51,.16);padding:36px;border-radius:var(--r);
  box-shadow:0 10px 34px rgba(42,15,28,.05);}
.panel h3{color:var(--ink);font-size:1.08rem;margin-bottom:22px;}
.panel ul{list-style:none;margin:0;padding:0;}
.panel li{padding:13px 0 13px 25px;position:relative;font-size:15.5px;
  color:var(--muted);border-bottom:1px solid var(--line);}
.panel li:last-child{border-bottom:0;}
.panel li::before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;background:var(--coral);border-radius:50%;}

/* ---- diagrama del comité de compra ---- */
.diagram{margin-top:56px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:34px 30px 26px;box-shadow:0 10px 34px rgba(42,15,28,.05);}
.diagram h3{color:var(--ink);font-size:1.05rem;margin-bottom:6px;}
.diagram>p{font-size:14px;color:var(--muted);margin:0 0 28px;max-width:64ch;}

/* ---- tarjetas de servicio ---- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:50px;}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px 30px;transition:.2s;}
.card:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(42,15,28,.10);}
.service-icon{width:60px;height:auto;display:block;margin:0;}
.svc-head{display:flex;align-items:center;gap:18px;margin-bottom:14px;}
.svc-icon-badge{flex:none;width:88px;height:88px;border-radius:50%;background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.svc-head .card-n{margin:0 0 4px;}
.svc-head h2{margin:0;}
.card-n{font-family:var(--serif);font-size:.9rem;color:var(--coral-deep);letter-spacing:.1em;margin:0 0 18px;font-weight:600;}
.card h3{margin-bottom:12px;}
.card p{font-size:15.5px;color:var(--muted);}
.card ul{list-style:none;margin:16px 0 0;padding:0;}
.card li{font-size:14.5px;color:var(--muted);padding:7px 0 7px 19px;position:relative;}
.card li::before{content:"—";position:absolute;left:0;color:var(--coral);}
.card-link{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:13.5px;font-weight:600;
  color:var(--coral-deep);text-decoration:none;padding:9px 16px;border:1.5px solid var(--line);border-radius:100px;transition:.18s;}
.card-link:hover{gap:10px;border-color:var(--coral-deep);background:var(--green-light);}
.card-link svg{transition:.18s;}

/* ---- servicios: cierre de bloque ---- */
.svc-cta{margin-top:26px;}

/* ---- sectores ---- */
.sectors{background:var(--sand-2);}

/* ---- proceso: línea de tiempo ---- */
.timeline{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto auto;
  gap:26px;margin-top:56px;position:relative;align-items:start;}
.tl-line{position:absolute;top:28px;left:12.5%;right:12.5%;height:2px;background:var(--line);z-index:0;}
.tl-step{display:grid;grid-template-rows:subgrid;grid-row:1 / span 4;position:relative;z-index:1;text-align:center;}
.tl-node{width:56px;height:56px;border-radius:50%;background:var(--coral-deep);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;box-shadow:0 0 0 6px var(--sand);}
.tl-step h3{font-size:1.05rem;margin-bottom:8px;}
.tl-step>p{font-size:14px;color:var(--muted);margin:0;}
.tl-deliv{margin-top:16px;background:var(--sand-2);border-radius:var(--r);padding:16px 18px;text-align:left;}
.tl-deliv span{display:block;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--coral-deep);margin-bottom:6px;}
.tl-deliv p{font-size:13px;color:var(--ink);margin:0;}

/* ---- equipo ---- */
.founder{background:var(--sand-2);padding-top:0;margin-top:-40px;}
.story-carousel{margin-top:8px;}
.st-slide{display:none;min-height:180px;}
.st-slide.is-active{display:block;animation:qfade .4s ease;}
.st-slide h2{margin-bottom:14px;}

.f-cred{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}

.team-carousel{margin-top:54px;background:rgba(107,22,51,.12);
  border:1px solid rgba(107,22,51,.22);border-radius:var(--r);padding-bottom:22px;}
.tc-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:7%;
  padding:22px 7% 6px;scrollbar-width:none;-ms-overflow-style:none;}
.tc-track::-webkit-scrollbar{display:none;}
.tc-slide{flex:0 0 min(86%,640px);scroll-snap-align:center;opacity:.35;transform:scale(.93);
  transition:opacity .4s ease, transform .4s ease;}
.tc-slide.is-active{opacity:1;transform:scale(1);}
.tc-controls{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding:0 7%;}
.tc-btns{display:flex;gap:10px;}
.tc-btns .btn{padding:15px 20px;}
.tc-count{font-size:13px;color:var(--muted);}
@media (max-width:640px){.tc-slide{flex-basis:92%;}.tc-track,.tc-controls{padding-left:4%;padding-right:4%;}}
.member{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:26px;display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;}
.m-photo{width:96px;height:120px;border-radius:6px;background:var(--sand-2);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.m-photo svg{width:100%;height:100%;}
.m-photo.has-img img{width:100%;height:100%;object-fit:cover;display:block;}
.m-photo-mono{display:flex;align-items:center;justify-content:center;background:var(--deep-mid);}
.m-photo-mono span{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--sand);letter-spacing:.03em;}
.member h3{font-size:1.1rem;margin:0 0 3px;color:var(--ink);}
.m-role{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--coral-deep);margin:0 0 10px;}
.member p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55;}
.f-cred li{font-size:13px;padding:7px 14px;border:1px solid var(--line);border-radius:100px;color:var(--muted);background:#fff;}
.bio-more{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.bio-more p{margin:12px 0 0;}
.bio-toggle{background:none;border:0;padding:0;margin-top:10px;display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--coral-deep);cursor:pointer;}
.bio-toggle svg{transition:transform .2s;}
.bio-toggle[aria-expanded="true"] svg{transform:rotate(180deg);}

/* ---- compromisos ---- */
.honest{background:var(--coral-deep);color:rgba(246,242,237,.82);}
.honest .eyebrow{color:var(--accent-blue);}
.honest h2{color:#fff;}
.honest .measure strong{color:#fff;}
.h-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start;}
.h-list{list-style:none;margin:0;padding:0;}
.h-list li{padding:18px 0;border-bottom:1px solid rgba(42,15,28,.13);font-size:15.5px;}
.h-list li:first-child{border-top:1px solid rgba(42,15,28,.13);}
.h-list strong{display:block;font-family:var(--serif);font-size:1.04rem;margin-bottom:4px;font-weight:600;}
.honest .h-list li{border-bottom-color:rgba(246,242,237,.22);color:rgba(246,242,237,.82);}
.honest .h-list li:first-child{border-top-color:rgba(246,242,237,.22);}
.honest .h-list strong{color:#fff;}

/* ---- faq ---- */
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-child{border-top:1px solid var(--line);}
.faq-q{width:100%;background:none;border:0;padding:26px 44px 26px 0;text-align:left;cursor:pointer;position:relative;
  font-family:var(--serif);font-size:1.1rem;font-weight:500;color:var(--ink);}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-size:1.4rem;font-weight:300;color:var(--coral-deep);}
.faq-item.open .faq-q::after{content:"–";}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 44px 26px 0;margin:0;font-size:15.5px;color:var(--muted);}

/* ---- contacto ---- */
.contact{background:var(--sand-2);color:var(--ink);}
.c-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:start;}
.c-list{list-style:none;margin:32px 0 0;padding:0;}
.c-list li{padding:15px 0;border-top:1px solid var(--line);font-size:15.5px;}
.c-list span{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;font-weight:600;}
.c-list a{color:var(--coral-deep);text-decoration:none;border-bottom:1px solid rgba(107,22,51,.35);}
.c-list a:hover{border-bottom-color:var(--coral-deep);}
form{background:#fff;border:1px solid var(--line);padding:34px;border-radius:var(--r);box-shadow:0 10px 34px rgba(42,15,28,.05);}
.field{margin-bottom:19px;}
label{display:block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin-bottom:8px;}
input,select,textarea{width:100%;padding:13px 14px;border-radius:5px;border:1px solid var(--line);
  background:var(--sand);color:var(--ink);font-family:var(--sans);font-size:15px;}
input::placeholder,textarea::placeholder{color:rgba(42,15,28,.35);}
input:focus,select:focus,textarea:focus{outline:2px solid var(--coral);outline-offset:1px;border-color:transparent;}
select option{background:#fff;color:var(--ink);}
textarea{resize:vertical;min-height:104px;}
form .btn{width:100%;justify-content:center;margin-top:6px;}
.fnote{font-size:12.5px;color:var(--muted);margin:14px 0 0;text-align:center;}

/* ---- footer ---- */
footer.site{background:var(--sand-2);color:var(--muted);padding:56px 0 32px;font-size:14px;
  border-top:1px solid var(--line);}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px;}
.foot-grid svg{height:30px;width:auto;}
.foot-brand p{margin:8px 0 0;color:var(--muted);}
.foot-heading{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--coral-deep);margin:0 0 14px;}
.foot-col{display:flex;flex-direction:column;gap:11px;}
.foot-col a{text-decoration:none;color:inherit;font-size:14px;padding-bottom:3px;
  border-bottom:1.5px solid rgba(107,22,51,.28);transition:.18s;width:fit-content;}
.foot-col a:hover{color:var(--coral-deep);border-bottom-color:var(--coral-deep);}
.foot-bottom{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr;gap:28px;}}

/* ---- CTA banda inferior de página (usada en subpáginas) ---- */
.page-cta{background:#F0E8DA;color:var(--ink);text-align:center;}
.page-cta h2{max-width:26ch;margin:0 auto 14px;}
.page-cta .lead{max-width:52ch;margin:0 auto;}
.page-cta .btn-row{justify-content:center;}

/* ---- siguiente / anterior (navegación entre páginas) ---- */
.page-flow{border-top:1px solid var(--line);background:var(--sand);}
.flow-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line);}
.flow-link{background:var(--sand);padding:30px 34px;text-decoration:none;color:var(--ink);transition:.18s;}
.flow-link:hover{background:var(--sand-2);}
.flow-link.next{text-align:right;}
.flow-tag{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  color:var(--coral-deep);margin-bottom:8px;}
.flow-title{font-family:var(--serif);font-size:1.15rem;color:var(--ink);}

/* ---- blog ---- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto auto auto auto;
  gap:24px;margin-top:50px;align-items:start;}
.post-card{display:grid;grid-template-rows:subgrid;grid-row:span 5;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:.2s;text-decoration:none;color:inherit;}
.post-card:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(42,15,28,.10);}
.post-thumb{height:150px;background:linear-gradient(135deg,rgba(107,22,51,.78) 0%,rgba(140,37,69,.78) 100%);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.post-thumb svg{width:64px;height:64px;opacity:.85;}
.post-body{display:grid;grid-template-rows:subgrid;grid-row:2 / span 4;
  padding:26px 26px 30px;text-align:left;}
.post-tag{display:inline-block;align-self:start;justify-self:start;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  background:rgba(107,22,51,.94);padding:7px 14px;border-radius:100px;margin-bottom:10px;
  white-space:nowrap;min-width:260px;text-align:center;}
.post-body h3{font-size:1.08rem;margin-bottom:10px;align-self:start;}
.post-body p{font-size:14px;color:var(--muted);margin-bottom:0;align-self:start;}
.post-body p.post-tag{color:#fff;}
.post-meta{margin-top:18px;font-size:12.5px;color:var(--muted);display:flex;gap:10px;align-items:center;}

.article{max-width:720px;margin:0 auto;}
.article-meta{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px;}
.article h1{max-width:none;}
.article .lead{max-width:none;}
.article-body h2{font-size:1.4rem;margin-top:44px;}
.article-body h3{font-size:1.12rem;margin-top:30px;}
.article-body p{font-size:16px;color:var(--ink);}
.article-body ul{padding-left:22px;color:var(--ink);}
.article-body li{margin-bottom:8px;}
.pullquote{background:var(--coral-deep);border-radius:var(--r);padding:28px 32px;margin:36px 0;font-family:var(--serif);
  font-size:1.2rem;color:var(--sand);font-style:normal;}
.article-share{display:flex;gap:12px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line);}

/* ---- 

/* ---- diagnóstico interactivo ---- */
.quiz{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:44px;
  box-shadow:0 10px 34px rgba(42,15,28,.06);max-width:720px;margin:50px auto 0;}
.quiz-progress{display:flex;gap:6px;margin-bottom:34px;}
.quiz-progress i{flex:1;height:4px;border-radius:3px;background:var(--line);}
.quiz-progress i.done{background:var(--coral);}
.quiz-step{display:none;}
.quiz-step.active{display:block;animation:qfade .35s ease;}
@keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quiz-step h3{font-size:1.25rem;margin-bottom:26px;}
.quiz-opts{display:grid;gap:12px;}
.quiz-opt{display:block;border:1.5px solid var(--line);border-radius:var(--r);padding:16px 20px;
  cursor:pointer;font-size:15px;color:var(--ink);transition:.15s;position:relative;
  text-transform:none;letter-spacing:normal;font-weight:400;}
.quiz-opt:hover{border-color:var(--coral);}
.quiz-opt.sel{border-color:var(--coral-deep);background:var(--green-light);font-weight:600;}
.quiz-opt input{position:absolute;opacity:0;pointer-events:none;}
.quiz-nav{display:flex;justify-content:space-between;margin-top:34px;}
.quiz-result{display:none;}
.quiz-result.active{display:block;animation:qfade .4s ease;}

/* ---- marca de agua flotante: aparece, se desvanece y vuelve ---- */
.origin-mark-wrap{position:relative;width:240px;margin:0 auto;pointer-events:none;opacity:.6;}
.origin-mark{display:block;width:100%;height:auto;animation:bloomFade 30s linear infinite;}
@media (max-width:480px){.origin-mark-wrap{width:195px;}}
@media (max-width:380px){.origin-mark-wrap{width:150px;}}
.hero-bloom-wrap{position:absolute;z-index:-1;right:40px;top:50%;transform:translateY(-48%);
  width:220px;pointer-events:none;opacity:.15;}
.hero-bloom{display:block;width:100%;height:auto;object-fit:contain;}
.hero-owl-mark{position:absolute;z-index:-1;left:-30px;top:50%;transform:translateY(-50%);
  width:280px;pointer-events:none;opacity:.035;}
.hero-owl-mark img{display:block;width:100%;height:auto;transform:rotate(180deg);}
@media (max-width:900px){.hero-owl-mark{display:none;}}
@media (max-width:1080px){.hero-bloom-wrap{width:170px;right:10px;}}
@media (max-width:900px){.hero-bloom-wrap{left:50%;right:auto;top:70px;transform:translateX(-50%);width:170px;opacity:.06;}}
@media (max-width:380px){.hero-bloom-wrap{width:140px;}}
@keyframes bloomFade{
  0%     {opacity:1; rotate:0deg;}
  20%    {opacity:1; rotate:0deg;}
  30%    {opacity:0; rotate:0deg;}
  33.3%  {opacity:0; rotate:180deg; animation-timing-function:ease-in;}
  50%    {opacity:1; rotate:180deg;}
  70%    {opacity:1; rotate:180deg;}
  80%    {opacity:0; rotate:180deg;}
  83.3%  {opacity:0; rotate:360deg; animation-timing-function:ease-in;}
  100%   {opacity:1; rotate:360deg;}
}
@media (prefers-reduced-motion: no-preference){
  .rv{opacity:0;transform:translateY(24px);
      transition:opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);}
  .rv.in{opacity:1;transform:none;}
  .cards .rv:nth-child(2),.blog-grid .rv:nth-child(2){transition-delay:.10s;}
  .cards .rv:nth-child(3),.blog-grid .rv:nth-child(3){transition-delay:.20s;}
  .tl-step.rv:nth-child(2){transition-delay:.08s;} .tl-step.rv:nth-child(3){transition-delay:.16s;}
  .tl-step.rv:nth-child(4){transition-delay:.24s;}
  .ctx-list li.rv:nth-child(2),.h-list li.rv:nth-child(2){transition-delay:.07s;}
  .ctx-list li.rv:nth-child(3),.h-list li.rv:nth-child(3){transition-delay:.14s;}
  .ctx-list li.rv:nth-child(4),.h-list li.rv:nth-child(4){transition-delay:.21s;}
  .ctx-list li.rv:nth-child(5),.h-list li.rv:nth-child(5){transition-delay:.28s;}
  .hero .wrap>*{animation:heroIn .9s cubic-bezier(.22,.61,.36,1) both;}
  .hero .wrap>.hero-bloom-wrap{animation:none;}
  .hero .wrap>.hero-owl-mark{animation:none;}
  .hero .wrap>*:nth-child(2){animation-delay:.10s;}
  .hero .wrap>*:nth-child(3){animation-delay:.18s;}
  .hero .wrap>*:nth-child(4){animation-delay:.26s;}
  .hero .wrap>*:nth-child(5){animation-delay:.34s;}
  .hero .wrap>*:nth-child(6){animation-delay:.40s;}
  .page-hero .wrap>*{animation:heroIn .8s cubic-bezier(.22,.61,.36,1) both;}
  .page-hero .wrap>*:nth-child(2){animation-delay:.08s;}
  .page-hero .wrap>*:nth-child(3){animation-delay:.16s;}
  @keyframes heroIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  .float{animation:flt 9s ease-in-out infinite;}

  @keyframes flt{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-18px) rotate(6deg)}}
}

/* ---- WhatsApp flotante ---- */
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 26px rgba(0,0,0,.25);text-decoration:none;transition:.2s;}
.wa:hover{transform:scale(1.07);}

@media (max-width:960px){
  .nav-links{gap:16px;}
  .nav-links a{font-size:13.3px;}
}
@media (max-width:900px){
  section{padding:56px 0;}
  .ctx-grid,.method-grid,.h-grid,.c-grid{grid-template-columns:1fr;gap:40px;}
  .cards,.blog-grid,.method-steps{grid-template-columns:1fr;}
  .blog-grid{grid-template-rows:none;}
  .post-card,.post-body{grid-template-rows:none;grid-row:auto;}
  .post-tag{min-width:0;}
  .timeline{grid-template-columns:1fr 1fr;grid-template-rows:none;row-gap:40px;}
  .tl-line{display:none;}
  .tl-step{grid-template-rows:none;grid-row:auto;}

  .flow-grid{grid-template-columns:1fr;}
  .nav-toggle{display:block;}
  .nav-links{display:none;position:absolute;top:78px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--sand);border-bottom:1px solid var(--line);padding:10px 28px 22px;max-height:calc(100vh - 78px);overflow-y:auto;}
  .nav-links.open{display:flex;}
  .nav-links a{padding:14px 0;border-bottom:1px solid var(--line);}
  .nav-links .btn{margin-top:14px;justify-content:center;}
}
@media (max-width:560px){
  body{font-size:16px;}
  form{padding:26px 22px;}
  .btn{width:100%;justify-content:center;}
  .timeline{grid-template-columns:1fr;}
  .quiz{padding:28px 22px;}

}

/* ---- home: qué hacemos (4 capacidades) ---- */
.method-steps-4{grid-template-columns:repeat(4,1fr);}
@media (max-width:900px){.method-steps-4{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.method-steps-4{grid-template-columns:1fr;}}

.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:40px;}
.cap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;}
.cap-q{font-family:var(--serif);font-size:1.08rem;font-weight:500;color:var(--ink);margin:0 0 14px;}
.cap-mini{margin-top:32px;padding:26px 28px;background:#fff;border:1px dashed var(--line);border-radius:var(--r);max-width:640px;}
.cap-mini-label{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--coral-deep);margin:0 0 6px;}
.cap-mini h3{margin:0 0 8px;font-size:1.05rem;}
.cap-mini p{margin:0;}
@media (max-width:900px){.cap-grid{grid-template-columns:1fr;}}

/* ---- home: sector de enfoque ---- */
.sector-focus-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.sector-focus-photo{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);display:block;margin:0;}
.sector-focus-tag{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted);margin:0 0 6px;}
@media (max-width:760px){.sector-focus-grid{grid-template-columns:1fr;}}

/* ---- home: dos compromisos ---- */
.commit-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:32px;}
.commit h3{font-size:1.15rem;color:#fff;margin:0 0 10px;}
.commit p{margin:0;color:rgba(246,242,237,.82);}
@media (max-width:760px){.commit-grid{grid-template-columns:1fr;}}

.scope-disclosure{margin-top:32px;border-top:1px solid rgba(246,242,237,.22);padding-top:20px;}
.scope-disclosure summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#fff;}
.scope-disclosure summary::-webkit-details-marker{display:none;}
.scope-disclosure summary svg{transition:transform .25s;}
.scope-disclosure[open] summary svg{transform:rotate(180deg);}
.scope-disclosure-body{margin-top:16px;font-size:14.5px;color:rgba(246,242,237,.82);}
.scope-disclosure-body p{margin:0 0 14px;}
.scope-disclosure-body strong{color:#fff;}

/* ---- bloque plegable claro (inversión, condiciones) ---- */
.fold{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0;}
.fold + .fold{border-top:0;}
.fold summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:26px 0;font-family:var(--serif);font-size:1.15rem;font-weight:500;color:var(--ink);}
.fold summary::-webkit-details-marker{display:none;}
.fold summary span.fold-hint{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--muted);}
.fold summary .fold-ico{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:.2s;}
.fold summary:hover .fold-ico{border-color:var(--coral-deep);}
.fold[open] .fold-ico{border-color:var(--coral-deep);}
.fold .fold-ico svg{transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.fold[open] .fold-ico svg{transform:rotate(180deg);}
.fold-body{padding:0 0 32px;}
.fold-body p{font-size:15.5px;color:var(--muted);max-width:64ch;}
.fold-body p strong{color:var(--ink);}
.fold-body .h-list{margin-top:8px;}

/* ---- home: para quién es esto ---- */
.fit-list{list-style:none;margin:24px 0;padding:0;}
.fit-list li{padding:12px 0 12px 30px;position:relative;font-size:15.5px;border-bottom:1px solid var(--line);}
.fit-list li:before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;border-radius:50%;background:var(--coral-deep);}

/* ---- las marcas decorativas del hero deben verse ----
   Estaban en z-index:-1 dentro de una sección con fondo propio,
   así que quedaban detrás del fondo. Con 0 se ven, como en el diseño original. */
.hero-bloom-wrap,.hero-owl-mark{z-index:0;}

/* ---- 

/* ---- la cuarta capacidad va deliberadamente más pequeña ---- */
.cap-mini{margin-top:8px;}

/* ---- entregables ---- */
.deliv{border-top:2px solid var(--coral-deep);padding-top:20px;}
.deliv h3{font-size:1.08rem;margin:0 0 8px;}
.deliv p{font-size:14.5px;color:var(--muted);margin:0;}/* ============================================================
   AJUSTES DE JERARQUÍA  ·  tres defectos verificados
   ============================================================ */

/* 1 · Las tarjetas de Servicios y Recursos: misma altura,
       y el enlace siempre abajo, alineado entre las tres. */
.cards{align-items:stretch;}
.card{display:flex;flex-direction:column;}
.card .card-link{margin-top:auto;align-self:flex-start;}

/* 2 · Las dos tarjetas agroindustriales conservan el ancho
       de las tres industriales, en vez de estirarse a la mitad. */

/* 3 · Recursos cierra la página, no abre otra:
       menos alto y tarjetas más contenidas que Servicios. */
#recursos{padding:76px 0;}
#recursos .cards{margin-top:38px;}
#recursos .card{padding:28px 26px;}
#recursos .card h3{font-size:1.1rem;}
#recursos .card p{font-size:14.5px;}
@media (max-width:900px){#recursos{padding:56px 0;}}

/* ---- ritmo de fondos: ninguna sección repite el de la anterior ---- */
#que-recibe{background:var(--sand) !important;}
#recursos{background:var(--sand) !important;}

/* ---- puntos del carrusel: el rosa empolvado en su mejor uso ---- */
/* ============================================================
   ESCALA TIPOGRÁFICA POR FUNCIÓN
   Antes: cada título estaba 1.8–2.8 px por encima de su texto,
   así que el ojo no los leía como jerarquía sino como negrita.
   Ahora el salto va de 6 a 10 px según el peso del componente.
   ============================================================ */

/* Servicios — el componente de más rango */
.card h3{font-size:1.55rem;line-height:1.18;margin-bottom:14px;}
.card p{font-size:15px;line-height:1.62;}
.card li{font-size:14px;}

/* Recursos — deliberadamente por debajo de Servicios */
#recursos .card h3{font-size:1.25rem;line-height:1.22;}
#recursos .card p{font-size:14.5px;}

/* Método — secuencia, un escalón por debajo de Servicios */
.mstep h3{font-size:1.4rem;line-height:1.2;margin-bottom:12px;}
.mstep p{font-size:15px;line-height:1.6;}

/* Entregables — informativos, no comerciales */
.deliv h3{font-size:1.3rem;line-height:1.2;margin-bottom:10px;}
.deliv p{font-size:15px;line-height:1.6;}

/* Etapas del proceso */
.tl-step h3{font-size:1.35rem;line-height:1.2;}
.tl-step>p{font-size:14.5px;line-height:1.6;}

/* Paneles y diagramas — declaraciones, no tarjetas */
.panel h3{font-size:1.25rem;line-height:1.25;}
.diagram h3{font-size:1.25rem;line-height:1.25;}

/* El contexto: el enunciado se separa de su explicación */
.ctx-list strong{display:block;font-family:var(--serif);font-weight:500;
  font-size:1.16rem;line-height:1.3;color:var(--ink);margin-bottom:7px;}
.ctx-list p{font-size:15.5px;line-height:1.62;}

@media (max-width:900px){
  .card h3{font-size:1.4rem;}
  .mstep h3{font-size:1.3rem;}
  .ctx-list strong{font-size:1.1rem;}
}

/* ---- equipo: con tres personas un carrusel sobra ----
   Las tarjetas inactivas quedaban al 35% de opacidad y recortadas.
   Se ven las tres completas, a la vez. */
.team-carousel{background:transparent;border:0;padding-bottom:0;}
.tc-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:22px;overflow:visible;padding:0;scroll-snap-type:none;}
.tc-slide{flex:none;opacity:1;transform:none;scroll-snap-align:none;}
.tc-controls{display:none;}

/* ============================================================
   RITMO VERTICAL EN TRES NIVELES
   El aire no debe ser el mismo entre secciones que pertenecen
   a la misma idea y entre las que cambian de capítulo.
   ============================================================ */

/* NIVEL 1 · misma idea — 44+44 = 88 px
   Servicios y "Lo que puede dejar un proyecto" son lo mismo:
   qué contratas y qué te queda. Antes había 194 px entre ambas. */
#servicios{padding-bottom:44px;}
#que-recibe{padding-top:44px;}

/* El contexto explica el problema; el método es su respuesta directa. */
#contexto{padding-bottom:52px;}
#metodo{padding-top:52px;}

/* NIVEL 2 · secciones normales — 68+68, el valor por defecto */

/* NIVEL 3 · cambio de capítulo — más aire a propósito */
#sectores{padding-top:88px;}
#recursos{padding-bottom:88px;}
.page-cta{padding:92px 0;}

@media (max-width:900px){
  section{padding:52px 0;}
  #servicios{padding-bottom:32px;} #que-recibe{padding-top:32px;}
  #contexto{padding-bottom:40px;}  #metodo{padding-top:40px;}
  #sectores{padding-top:64px;}     #recursos{padding-bottom:64px;}
  .page-cta{padding:68px 0;}
}

/* ---- equipo: compactar la entrada ---- */
.team-carousel{margin-top:36px;}

/* ============================================================
   QUÉ RECIBES  ·  composición asimétrica con el video
   El video pasa de decorar Servicios a tener función:
   a la izquierda el trabajo, a la derecha lo que deja.
   ============================================================ */
.deliv-split{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;margin-top:44px;}
.deliv-media{position:relative;border-radius:var(--r);overflow:hidden;}
.deliv-media video{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 62%;display:block;}
.deliv-media-tint{position:absolute;inset:0;background:rgba(107,22,51,.28);pointer-events:none;}
.deliv-list{display:grid;gap:26px;}
.deliv-list .deliv{border-top:2px solid var(--coral-deep);padding-top:16px;}
.deliv-list .deliv:nth-child(even){border-top-color:var(--coral);}
@media (max-width:860px){
  .deliv-split{grid-template-columns:1fr;gap:34px;}
  .deliv-media video{aspect-ratio:16/9;}
  .deliv-list{grid-template-columns:1fr 1fr;gap:24px;}
}
@media (max-width:560px){.deliv-list{grid-template-columns:1fr;}}

/* Recursos queda con dos tarjetas: no las estires a tres columnas */
#recursos .cards{grid-template-columns:repeat(2,minmax(0,340px));justify-content:start;}
@media (max-width:760px){#recursos .cards{grid-template-columns:1fr;}}

/* 

/* ---- la marca deja de repetirse en cada hero interno ----
   Aparecía en el mismo punto y al mismo tamaño en todas las
   páginas. El logo del menú ya sostiene la marca; en el hero
   del home la marca de agua sigue, ahí sí es un momento. ---- */
.page-hero-mark{display:none;}

/* En su lugar, un filete de marca bajo el titular de cada
   página interna: presencia sin repetir el símbolo. */
.page-hero h1{position:relative;padding-bottom:20px;}
.page-hero h1::after{content:"";position:absolute;left:0;bottom:0;
  width:64px;height:3px;background:var(--coral-deep);border-radius:2px;}

/* ============================================================
   COMPOSICIÓN PARTIDA  ·  encabezado izquierda, contenido derecha
   Resuelve el vacío que quedaba al lado de bloques estrechos:
   en vez de dejar aire muerto, el título ocupa esa columna.
   ============================================================ */
.split-head{display:grid;grid-template-columns:.68fr 1fr;gap:64px;align-items:start;}
.split-head-text{position:sticky;top:calc(78px + 24px);}
.split-head-text .lead{margin-bottom:0;}
.split-head-body{display:grid;gap:22px;}
.split-head-body .cards{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:0;}
.split-head-body .fold:first-child{border-top:0;padding-top:0;}
.split-head-body .fold:first-child summary{padding-top:0;}
@media (max-width:900px){
  .split-head{grid-template-columns:1fr;gap:32px;}
  .split-head-text{position:static;}
}
@media (max-width:640px){.split-head-body .cards{grid-template-columns:1fr;}}

/* Recursos: dos tarjetas apiladas a lo ancho de la columna derecha.
   Lado a lado quedarían en 286px — demasiado angostas para leerse bien. */
#recursos .split-head-text{position:static;} /* sección corta: sticky sería artificioso */
#recursos .split-head-body{grid-template-columns:1fr;gap:18px;}
#recursos .card{padding:26px 28px;}
#recursos .card .card-n{margin-bottom:6px;}
#recursos .card h3{margin-bottom:8px;}
#recursos .card p{margin-bottom:14px;}

/* ============================================================
   CONÓCENOS  ·  hero corto, origen partido, perfiles tipográficos
   ============================================================ */

/* hero ~22% más bajo: 74/64 -> 58/50 */
.page-hero-tight{padding:58px 0 50px;}
.page-hero-tight .lead{max-width:56ch;}

/* la marca participa en la composición, no rellena un hueco */
/* La marca se centra VERTICALMENTE en el espacio que queda entre el
   título y el final del bloque. Para eso la columna izquierda estira
   hasta el alto de la fila (align-items:stretch) y la marca es un item
   flex con margin:auto, que la centra en el sobrante.
   Eso obliga a soltar el sticky aquí: un elemento tan alto como su fila
   no puede pegarse. En esta sección no hace falta. */
#origen .split-head{align-items:stretch;}
#origen .split-head-text{position:static;display:flex;flex-direction:column;}
#origen .split-head-text h2{margin-bottom:0;}
#origen .origin-mark-wrap{width:240px;margin:auto;padding:28px 0;}
#origen .origin-mark{width:100%;height:auto;opacity:.95;}
@media (max-width:900px){
  #origen .split-head-text{display:block;}
  #origen .origin-mark-wrap{width:160px;margin:30px auto 0;padding:0;}
}

/* perfiles: sin caja, sin sombra, sin foto.
   Regla superior de color, igual que .deliv-list en el home. */
.team-sec{background:var(--sand-2);}
.profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:48px;align-items:start;}
.profile{border-top:2px solid var(--coral-deep);padding-top:22px;}
.profile:nth-child(2){border-top-color:var(--coral);}
.profile:nth-child(3){border-top-color:var(--coral);}
.profile h3{font-size:1.35rem;line-height:1.2;margin:0 0 5px;}
.profile .m-role{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--coral-deep);margin:0 0 20px;}
.profile p{font-size:15px;line-height:1.62;color:var(--muted);margin:0 0 14px;}
.profile strong{color:var(--ink);font-weight:600;}
.profile .f-cred{margin:20px 0 0;}
@media (max-width:900px){.profiles{grid-template-columns:1fr;gap:34px;}}

/* ============================================================
   SECTORES  ·  lista vertical + una sola fotografía con crossfade
   Sustituye el carrusel de dos grupos. La caja de la imagen es fija,
   así que al cambiar de sector la página no salta.
   ============================================================ */
.sec-picker{display:grid;grid-template-columns:36fr 64fr;gap:56px;align-items:start;margin-top:44px;}

.sec-list{display:flex;flex-direction:column;}
.sec-group-label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0 0 12px;}
.sec-list .sec-group-label ~ .sec-group-label{margin-top:30px;}
.sec-item{display:block;width:100%;text-align:left;background:none;
  border:0;border-left:2px solid var(--line);border-radius:0;
  padding:11px 0 11px 18px;cursor:pointer;
  font-family:var(--serif);font-weight:500;font-size:1.05rem;line-height:1.24;
  color:var(--muted);transition:color .2s,border-color .2s,font-size .2s;}
.sec-item:hover{color:var(--ink);border-left-color:var(--accent-blue);}
.sec-item.is-active{color:var(--ink);border-left-color:var(--coral-deep);border-left-width:3px;
  padding-left:17px;font-size:1.42rem;}
.sec-item:focus-visible{outline:2px solid var(--coral);outline-offset:3px;}

.sec-stage{position:relative;}
.sec-shots{position:relative;aspect-ratio:3/2;border-radius:var(--r);overflow:hidden;background:var(--sand-2);}
.sec-shot{position:absolute;inset:0;opacity:0;transition:opacity .34s ease;pointer-events:none;}
.sec-shot.is-active{opacity:1;}
.sec-shot img{width:100%;height:100%;object-fit:cover;display:block;}
.sec-caption{margin:22px 0 0;font-size:1.08rem;line-height:1.5;color:var(--ink);max-width:48ch;}

@media (max-width:900px){
  .sec-picker{grid-template-columns:1fr;gap:26px;}
  .sec-item{font-size:1rem;padding:10px 0 10px 16px;}
  .sec-item.is-active{font-size:1.2rem;padding-left:15px;}
  .sec-caption{font-size:1rem;}
}
@media (prefers-reduced-motion:reduce){.sec-shot{transition:none;}}

/* retratos en los perfiles ·  misma caja 4:5 para las tres.
   La tercera lleva un icono de creación de contenido en vez de foto:
   marco idéntico, relleno distinto -> se lee como decisión, no como
   una foto que faltó subir (que es lo que comunicaban unas iniciales). */
.p-photo{width:132px;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;
  margin:0 0 20px;background:var(--sand);}
.p-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.p-photo-icon{display:flex;align-items:center;justify-content:center;
  background:var(--sand);border:1px solid rgba(107,22,51,.18);}
.p-photo-icon svg{width:62px;height:62px;}
@media (max-width:900px){.p-photo{width:112px;}}

/* ════════════════════════════════════════════════════════════
   RONDA VISUAL 1  ·  reversible: borrar desde aquí hasta
   "FIN RONDA VISUAL 1" y devolver --muted a #7A6570.
   ════════════════════════════════════════════════════════════ */

/* ── A. Hero borgoña ───────────────────────────────────────── */
/* Fondo con profundidad, no una plancha plana de un solo tono. */
.hero{background:linear-gradient(168deg,#6B1633 0%,#5A1128 100%);color:#DED2C4;}
/* Sin rosa. El H1 va crema pleno —sin atenuar, para no perder presencia—
   y «tranquilidad» se distingue por la CURSIVA de Fraunces, no por color.
   (La cursiva estaba desactivada en la base y además la hoja de Google
   Fonts no la cargaba: ambas cosas corregidas.) */
/* Crema cálido y apagado (#DED2C4) en vez de arena brillante (#F6F2ED):
   baja el contraste de 11.4:1 a 8.6:1 sin tocar el tono. Sigue AAA,
   pero deja de golpear. */
.hero h1{color:#DED2C4;}
.hero h1 em{font-style:italic;color:#DED2C4;font-weight:400;}
.hero .eyebrow{color:rgba(222,210,196,.62);}
.hero .lead{color:rgba(222,210,196,.82);max-width:56ch;}
.hero .btn-coral{background:#DED2C4;color:var(--coral-deep);}
.hero .btn-coral:hover{background:#EDE4DA;color:var(--coral-deep);}
.hero .btn-ghost{color:rgba(222,210,196,.92);border-color:rgba(222,210,196,.34);}
.hero .btn-ghost:hover{background:rgba(222,210,196,.09);border-color:rgba(222,210,196,.72);}

/* la marca deja de ser filigrana y pasa a ser masa gráfica a la derecha.
   Los PNG son borgoña #7E1E3F, invisibles sobre borgoña: se invierten a crema. */
/* Tono sobre tono: la marca se oscurece en vez de aclararse.
   Aclararla la volvía rosa por fuerza (crema translúcido sobre borgoña
   pasa siempre por rosa). Oscurecida queda como un bajorrelieve. */
/* La marca en crema al 93%. Por debajo del 90% el crema translúcido
   sobre borgoña da malva (#C5A5AC a 65%, #DAC6C8 a 80%); solo desde
   ~0.90 la claridad es suficiente para que el ojo lo lea como crema. */
.hero-bloom-wrap{right:16px;top:50%;transform:translateY(-50%);width:250px;opacity:1;}
.hero-bloom{filter:brightness(0) invert(1) sepia(.18) saturate(.5);opacity:.80;}
.hero-owl-mark{display:none;}
@media (max-width:1080px){.hero-bloom-wrap{width:210px;right:0;}}
@media (max-width:900px){
  .hero-bloom-wrap{left:auto;right:-30px;top:50%;transform:translateY(-50%);width:180px;}
  .hero-bloom{opacity:.5;}
}

/* ── C. Footer borgoña: la página tiene que cerrar ─────────── */
footer.site{background:#4D1026;color:rgba(246,242,237,.80);border-top:0;}
footer.site .logo-word{color:#F6F2ED;}
footer.site .logo-mark{filter:brightness(0) invert(1);}
footer.site .foot-brand p{color:rgba(246,242,237,.68);}
footer.site .foot-heading{color:rgba(246,242,237,.55);}
footer.site .foot-col a{color:rgba(246,242,237,.90);border-bottom-color:rgba(246,242,237,.26);}
footer.site .foot-col a:hover{color:#fff;border-bottom-color:#F6F2ED;}
footer.site .foot-bottom{border-top-color:rgba(246,242,237,.16);}
/* ════════════════ FIN RONDA VISUAL 1 ════════════════════════ */

/* ════════════════════════════════════════════════════════════
   RONDA VISUAL 2  ·  menos caja, más recorrido
   ════════════════════════════════════════════════════════════ */

/* --- radios en tres niveles en vez de 8px para todo --- */
:root{--r-card:11px; --r-photo:6px;}
.card,.mstep,.cap-mini,.panel{border-radius:var(--r-card);}
.deliv-media,.sec-shots,.p-photo{border-radius:var(--r-photo);}

/* --- sombras: fuera. Borde + fondo + espacio bastan --- */
.card:hover{transform:none;box-shadow:none;border-color:rgba(107,22,51,.32);}
.panel{box-shadow:none;}

/* --- MÉTODO: cuatro pasos en una línea, no cuatro tarjetas --- */
.method-steps-4{position:relative;grid-template-columns:repeat(4,1fr);gap:30px;margin:52px 0 0;}
.method-steps-4::before{content:"";position:absolute;left:33px;right:33px;top:33px;
  height:1px;background:var(--line);z-index:0;}
.method-steps-4 .mstep{background:none;border:0;border-radius:0;padding:0;position:relative;z-index:1;}
.method-steps-4 .mstep-icon{width:26px;height:26px;box-sizing:content-box;padding:20px;
  border-radius:50%;margin:0 0 22px;display:block;transition:.2s;}
.method-steps-4 .card-n{font-size:.78rem;margin:0 0 8px;}

/* Los nodos NO llevan borgoña translúcido: sobre blanco eso da #E3D3D9,
   que el ojo lee como rosa. La progresión se hace con el GROSOR del
   borde en borgoña sólido y un relleno neutro cálido.
   04 va en oliva porque el oliva significa una sola cosa en este sitio:
   evidencia. Medir es donde Embreea deja de afirmar y pasa a comprobar. */
.method-steps-4 .mstep:nth-child(1) .mstep-icon{background:#F8F5F1;border:1px solid var(--coral-deep);}
.method-steps-4 .mstep:nth-child(2) .mstep-icon{background:#F5F1EB;border:1.5px solid var(--coral-deep);}
.method-steps-4 .mstep:nth-child(3) .mstep-icon{background:#F1EBE3;border:2px solid var(--coral-deep);}
.method-steps-4 .mstep:nth-child(4) .mstep-icon{background:var(--accent);border:2px solid var(--accent);stroke:#F1EEE7;}
.method-steps-4 .mstep:nth-child(1) .card-n{opacity:.5;}
.method-steps-4 .mstep:nth-child(2) .card-n{opacity:.68;}
.method-steps-4 .mstep:nth-child(3) .card-n{opacity:.85;}
.method-steps-4 .mstep:nth-child(4) .card-n{opacity:1;color:var(--accent);}
.method-steps-4 .mstep:nth-child(4) h3{color:var(--accent);}
/* la línea de unión en gris cálido neutro, no en borgoña con alfa */
.method-steps-4::before{background:var(--line);}
@media (max-width:900px){
  .method-steps-4{grid-template-columns:1fr 1fr;gap:34px 26px;}
  .method-steps-4::before{display:none;}
}
@media (max-width:560px){.method-steps-4{grid-template-columns:1fr;}}

/* --- "Medimos desde el primer día": nota editorial, no quinta tarjeta --- */
#metodo .measure-note{background:none;border:0;border-top:2px solid var(--accent);
  border-radius:0;box-shadow:none;padding:26px 0 0;margin:42px auto 0;max-width:720px;text-align:center;}
#metodo .measure-note h3{font-family:var(--sans);font-size:11.5px;letter-spacing:.17em;
  text-transform:uppercase;font-weight:600;color:var(--accent);margin:0 0 12px;}
#metodo .measure-note p{font-size:1.06rem;line-height:1.62;color:var(--ink);margin:0;}

/* --- SERVICIOS: orden. Fondo casi blanco, borde apenas visible --- */
#servicios .card{background:#FDFCFB;border-color:rgba(42,15,28,.085);}
/* Activación: pertenece a Embreea pero no tiene el mismo rango.
   El borde punteado leía "provisional"; el fondo rosa lee "otra categoría". */


/* --- RECURSOS: enlaces editoriales, no tarjetas --- */
#recursos .card{background:none;border:0;border-top:1px solid var(--line);
  border-radius:0;padding:20px 0 0;}
#recursos .card:hover{border-top-color:var(--coral-deep);}
#recursos .card-n{font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  font-family:var(--sans);margin-bottom:8px;opacity:.75;}

/* --- entregables: filete más fino, más editorial --- */
.deliv-list .deliv{border-top-width:1.5px;}

/* ════════════════════════════════════════════════════════════
   RITMO DE SUPERFICIES DEL HOME  ·  reversible
   Antes había tres tramos seguidos sobre la misma arena
   (servicios · qué recibes · recursos). Eso era buena parte
   de la sensación de plancha continua.
   Ahora: borgoña → arena → blanco → arena → blanco → arena-2
          → arena → arena miel → borgoña
   Ningún par de secciones contiguas comparte fondo.
   ════════════════════════════════════════════════════════════ */
section#que-recibe{background:#FFFFFF !important;}

/* el oliva hace un trabajo real: alterna con el borgoña en los
   entregables, en vez de repetir dos tonos del mismo rojo */
/* Los cuatro entregables son de la misma categoría salvo uno:
   la línea base es la única evidencia. Alternar colores sugería dos
   grupos que no existen. */
.deliv-list .deliv{border-top-color:var(--coral-deep);}
.deliv-list .deliv:nth-child(3){border-top-color:var(--accent);}

/* la miel aparece donde es legible: sobre el borgoña del footer */
footer.site .foot-heading{color:var(--accent-warm);}
footer.site .foot-col a:hover{color:var(--accent-warm);border-bottom-color:var(--accent-warm);}

/* ════════════════════════════════════════════════════════════
   RITMO DE SUPERFICIES · PÁGINAS INTERNAS
   servicios.html tenía CINCO secciones seguidas sobre el mismo
   arena. Era la página más plana del sitio.
   ════════════════════════════════════════════════════════════ */

/* servicios: arena → blanco → arena → oliva → blanco → arena miel */
section#diagnostico-conductual{background:#FFFFFF;}
section#condiciones{background:#FFFFFF;}
/* Activación lleva el mismo oliva palidísimo que en el home:
   pertenece a Embreea, no tiene el rango de las tres capacidades. */
section#activacion{background:var(--sand-2);}

/* sectores: los dos grupos se distinguen por superficie, no solo por título */
section#grupo-agro{background:#FFFFFF;}

/* proceso: separar «las cuatro etapas» de «lo que te vamos a pedir» */
section#que-pedimos{background:#FFFFFF;}


/* ── Activación como nota editorial, no como cuarta caja ─────────
   El relleno de color y el ancho completo la hacían leer como una
   tarjeta degradada. Una nota al margen comunica mejor "existe,
   pero no tiene el rango de las tres capacidades". */
.cap-note{margin-top:38px;max-width:56%;border-top:1px solid var(--line);padding-top:20px;}
.cap-note-label{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  color:var(--muted);margin:0 0 8px;}
.cap-note h3{margin:0 0 8px;font-size:1.12rem;}
.cap-note p{margin:0;font-size:15px;line-height:1.62;color:var(--muted);}
@media (max-width:900px){.cap-note{max-width:100%;}}

/* ── WhatsApp: deja de ser el color más saturado de la página ──
   #25D366 tiene 70% de saturación con 49% de luz — croma máximo.
   #128C7E es el verde oscuro de la propia marca WhatsApp: se sigue
   reconociendo y baja la luz a la mitad. */
.wa{width:48px;height:48px;background:#128C7E;box-shadow:0 4px 14px rgba(42,15,28,.16);}
.wa svg{width:26px;height:26px;}
.wa:hover{transform:scale(1.05);background:#0F7A6C;}
@media (max-width:640px){.wa{right:16px;bottom:16px;width:44px;height:44px;}}


/* El giro vuelve. Se había quitado por una lectura equivocada mía: ella
   dijo «el logo se movió» refiriéndose a un bug de posición en el hero,
   no a esta animación. bloomFade alterna orquídea y búho cada 30s. */
#origen .origin-mark{animation:bloomFade 30s linear infinite;}

/* ════════════════════════════════════════════════════════════
   VERDE COMO SUPERFICIE  ·  no rompe «oliva = evidencia»
   Dos roles distintos a dos valores distintos:
     · SEÑAL   oliva #5E6B4E, saturado, en elementos pequeños
               (filetes, nodos, títulos). Significa evidencia.
     · SUPERFICIE salvia #E9EBE4, palidísimo, en campos grandes.
               No significa nada, igual que el arena o el blanco.
   Una superficie no compite con una señal porque están a 40 puntos
   de luminosidad de distancia.
   ════════════════════════════════════════════════════════════ */
:root{--surface-sage:#E9EBE4; --surface-sage-2:#DFE3D8;}
section#sectores{background:var(--surface-sage);}

/* la lista de sectores usa el salvia un tono más hondo al pasar el mouse */
.sec-item:hover{border-left-color:#A8B39A;}


/* ════════════════════════════════════════════════════════════
   EL VERDE EN LA ESTRUCTURA
   Se amplía el uso del verde sin perder el significado, separando
   por PESO en vez de por color:
     · línea salvia #B9C0AE, 1px  → estructura. No significa nada.
     · oliva #5E6B4E, 2px o sólido → evidencia. Significa algo.
   Un filete fino claro y un filete grueso oscuro no se confunden.
   ════════════════════════════════════════════════════════════ */
:root{--sage-line:#B9C0AE;}

/* filete que abre cada sección, delante del eyebrow */
.eyebrow{display:flex;align-items:center;gap:11px;}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--sage-line);flex:none;}
.hero .eyebrow::before{background:rgba(222,210,196,.45);}
footer.site .foot-heading::before{background:rgba(230,197,148,.5);}
.page-cta .eyebrow{justify-content:center;}

/* separadores de lista */
.ctx-list li{border-bottom-color:var(--sage-line);}
.ctx-list li:first-child{border-top-color:var(--sage-line);}
.fold{border-top-color:var(--sage-line);border-bottom-color:var(--sage-line);}

/* botón secundario: verde en vez de gris */
.btn-outline{border-color:var(--sage-line);color:#4C5742;}
.btn-outline:hover{border-color:var(--accent);color:#FFF;background:var(--accent);}

/* etiquetas del equipo */
.f-cred li{border-color:var(--sage-line);}

/* enlaces de tarjeta al pasar el mouse */
.card-link:hover{color:var(--accent);}
.card-link:hover svg{stroke:var(--accent);}

/* perfiles: el tercero recupera el verde estructural */
.profile:nth-child(3){border-top-color:var(--accent);}

/* La reserva: SOLO estos tres llevan oliva sólido o grueso.
   Es lo que mantiene el significado «evidencia». */
.method-steps-4 .mstep:nth-child(4) .mstep-icon{background:var(--accent);}
#metodo .measure-note{border-top:2px solid var(--accent);}
.deliv-list .deliv:nth-child(3){border-top-color:var(--accent);border-top-width:2.5px;}


/* ════════════════════════════════════════════════════════════
   RONDA 4 · el mismo lenguaje en las páginas internas
   ════════════════════════════════════════════════════════════ */

/* --- fuera los últimos rellenos de borgoña translúcido (falsos rosas) --- */
.panel{background:#F7F3EE;border:1px solid rgba(107,22,51,.22);box-shadow:none;}
/* .post-thumb y .post-tag NO eran falsos rosas: son borgoña a .78 y .94
   de alfa, es decir prácticamente sólidos, con icono y texto crema encima.
   Aclararlos habría dejado el contenido invisible. Se dejan como estaban,
   solo se hace el degradado sólido para quitar la última transparencia. */
.post-thumb{background:linear-gradient(135deg,#6B1633 0%,#8C2545 100%);}
.post-tag{background:var(--coral-deep);}

/* --- fuera las sombras que quedaban --- */
.diagram{box-shadow:none;}
form{box-shadow:none;}
.quiz{box-shadow:none;}
.post-card:hover{transform:none;box-shadow:none;border-color:rgba(107,22,51,.32);}

/* --- BUG: sobre borgoña el oliva da 2.06:1. Ahí va la miel. --- */
.honest .eyebrow{color:var(--accent-warm);}
.honest .eyebrow::before{background:rgba(230,197,148,.5);}
.page-hero.on-dark.tinted .eyebrow::before{background:var(--sage-line);}

/* --- la línea de tiempo de «Cómo trabajamos» habla el mismo idioma
       que los cuatro pasos del home: la última etapa es medir --- */
.timeline .tl-step:nth-child(4) .tl-node{background:var(--accent);}
.timeline .tl-step:nth-child(4) h3{color:var(--accent);}
.tl-deliv{background:none;border-top:1.5px solid var(--sage-line);border-radius:0;
  padding:14px 0 0;margin-top:18px;}
.tl-deliv span{color:var(--muted);}
.timeline .tl-step:nth-child(4) .tl-deliv{border-top-color:var(--accent);border-top-width:2.5px;}

/* --- listas y cajas de las páginas internas, al filete verde --- */
.h-list li{border-bottom-color:var(--sage-line);}
.faq-item{border-bottom-color:var(--sage-line);}
.faq-item:first-child{border-top-color:var(--sage-line);}


/* ════════════════════════════════════════════════════════════
   FAMILIA VERDE COMPLETA  ·  el verde deja de ser un acento
   ocasional y pasa a ser el segundo sistema cromático.
   Tres niveles medidos:
     profundo #4F5B43  90°  31% luz  · 6.48:1 sobre arena → texto e iconos
     medio    #6F7C60  88°  43% luz  · 3.99:1             → líneas y bordes
     claro    #E7EBDD  77°  89% luz                       → superficies
   Los tres están en 77-90°: oliva seco, no eucalipto.
   RESERVA: el relleno sólido en profundo sigue significando medición.
   ════════════════════════════════════════════════════════════ */
:root{
  --green-deep:#4F5B43; --green-mid:#6F7C60; --green-light:#E7EBDD;
  --accent:#4F5B43; --accent-blue:#4F5B43;
  --sage-line:#6F7C60; --surface-sage:#E7EBDD;
}

/* --- MÉTODO: el recorrido pasa a verde --- */
.method-steps-4 .mstep:nth-child(1) .mstep-icon,
.method-steps-4 .mstep:nth-child(2) .mstep-icon,
.method-steps-4 .mstep:nth-child(3) .mstep-icon{
  background:var(--green-light);border:1px solid rgba(79,91,67,.28);stroke:var(--green-deep);}
.method-steps-4 .mstep:nth-child(2) .mstep-icon{border-width:1.5px;}
.method-steps-4 .mstep:nth-child(3) .mstep-icon{border-width:2px;}
.method-steps-4 .mstep:nth-child(4) .mstep-icon{
  background:var(--green-deep);border:2px solid var(--green-deep);stroke:#F1EEE7;}
.method-steps-4::before{background:var(--green-mid);opacity:.55;}
.method-steps-4 .mstep:nth-child(4) h3,
.method-steps-4 .mstep:nth-child(4) .card-n{color:var(--green-deep);}

/* --- «Medimos desde el primer día»: franja salvia, no epílogo sobre blanco --- */
#metodo .measure-note{background:var(--green-light);border:0;border-radius:var(--r-card);
  padding:34px 40px;margin:48px auto 0;max-width:820px;text-align:center;}
#metodo .measure-note h3{color:var(--green-deep);margin:0 0 12px;}
#metodo .measure-note .eyebrow::before,
#metodo .measure-note h3::before{background:var(--green-deep);}

/* --- ACTIVACIÓN: salvia con intención, sin volver a ser tarjeta --- */
.cap-note{background:var(--green-light);border-top:2px solid var(--green-deep);
  border-radius:0 0 var(--r-card) var(--r-card);padding:22px 26px 24px;max-width:60%;}
.cap-note-label{color:var(--green-deep);}

/* --- QUÉ RECIBES: todos los filetes en verde medio; la línea base marcada --- */
.deliv-list .deliv{border-top-color:var(--green-mid);border-top-width:1.5px;}
.deliv-list .deliv:nth-child(3){border-top-color:var(--green-deep);border-top-width:2.5px;}
.deliv-list .deliv:nth-child(3) h3::after{content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--green-deep);margin-left:10px;vertical-align:middle;}

/* --- SECTORES: borgoña = selección, verde = organización --- */
.sec-group-label{color:var(--green-deep);}
.sec-item:hover{background:var(--green-light);border-left-color:var(--green-mid);}
.sec-item.is-active{background:none;border-left-color:var(--coral-deep);}

/* --- RECURSOS: un solo detalle verde --- */
#recursos .card:nth-child(2) .card-n{color:var(--green-deep);}
#recursos .card:nth-child(2){border-top-color:var(--green-mid);}

/* --- líneas y bordes suben de presencia (antes #B9C0AE al 72% de luz) --- */
.eyebrow::before{background:var(--green-mid);}
.ctx-list li{border-bottom-color:rgba(111,124,96,.34);}
.ctx-list li:first-child{border-top-color:rgba(111,124,96,.34);}
.fold{border-top-color:rgba(111,124,96,.34);border-bottom-color:rgba(111,124,96,.34);}
.f-cred li{border-color:rgba(111,124,96,.45);}
.h-list li{border-bottom-color:rgba(111,124,96,.34);}
.faq-item{border-bottom-color:rgba(111,124,96,.34);}
.faq-item:first-child{border-top-color:rgba(111,124,96,.34);}
.btn-outline{border-color:var(--green-mid);color:var(--green-deep);}
.btn-outline:hover{background:var(--green-deep);border-color:var(--green-deep);color:#F6F2ED;}
.tl-deliv{border-top-color:var(--green-mid);}
.timeline .tl-step:nth-child(4) .tl-node{background:var(--green-deep);}
.timeline .tl-step:nth-child(4) h3{color:var(--green-deep);}
.timeline .tl-step:nth-child(4) .tl-deliv{border-top-color:var(--green-deep);}
.profile:nth-child(3){border-top-color:var(--green-deep);}

/* --- SIN VERDE: hero, CTA final y footer. La página tiene que descansar. --- */
.hero .eyebrow::before{background:rgba(222,210,196,.45);}
.page-cta .eyebrow::before{background:var(--coral-deep);}
footer.site .foot-heading::before{background:rgba(230,197,148,.5);}


/* ════════════════════════════════════════════════════════════
   EL VERDE EN LAS PÁGINAS INTERNAS
   Casi todo el verde de la ronda anterior estaba dentro de
   selectores del home (#metodo, .deliv-list, .sec-picker).
   Aquí se lleva a los componentes que solo viven adentro.
   ════════════════════════════════════════════════════════════ */

/* --- CÓMO TRABAJAMOS · la línea de tiempo, igual que el método del home --- */
.tl-node{background:var(--green-light);border:1.5px solid rgba(79,91,67,.30);
  box-shadow:0 0 0 6px var(--sand);}
.tl-node svg{stroke:var(--green-deep);}
.timeline .tl-step:nth-child(4) .tl-node{background:var(--green-deep);border-color:var(--green-deep);}
.timeline .tl-step:nth-child(4) .tl-node svg{stroke:#F1EEE7;}
.timeline::before{background:var(--green-mid);opacity:.55;}
.panel li::before{background:var(--green-mid);}
.diagram{border-color:rgba(111,124,96,.34);}
.diagram h3{color:var(--green-deep);}
section#que-pedimos{background:var(--green-light);}

/* --- SERVICIOS · Activación en salvia, igual que en el home --- */
section#activacion{background:var(--green-light);}
section#activacion .eyebrow{color:var(--green-deep);}
.svc-icon-badge{background:var(--green-light);border:1px solid rgba(79,91,67,.22);}

/* --- SECTORES · el grupo abierto se marca en verde --- */
details.sector-group[open] .sector-group-toggle{background:var(--green-light);}
.sector-group-head:hover .sector-group-toggle{background:var(--green-light);}

/* --- CONTACTO Y FORMULARIOS --- */
form{border-color:rgba(111,124,96,.34);}
input,textarea,select{border-color:rgba(111,124,96,.40);}
input:focus,textarea:focus,select:focus{border-color:var(--green-deep);outline-color:var(--green-deep);}
label{color:var(--green-deep);}

/* --- BLOG --- */
.post-card{border-color:rgba(111,124,96,.34);}
.post-card:hover{border-color:var(--green-deep);}
.post-meta{color:var(--green-deep);}

/* --- AUTODIAGNÓSTICO --- */
.quiz{border-color:rgba(111,124,96,.34);}
.quiz-opt{border-color:rgba(111,124,96,.40);}
.quiz-opt:hover{border-color:var(--green-mid);background:var(--green-light);}
.quiz-progress{color:var(--green-deep);}

/* --- FAQ --- */
.faq-q{color:var(--ink);}
.faq-item.open .faq-q{color:var(--green-deep);}


/* ════════════════════════════════════════════════════════════
   HERO · marca en el color del botón, y «tranquilidad» en verde
   ════════════════════════════════════════════════════════════ */

/* La marca deja de pintarse con filtros (que solo sabían aclarar u
   oscurecer) y pasa a máscara: el PNG recorta la forma y el color lo
   pone el fondo. Ahora el color es exacto y editable en un solo sitio.
   Color = #DED2C4, el mismo del botón «Hacer el autodiagnóstico». */
/* La máscara CSS era la vía técnicamente correcta (color exacto) pero no
   renderizó y no hay forma de probarla desde aquí. Se vuelve al filtro,
   que sí funciona, calibrado hacia el tono del botón: sepia lo saca del
   rosa hacia el tierra cálido. */
.hero-bloom-wrap{background:none;opacity:1;}
.hero-bloom{display:block;visibility:visible;
  filter:brightness(0) invert(1) sepia(.42) saturate(.85) brightness(.97);
  opacity:.72;}

/* «tranquilidad»: verde claro, el único verde que se lee sobre borgoña.
   No es capricho cromático — es la promesa que el método existe para
   comprobar, y el verde es el color de la comprobación en este sitio. */
.hero h1 em{color:#A8B79A;font-style:italic;}


/* Conócenos · la sección de equipo vuelve a arena. El salvia competía
   con los retratos y con el icono del tercer perfil. */
#equipo.team-sec{background:var(--sand-2);}
.profile:nth-child(1){border-top-color:var(--coral-deep);}
.profile:nth-child(2){border-top-color:var(--coral);}
.profile:nth-child(3){border-top-color:var(--coral-deep);}
#equipo .f-cred li{border-color:var(--line);}


/* ════════════════════════════════════════════════════════════
   CONÓCENOS · marca de agua, verde en detalles, y el logo
   vuelve a acompañar el scroll
   ════════════════════════════════════════════════════════════ */

/* El logo de Conócenos conserva su color original. */

/* 2 · Vuelve el sticky: al abrir los plegables la columna derecha
   crece y la marca acompaña la bajada, sin perder su giro.
   Se renuncia al centrado vertical, que era incompatible. */
#origen .split-head{align-items:start;}
#origen .split-head-text{position:sticky;top:calc(78px + 28px);display:block;}
#origen .origin-mark-wrap{margin:34px auto 0;padding:0;}
@media (max-width:900px){
  #origen .split-head-text{position:static;}
  #origen .origin-mark-wrap{margin:30px auto 0;}
}

/* 3 · Verde solo en líneas y rótulos pequeños. Nada de superficies. */
.profile{border-top-color:var(--green-mid);}
.profile:nth-child(1),.profile:nth-child(2),.profile:nth-child(3){border-top-color:var(--green-mid);}
.profile .m-role{color:var(--green-deep);}
#equipo .f-cred li{border-color:rgba(111,124,96,.45);}
#origen .fold{border-top-color:rgba(111,124,96,.34);border-bottom-color:rgba(111,124,96,.34);}
#origen .fold-hint{color:var(--green-deep);}


/* ════════════════════════════════════════════════════════════
   3 · POR QUÉ EL LOGO NO SEGUÍA EL SCROLL
   la regla global de section con overflow hidden (línea 18) convierte la
   sección en contenedor de recorte, y position:sticky se ignora
   dentro de cualquier ancestro con overflow hidden/auto/scroll.
   No había forma de verlo: el CSS era válido y no daba error.
   overflow:clip recorta igual pero NO crea contenedor de scroll.
   ════════════════════════════════════════════════════════════ */
#origen{overflow:clip;}
#condiciones{overflow:clip;}
@supports not (overflow:clip){
  #origen,#condiciones{overflow:visible;}
}

/* El logo del hero ya viene en arena desde el archivo: sin filtros
   que lo desvíen hacia el rosa. Solo transparencia. */
.hero-bloom{filter:none;opacity:.88;}


/* ════════════════════════════════════════════════════════════
   DISTRIBUCIÓN · lo que faltaba de la curva cromática
   ════════════════════════════════════════════════════════════ */

/* 1 · RECURSOS: la segunda masa de verde del home.
   La columna del título toma salvia; las tarjetas quedan sobre arena.
   Aprovecha la composición partida que ya existía. */
#recursos .split-head-text{background:var(--green-light);border-radius:var(--r-card);
  padding:30px 30px 34px;align-self:start;}
#recursos .split-head-text .eyebrow{color:var(--green-deep);}
#recursos .split-head-text .lead{margin-bottom:0;}
#recursos .split-head{gap:44px;}
@media (max-width:900px){#recursos .split-head-text{padding:24px;}}

/* 2 · AUTODIAGNÓSTICO: el progreso es sistema, no acción → verde.
   El botón sigue en borgoña: la acción no cambia de color. */
.quiz-progress i.done{background:var(--green-mid);}
.quiz-progress i{background:rgba(111,124,96,.22);}

/* 3 · SERVICIOS (página): alternancia de superficie entre capacidades,
   con el mismo lenguaje dentro de cada una. No se pinta una capacidad
   de un color y otra de otro: eso inventaría categorías que no existen. */
section#investigacion-decision{background:#FFFFFF;}
section#diagnostico-conductual{background:var(--sand);}
section#diseno-desempeno{background:#FFFFFF;}
.svc-row .card-n,#servicios .card-n{color:var(--green-deep);}


/* ════════════════════════════════════════════════════════════
   COMITÉ DE COMPRA · antes era un PNG de 1.4 MB
   El texto vivía dentro de una imagen: ni Google ni un lector de
   pantalla podían leerlo, no se adaptaba a móvil y traía el
   lenguaje visual antiguo (sombras, dorados, degradados).
   Reconstruido: tres módulos + conectores SVG + cierre plano.
   ════════════════════════════════════════════════════════════ */
.comite{margin-top:40px;}
.comite-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.rol{border-top:2px solid var(--green-mid);padding-top:22px;}
.rol-ico{width:34px;height:34px;display:block;margin-bottom:16px;}
.rol-label{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--green-deep);margin:0 0 6px;}
.rol h4{font-family:var(--serif);font-weight:500;font-size:1.28rem;line-height:1.2;
  color:var(--coral-deep);margin:0 0 14px;}
.rol-q{font-family:var(--serif);font-size:1.02rem;line-height:1.42;color:var(--ink);
  margin:0 0 16px;}
.rol-busca{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0;}
.rol-busca span{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--green-deep);margin-bottom:5px;}

/* conectores: SVG en línea, no imagen. Se estira a lo ancho pero el
   trazo no engorda (vector-effect), así que siempre mide 1.5px. */
.comite-join{display:block;width:100%;height:56px;}

/* El cierre NO lleva relleno. Con fondo borgoña macizo leía como un
   bloque ajeno pegado debajo, no como el final del diagrama.
   Ahora usa el mismo lenguaje que los tres módulos —filete superior +
   rótulo en versalitas— pero en borgoña en vez de verde: misma familia,
   distinta jerarquía. Es la conclusión, no un cuarto rol. */
.comite-cierre{background:none;border-top:2.5px solid var(--coral-deep);
  border-radius:0;padding:24px 0 0;}
.comite-cierre .eyebrow{color:var(--coral-deep);}
.comite-cierre .eyebrow::before{background:var(--coral-deep);}
.comite-cierre p{margin:0;font-size:1.12rem;line-height:1.55;color:var(--ink);
  max-width:62ch;font-family:var(--serif);font-weight:400;}
.comite-cierre strong{color:var(--coral-deep);font-weight:500;}

@media (max-width:900px){
  .comite-roles{grid-template-columns:1fr;gap:30px;}
  .comite-join{height:30px;}
  .comite-join path{d:path("M150 0V30");}
  .rol h4{font-size:1.2rem;}
}


/* ════════════════════════════════════════════════════════════
   1 · RECURSOS: los dos no valen lo mismo
   Artículos es material de lectura. El autodiagnóstico es la única
   herramienta del sitio que deja un dato de un desconocido.
   Se diferencian por jerarquía, no por adorno.
   ════════════════════════════════════════════════════════════ */
#recursos .card:nth-child(1){border-top:1px solid var(--green-mid);}
#recursos .card:nth-child(2){border-top:2.5px solid var(--accent-warm);}
#recursos .card:nth-child(2) .card-n{color:#7F5F26;}
.card-cta{margin-top:auto;align-self:flex-start;padding:12px 22px;font-size:14px;}

/* ════════════════════════════════════════════════════════════
   2 · LA MIEL, REPARTIDA
   #E6C594 da 1.47:1 sobre crema: no puede llevar información.
   Pero sí puede ser SUPERFICIE, FILETE o MARCADOR, donde el
   significado lo pone la forma o la posición, no el color.
   Sobre oscuro sí puede ser texto (7.15:1).
   ════════════════════════════════════════════════════════════ */

/* filetes y marcadores decorativos */
.page-cta .eyebrow::before{background:var(--accent-warm);width:34px;height:2.5px;}
.h-list li::marker{color:var(--accent-warm);}
.tl-node{box-shadow:0 0 0 6px var(--sand),0 0 0 7.5px rgba(230,197,148,.55);}
.fold summary:hover .fold-hint{color:#7F5F26;}
/* «Medimos desde el primer día» conserva el VERDE: es evidencia, y esa
   es la reserva del sistema. La miel no puede entrar aquí. */
.diagram{border-top:2.5px solid var(--accent-warm);}
.panel{border-top:2.5px solid var(--accent-warm);}
/* El cierre del comité conserva el BORGOÑA: es la conclusión. */

/* superficies tibias: la miel como tinte, no como tinta */
/* La barra de progreso conserva el VERDE: el progreso es estructura. */
blockquote,.pull{border-left:3px solid var(--accent-warm);}

/* sobre oscuro sí es texto */
.honest strong{color:var(--accent-warm);}
.comite-cierre .eyebrow{color:#7F5F26;}

/* La miel se parte en dos, igual que el verde:
     --accent-warm #E6C594  pinta  (1.47:1 sobre arena → filetes y fondos)
     --honey-ink   #7F5F26  escribe (5.28:1 sobre arena → texto, AA en los
                                     cuatro fondos claros del sitio)
   Mismo tono ámbar (38-40°), distinta luz. */
:root{--honey-ink:#7F5F26;}
.rol-label + h4::after{content:"";}
#recursos .card:nth-child(2) .card-n,
.comite-cierre .eyebrow,
.fold summary:hover .fold-hint{color:var(--honey-ink);}


/* ════════════════════════════════════════════════════════════
   ALTERNANCIA VERDE / MIEL EN LAS SUPERFICIES
   Trece bloques compartían el mismo salvia y la página se volvía
   repetitiva. Se reparten con un criterio, no al azar:

     VERDE observa   → el problema, la estructura, la evidencia
     MIEL  ofrece    → lo que Embreea pone, propone o entrega

   MEDIDO, no supuesto: salvia se separa 38/765 del arena y arena-miel
   35/765. Son casi idénticos en contraste — alternarlos NO baja el salto
   entre bloques, solo rompe la repetición. Si algún día hace falta bajar
   de verdad el contraste, hay que aclarar la superficie, no cambiarle
   el tono.
   ════════════════════════════════════════════════════════════ */
:root{--surface-honey:#F0E8DA;}

/* SECTORES · las dos cajas de cada sector dejan de ser gemelas */
.sd-box{background:var(--green-light);}
.sd-box + .sd-box{background:var(--surface-honey);}
.sd-box + .sd-box span{color:var(--honey-ink);}

/* SERVICIOS · Activación es una oferta, no una observación */
section#activacion{background:var(--surface-honey);}
section#activacion .eyebrow{color:var(--honey-ink);}
section#activacion .eyebrow::before{background:var(--accent-warm);}
.cap-note{background:var(--surface-honey);border-top-color:var(--honey-ink);}
.cap-note-label{color:var(--honey-ink);}

/* RECURSOS · también es una oferta */
#recursos .split-head-text{background:var(--surface-honey);}
#recursos .split-head-text .eyebrow{color:var(--honey-ink);}
#recursos .split-head-text .eyebrow::before{background:var(--accent-warm);}

/* CÓMO TRABAJAMOS · «lo que te vamos a pedir» es una condición nuestra */
section#que-pedimos{background:var(--surface-honey);}
section#que-pedimos .eyebrow{color:var(--honey-ink);}
section#que-pedimos .eyebrow::before{background:var(--accent-warm);}

/* Lo que SIGUE en verde, porque observa o mide:
   · Sectores (home) · los nodos 01-03 del método · «Medimos desde el
   primer día» · las insignias de icono · el hover de la lista de sectores */


/* ════════════════════════════════════════════════════════════
   SECTORES · el color identifica al sector, no parte el bloque
   Antes se alternaban las dos cajas DENTRO de cada sector, lo que
   partía cada bloque en dos mitades distintas. Alternar ENTRE
   sectores le da identidad a cada uno y deja el bloque entero.
   1 automatización · 3 minería · 5 floricultura → VERDE
   2 software · 4 nutrición animal              → MIEL
   ════════════════════════════════════════════════════════════ */
.sd-box,.sd-box + .sd-box{background:var(--green-light);}
.sd-box span,.sd-box + .sd-box span{color:var(--green-deep);}

/* Por ID, no por nth-of-type: los cinco sectores viven en dos <section>
   distintas (Industrial y Agroindustrial) y el contador se reinicia en
   cada una, lo que habría roto la alternancia entre el 3.º y el 4.º. */
#software .sd-box,
#nutricion-animal .sd-box{background:var(--surface-honey);}
#software .sd-box span,
#nutricion-animal .sd-box span{color:var(--honey-ink);}

/* La marca del hero conserva su color miel (#E4D3B4 desde el archivo)
   pero baja a marca de agua: 1.66:1 sobre el borgoña. La referencia es
   la de Conócenos, que está en 1.39:1 sobre arena.
   Nota: bajar la opacidad de un color claro sobre borgoña lo lleva hacia
   el malva (#884352). Es inevitable —cualquier claro translúcido sobre
   este fondo pasa por ahí— y a este nivel de contraste ya no se percibe
   como tono, solo como presencia. */
.hero-bloom{opacity:.27;}


/* ════════════════════════════════════════════════════════════
   INTERCAMBIO SECTORES ↔ RECURSOS
   Sectores es una franja enorme; Recursos, un panel pequeño.
   La superficie grande se lleva el tono más cercano al fondo
   (miel, 35/765 de distancia) y la pequeña el más separado
   (salvia, 38/765). Área grande = tono discreto.
   ════════════════════════════════════════════════════════════ */
section#sectores{background:var(--surface-honey);}
#recursos .split-head-text{background:var(--green-light);}
#recursos .split-head-text .eyebrow{color:var(--green-deep);}
#recursos .split-head-text .eyebrow::before{background:var(--green-mid);}
/* el hover de la lista de sectores ya no puede ser salvia sobre miel */
.sec-item:hover{background:rgba(79,91,67,.09);border-left-color:var(--green-mid);}