/* Metodologia Autocoaching 2026
   Composicion propia bajo la cabecera y el pie publicos compartidos. */
.met27{
  --m27-blue:#004fa0;
  --m27-blue-dark:#003a77;
  --m27-ink:#0f172a;
  --m27-slate:#475569;
  --m27-muted:#64748b;
  --m27-line:#e2e8f0;
  --m27-paper:#f8fafc;
  --m27-white:#fff;
  --m27-gold:#d4922a;
  --m27-ease:cubic-bezier(.23,1,.32,1);
  --m27-love:#e90087;
  --m27-leisure:#16a63a;
  --m27-home:#f2a900;
  --m27-health:#3e7c3e;
  --m27-growth:#258bc4;
  --m27-money:#e9c900;
  --m27-work:#3557a5;
  --m27-family:#e7b5d0;
  width:100%;
  margin:0;
  overflow:hidden;
  background:var(--m27-paper);
  color:var(--m27-ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
}
.met27 *{box-sizing:border-box}
.met27 a{color:inherit}
.met27 button,.met27 a{-webkit-tap-highlight-color:transparent}
.met27 .m27-hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  align-items:center;
  gap:clamp(20px,5vw,80px);
  padding:170px clamp(20px,6vw,100px) 80px;
  overflow:hidden;
  isolation:isolate;
  background:var(--m27-blue);
  color:var(--m27-white);
}
.met27 .m27-hero::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-2;
  background:radial-gradient(circle at 79% 42%,rgba(255,255,255,.12),transparent 28%),radial-gradient(circle at 10% 88%,rgba(212,146,42,.3),transparent 24%);
}
.met27 .m27-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:45vw;
  height:45vw;
  min-width:520px;
  min-height:520px;
  right:-15vw;
  bottom:-23vw;
  border:1px solid rgba(255,255,255,.18);
  border-radius:49% 51% 55% 45%/43% 48% 52% 57%;
  transform:rotate(20deg);
}
.met27 .m27-eyebrow{
  margin:0 0 20px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.met27 .m27-hero h1{
  max-width:980px;
  margin:0;
  color:var(--m27-white);
  font-size:clamp(4rem,7.4vw,8.2rem);
  font-weight:850;
  line-height:.8;
  letter-spacing:-.07em;
}
.met27 .m27-title-solid{
  display:block;
  white-space:nowrap;
}
.met27 .m27-title-outline{
  display:block;
  margin-top:.08em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.88);
}
.met27 .m27-hero-copy{
  max-width:650px;
  margin:34px 0 0;
  color:#e8f2ff;
  font-size:clamp(1.05rem,1.55vw,1.35rem);
}
.met27 .m27-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:34px}
.met27 .m27-button{
  display:inline-flex;
  min-height:48px;
  align-items:center;
  justify-content:center;
  padding:13px 20px;
  border-radius:999px;
  background:var(--m27-white);
  color:var(--m27-blue);
  font-weight:780;
  text-decoration:none;
  transition:transform .2s var(--m27-ease),background-color .2s var(--m27-ease);
}
.met27 .m27-button:hover{transform:translateY(-2px)}
.met27 .m27-text-link{display:inline-flex;min-height:44px;align-items:center;padding:8px 4px;color:var(--m27-white);font-weight:700;text-underline-offset:5px}
.met27 .m27-hero-visual{position:relative;min-height:610px;display:grid;place-items:center}
.met27 .m27-life-wheel{
  position:relative;
  width:min(38vw,520px);
  aspect-ratio:1;
  border-radius:50%;
  background:conic-gradient(var(--m27-love) 0 45deg,var(--m27-leisure) 45deg 90deg,var(--m27-home) 90deg 135deg,var(--m27-health) 135deg 180deg,var(--m27-growth) 180deg 225deg,var(--m27-money) 225deg 270deg,var(--m27-work) 270deg 315deg,var(--m27-family) 315deg);
  box-shadow:0 35px 80px rgba(0,24,58,.35);
  transform:rotate(-22.5deg);
}
.met27 .m27-life-wheel::before{content:"";position:absolute;inset:8%;border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 9.4%,rgba(255,255,255,.48) 9.7% 10%);mix-blend-mode:screen}
.met27 .m27-life-wheel::after{content:attr(data-center);position:absolute;inset:35%;display:grid;place-items:center;border-radius:50%;background:var(--m27-white);color:var(--m27-blue);font-weight:850;font-size:clamp(1.1rem,2vw,1.8rem);letter-spacing:.08em;transform:rotate(22.5deg)}
.met27 .m27-orbit-label{position:absolute;padding:10px 15px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(0,45,91,.62);backdrop-filter:blur(10px);font-size:.9rem;font-weight:700;white-space:nowrap}
.met27 .m27-orbit-label:nth-of-type(1){top:10%;right:4%}
.met27 .m27-orbit-label:nth-of-type(2){top:31%;left:-2%}
.met27 .m27-orbit-label:nth-of-type(3){right:-4%;bottom:25%}
.met27 .m27-orbit-label:nth-of-type(4){bottom:5%;left:12%}
.met27 .m27-scroll-cue{position:absolute;left:clamp(20px,6vw,100px);bottom:25px;font-size:.72rem;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:#d9eaff}
.met27 .m27-scroll-cue::after{content:"";display:inline-block;width:44px;height:1px;margin-left:12px;vertical-align:middle;background:currentColor}
.met27 .m27-promise{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(40px,8vw,130px);padding:clamp(90px,13vw,190px) clamp(20px,7vw,118px);background:var(--m27-white)}
.met27 .m27-kicker{font-size:.77rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--m27-blue)}
.met27 .m27-promise h2,.met27 .m27-story-intro h2,.met27 .m27-catalogue h2,.met27 .m27-closing h2{margin:10px 0 0;font-size:clamp(2.8rem,6.3vw,7.4rem);line-height:.9;letter-spacing:-.06em}
.met27 .m27-promise-copy{align-self:end;max-width:820px}
.met27 .m27-promise-copy p{margin:0;font-size:clamp(1.25rem,2.2vw,2rem);line-height:1.35;letter-spacing:-.025em}
.met27 .m27-promise-copy .m27-minimum{margin-top:34px;padding-top:22px;border-top:1px solid var(--m27-line);font-size:1rem;color:var(--m27-slate)}
.met27 .m27-story-intro{padding:110px clamp(20px,7vw,118px) 60px;background:var(--m27-paper)}
.met27 .m27-story-intro p{max-width:730px;margin:28px 0 0;font-size:1.15rem;color:var(--m27-slate)}
.met27 .m27-story-shell{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:start;background:var(--m27-paper)}
.met27 .m27-story-nav{position:sticky;top:0;z-index:10;height:100vh;padding:18vh 20px 30px clamp(20px,4vw,68px);display:flex;flex-direction:column;justify-content:center;gap:10px}
.met27 .m27-story-nav a{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px;align-items:center;min-height:50px;color:var(--m27-muted);text-decoration:none;font-size:14px;font-weight:750;transition:color .2s var(--m27-ease),transform .2s var(--m27-ease)}
.met27 .m27-story-dot{display:block;width:9px;height:9px;border:1px solid currentColor;border-radius:50%;transition:transform .2s var(--m27-ease),background-color .2s var(--m27-ease)}
.met27 .m27-story-link-copy{display:flex;align-items:baseline;gap:9px;white-space:nowrap}
.met27 .m27-story-link-copy strong{min-width:22px;color:inherit;font:inherit;font-weight:850}
.met27 .m27-story-nav a.active{color:var(--m27-blue);transform:translateX(6px)}
.met27 .m27-story-nav a.active .m27-story-dot{background:var(--m27-blue);transform:scale(1.25)}
.met27 .m27-story-panels{min-width:0}
.met27 .m27-story{position:relative;min-height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr);align-items:center;gap:clamp(35px,6vw,100px);padding:90px clamp(20px,7vw,110px) 90px clamp(20px,4vw,60px);overflow:hidden}
.met27 .m27-story:nth-child(even){background:var(--m27-white)}
.met27 .m27-story-number{position:absolute;right:3vw;top:-.12em;color:rgba(0,79,160,.075);font-size:clamp(10rem,29vw,30rem);font-weight:900;line-height:1;letter-spacing:-.1em;pointer-events:none}
.met27 .m27-story-copy{position:relative;z-index:2;max-width:610px}
.met27 .m27-story-copy h3{margin:0;font-size:clamp(3.2rem,7vw,8rem);line-height:.83;letter-spacing:-.065em}
.met27 .m27-product-step{display:inline-block;margin-top:26px;padding:8px 13px;border:1px solid currentColor;border-radius:999px;color:var(--m27-blue);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.met27 .m27-story-copy p{margin:24px 0 0;font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--m27-slate)}
.met27 .m27-scene{position:relative;z-index:2;min-height:520px;display:grid;place-items:center}
.met27 .m27-mini-wheel{width:min(32vw,430px);aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--m27-love) 0 45deg,var(--m27-leisure) 45deg 90deg,var(--m27-home) 90deg 135deg,var(--m27-health) 135deg 180deg,var(--m27-growth) 180deg 225deg,var(--m27-money) 225deg 270deg,var(--m27-work) 270deg 315deg,var(--m27-family) 315deg);box-shadow:0 24px 70px rgba(15,23,42,.12);position:relative;transform:rotate(-22.5deg)}
.met27 .m27-mini-wheel::before{content:"";position:absolute;inset:10%;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.08) 0 8.8%,rgba(255,255,255,.7) 9% 9.6%)}
.met27 .m27-mini-wheel::after{content:attr(data-center);position:absolute;inset:38%;display:grid;place-items:center;border-radius:50%;background:white;color:var(--m27-blue);font-weight:850;transform:rotate(22.5deg)}
.met27 .m27-scale-note{position:absolute;right:1%;bottom:4%;max-width:220px;color:var(--m27-muted);font-size:14px;line-height:1.45}
.met27 .m27-thought-field{width:min(100%,680px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.met27 .m27-thought{display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:center;justify-items:center;gap:14px;min-height:170px;padding:24px 20px;border:1px solid #cbdced;border-radius:28px;background:var(--m27-white);color:var(--m27-blue);font-weight:750;line-height:1.25;text-align:center;box-shadow:0 12px 28px rgba(0,79,160,.08)}
.met27 .m27-thought:nth-child(5){grid-column:1/-1;max-width:74%;justify-self:center}
.met27 .m27-thought-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#e8f3ff;color:var(--m27-blue)}
.met27 .m27-thought-icon .hp-catalog-icon{width:30px;height:30px}
.met27 .m27-catalogue-free{grid-column:1/-1;margin:4px 0 0;color:var(--m27-slate);font-size:.88rem;text-align:center}
.met27 .m27-choice-scene{width:min(100%,600px);display:grid;gap:14px}
.met27 .m27-choice{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:14px;padding:17px 20px;border:1px solid var(--m27-line);border-radius:16px;background:rgba(255,255,255,.8);color:var(--m27-slate);font-weight:650}
.met27 .m27-choice::before{content:"";width:24px;height:24px;border:2px solid #94a3b8;border-radius:50%}
.met27 .m27-choice.selected{border-color:var(--m27-blue);background:var(--m27-blue);color:white;box-shadow:0 20px 50px rgba(0,79,160,.22);transform:translateX(-24px)}
.met27 .m27-choice.selected::before{border:7px solid white;background:var(--m27-blue)}
.met27 .m27-choice-note{margin:12px 0 0;color:var(--m27-blue);font-size:.9rem;font-weight:800;text-align:center}
.met27 .m27-path-scene{width:min(100%,610px);display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:center}
.met27 .m27-path-node{min-height:165px;display:grid;place-items:center;padding:18px;border:1px solid var(--m27-line);border-radius:50%;background:white;text-align:center;font-weight:800;box-shadow:0 16px 45px rgba(15,23,42,.08)}
.met27 .m27-path-node strong{display:block;color:var(--m27-blue);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.met27 .m27-path-arrow{height:1px;background:var(--m27-blue);position:relative}
.met27 .m27-path-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-top:1px solid var(--m27-blue);border-right:1px solid var(--m27-blue);transform:rotate(45deg)}
.met27 .m27-review-scene{width:min(100%,620px);display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
.met27 .m27-review-wheel{aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--m27-love) 0 45deg,var(--m27-leisure) 45deg 90deg,var(--m27-home) 90deg 135deg,var(--m27-health) 135deg 180deg,var(--m27-growth) 180deg 225deg,var(--m27-money) 225deg 270deg,var(--m27-work) 270deg 315deg,var(--m27-family) 315deg);position:relative;box-shadow:0 20px 50px rgba(15,23,42,.1)}
.met27 .m27-review-wheel::after{content:attr(data-label);position:absolute;inset:33%;display:grid;place-items:center;border-radius:50%;background:white;color:var(--m27-blue);font-weight:850}
.met27 .m27-review-wheel:first-child{opacity:.58;transform:scale(.84)}
.met27 .m27-manifesto{padding:clamp(100px,14vw,220px) clamp(20px,8vw,140px);background:var(--m27-ink);color:var(--m27-white)}
.met27 .m27-manifesto p{margin:0;font-size:clamp(2.7rem,7vw,8.3rem);font-weight:800;line-height:.94;letter-spacing:-.06em}
.met27 .m27-manifesto p+p{margin-top:10px}
.met27 .m27-dim{color:#6f829d}.met27 .m27-blue{color:#52a7ff}.met27 .m27-gold{color:#f3bd68}
.met27 .m27-catalogue{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:clamp(50px,9vw,150px);align-items:end;padding:clamp(100px,14vw,200px) clamp(20px,7vw,118px);background:var(--m27-white);overflow:hidden}
.met27 .m27-catalogue p{max-width:650px;margin:26px 0 0;color:var(--m27-slate);font-size:1.2rem}
.met27 .m27-stats{display:grid;gap:30px}
.met27 .m27-stat{padding-bottom:24px;border-bottom:1px solid var(--m27-line)}
.met27 .m27-stat strong{display:block;color:var(--m27-blue);font-size:clamp(3rem,6vw,7rem);line-height:.9;letter-spacing:-.055em}
.met27 .m27-stat span{color:var(--m27-slate)}
.met27 .m27-boundaries{display:grid;grid-template-columns:1fr 1fr;background:var(--m27-paper)}
.met27 .m27-boundary{padding:clamp(80px,10vw,150px) clamp(20px,7vw,110px)}
.met27 .m27-boundary:first-child{background:#e8f3ff}
.met27 .m27-boundary h2{margin:8px 0 35px;font-size:clamp(2.5rem,5vw,6rem);line-height:.9;letter-spacing:-.055em}
.met27 .m27-boundary ul{list-style:none;margin:0;padding:0}
.met27 .m27-boundary li{position:relative;padding:18px 0 18px 34px;border-top:1px solid rgba(15,23,42,.12);font-size:1.05rem}
.met27 .m27-boundary li strong{color:var(--m27-ink);font-weight:900}
.met27 .m27-boundary li::before{position:absolute;left:0;color:var(--m27-blue);font-weight:900}
.met27 .m27-boundary.yes li::before{content:"✓"}.met27 .m27-boundary.no li::before{content:"—"}
.met27 .m27-closing{position:relative;min-height:86vh;display:grid;place-items:center;padding:100px 20px;background:var(--m27-blue);color:var(--m27-white);text-align:center;overflow:hidden}
.met27 .m27-closing::before,.met27 .m27-closing::after{content:"";position:absolute;width:42vw;height:42vw;border:1px solid rgba(255,255,255,.22);border-radius:50%;transform:translate(-38vw,-20vw)}
.met27 .m27-closing::after{transform:translate(42vw,24vw)}
.met27 .m27-closing-inner{position:relative;z-index:2;max-width:1050px}
.met27 .m27-closing h2{max-width:1000px;color:var(--m27-white)}
.met27 .m27-closing p{max-width:680px;margin:28px auto;color:#dcecff;font-size:1.15rem}
.met27 .m27-closing .m27-button{margin-top:14px}
.met27.js [data-m27-reveal]{opacity:0;transform:translateY(38px);transition:opacity .8s var(--m27-ease),transform .8s var(--m27-ease)}
.met27.js [data-m27-reveal].is-visible{opacity:1;transform:none}

@media (hover:hover) and (pointer:fine){
  .met27 .m27-story-nav a:hover{color:var(--m27-blue)}
}
@media (max-width:1100px) and (min-width:981px){
  .met27 .m27-hero{grid-template-columns:minmax(0,1fr) minmax(300px,.8fr)}
  .met27 .m27-hero h1{font-size:clamp(4rem,7vw,5.4rem)}
}
@media (max-width:980px){
  .met27 .m27-hero{grid-template-columns:1fr;padding-top:150px}
  .met27 .m27-hero h1{font-size:clamp(4rem,12vw,7rem)}
  .met27 .m27-hero-visual{min-height:470px}
  .met27 .m27-life-wheel{width:min(72vw,460px)}
  .met27 .m27-promise,.met27 .m27-catalogue{grid-template-columns:1fr}
  .met27 .m27-promise-copy{align-self:auto}
  .met27 .m27-story-shell{grid-template-columns:1fr}
  .met27 .m27-story-nav{top:0;height:auto;padding:10px 18px;flex-direction:row;justify-content:flex-start;gap:8px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;background:rgba(248,250,252,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--m27-line);scrollbar-width:thin}
  .met27 .m27-story-nav a{flex:0 0 auto;grid-template-columns:9px auto;gap:8px;padding:7px 10px;border:1px solid transparent;border-radius:999px;white-space:nowrap;scroll-snap-align:start}
  .met27 .m27-story-nav a.active{border-color:#bfdbfe;background:#e8f3ff;transform:none}
  .met27 .m27-story{grid-template-columns:1fr;min-height:auto;padding:100px max(20px,6vw) 120px;scroll-margin-top:68px}
  .met27 .m27-scene{min-height:430px}
  .met27 .m27-mini-wheel{width:min(70vw,420px)}
  .met27 .m27-boundaries{grid-template-columns:1fr}
}
@media (max-width:620px){
  .met27 .m27-hero{padding:135px 20px 70px}
  .met27 .m27-hero h1{font-size:clamp(3.2rem,17vw,5.2rem);line-height:.84}
  .met27 .m27-title-outline{margin-top:.16em}
  .met27 .m27-hero-visual{min-height:390px}
  .met27 .m27-orbit-label{font-size:.72rem;padding:7px 10px}
  .met27 .m27-scroll-cue{display:none}
  .met27 .m27-promise,.met27 .m27-story-intro,.met27 .m27-catalogue{padding-left:20px;padding-right:20px}
  .met27 .m27-story-intro{padding-top:74px;padding-bottom:42px}
  .met27 .m27-promise h2,.met27 .m27-catalogue h2{font-size:clamp(2.8rem,14vw,4.6rem)}
  .met27 .m27-story-intro h2{font-size:clamp(2.7rem,12.5vw,3.8rem);line-height:.94}
  .met27 .m27-story-intro p{font-size:1rem;line-height:1.55}
  .met27 .m27-story-nav{padding:8px 14px;gap:6px}
  .met27 .m27-story-nav a{padding:8px 10px;font-size:13px}
  .met27 .m27-story{padding-left:20px;padding-right:20px}
  .met27 .m27-story-copy h3{font-size:clamp(3.2rem,17vw,5rem)}
  .met27 .m27-scene{min-height:360px}
  .met27 .m27-scale-note{position:static;max-width:280px;margin:24px auto 0;text-align:center}
  .met27 .m27-thought-field{width:100%;grid-template-columns:1fr;gap:10px}
  .met27 .m27-thought{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-width:0;min-height:138px;padding:18px 16px;border-radius:24px}
  .met27 .m27-thought:nth-child(5){grid-column:auto;max-width:none}
  .met27 .m27-thought-icon{width:44px;height:44px}
  .met27 .m27-thought-icon .hp-catalog-icon{width:28px;height:28px}
  .met27 .m27-catalogue-free{grid-column:auto}
  .met27 .m27-choice.selected{transform:translateX(-8px)}
  .met27 .m27-path-scene{grid-template-columns:1fr;gap:12px}
  .met27 .m27-path-node{min-height:100px;border-radius:999px}
  .met27 .m27-path-arrow{width:1px;height:34px;justify-self:center}
  .met27 .m27-path-arrow::after{right:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .met27 .m27-review-scene{gap:12px}
  .met27 .m27-manifesto{padding-left:20px;padding-right:20px}
  .met27 .m27-manifesto p{font-size:clamp(2.4rem,13vw,4.2rem)}
  .met27 .m27-boundary{padding-left:20px;padding-right:20px}
  .met27 .m27-closing h2{font-size:clamp(3rem,16vw,5rem)}
}
@media (max-width:360px){
  .met27 .m27-hero h1{font-size:clamp(2.9rem,16.3vw,3.7rem);letter-spacing:-.065em}
  .met27 .m27-orbit-label{font-size:.67rem}
  .met27 .m27-story-link-copy{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .met27.js [data-m27-reveal]{opacity:1;transform:none;transition:none}
  .met27 .m27-button,.met27 .m27-story-nav a{transition:none}
}