/* ============================================
   CORE · Página MÉTODO (metodo.html)
   Usa las variables de styles.css
   ============================================ */

.m-grad{
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-center{ text-align: center; }
.m-h2{
  font-size: clamp(30px, 3.4vw, 46px);
  margin-bottom: 40px;
}
.m-lead{
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  max-width: 52ch;
}
.m-center .m-lead{ margin: 0 auto 36px; }
.m-btn-dark{ color: var(--text-dark); }
.m-btn-dark:hover{ background: rgba(198,35,104,.06); }

/* ---------- 1. HERO ----------
   La estructura (alto, márgenes, degradado, tipografía) viene de .page-hero en styles.css.
   Aquí solo va lo propio de esta página. */
.m-hero{ --hero-img: url('assets/metodo/hero-metodo.webp?v=2'); }
.m-hero h1{ font-size: clamp(34px, 4vw, 54px); }   /* frase larga: un punto más pequeña que el resto */
.m-hero h1 .m-grad{ font-weight: 500; }


/* ---------- 2. ¿TE SUENA? ---------- */
.m-suena{
  background: var(--bg-dark);
  color: var(--text-cream);
  padding: 0 0 96px;
}
.m-suena .eyebrow{ color: var(--text-muted-light); }
.m-suena .eyebrow::after{ width: 60px; }
.m-suena-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0;
}
.m-suena-card{
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(242,118,46,.28), transparent 60%),
    radial-gradient(ellipse at 20% 90%, rgba(198,35,104,.30), transparent 60%),
    var(--bg-dark-2);
}
.m-suena-card img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% center;
  opacity: .85;
}
.m-suena-card figcaption{
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 40px;
  font-size: clamp(18px, 1.5vw, 24px);
  line-height: 1.35;
  font-weight: 300;
  background: linear-gradient(0deg, rgba(16,13,15,.9) 0%, rgba(16,13,15,.2) 60%, transparent 100%);
}
.m-suena-card figcaption::after{
  content: "";
  display: block;
  width: 40px; height: 2px;
  margin-top: 16px;
  background: var(--gradient);
}
.m-suena-strip{
  list-style: none;
  margin: 0; padding: 56px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.m-suena-strip li{
  padding: 18px 22px;
  border-left: 2px solid var(--magenta);
  color: var(--text-muted-light);
  font-size: 16px;
  line-height: 1.5;
}
.m-key{
  margin-top: 80px;
  text-align: center;
  font-size: clamp(28px, 3.2vw, 46px);
  font-weight: 200;
  line-height: 1.25;
}
.m-key .m-grad{ font-weight: 500; }

/* ---------- 3. CUATRO PLANOS ---------- */
.m-planos{ padding: 110px 0; }
.m-planos-inner{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 72px;
  align-items: center;
}
.m-planos-diagram{ margin: 0; text-align: center; }
.m-planos-diagram img{ width: 100%; max-width: 680px; margin: 0 auto; }
.m-planos-diagram figcaption{
   max-width: 680px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
}
.m-planos-diagram figcaption strong{
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .08em;
    color: var(--text-muted-dark);
}
.m-planos-text .eyebrow{ font-size: 15px; }
.m-planos-text h2{
  font-size: clamp(32px, 3.6vw, 50px);
  margin-bottom: 20px;
}
.m-planos-text .m-lead{ margin-bottom: 32px; }

.m-acc details{
  border-top: 1px solid #e4dccf;
  padding: 0 4px;
}
.m-acc details:last-child{ border-bottom: 1px solid #e4dccf; }
.m-acc details[open]{ background: rgba(242,118,46,.05); }
.m-acc summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 44px 16px 6px;
  position: relative;
}
.m-acc-txt{ display: flex; flex-direction: column; gap: 2px; }
.m-acc-ico{
  flex: none;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.m-acc-ico svg{
  width: 30px; height: 30px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s ease;
}
.m-ico-emocional svg, .m-ico-energetico svg{ stroke: var(--magenta); }
.m-acc details[open] .m-acc-ico svg{ transform: scale(1.12); }

.m-acc summary::-webkit-details-marker{ display: none; }
.m-acc summary::after{
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--text-muted-dark);
}
.m-acc details[open] summary::after{ content: "–"; color: var(--orange); }
.m-acc-name{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.m-acc-tag{ font-size: 14px; color: var(--text-muted-dark); }
.m-acc details p{
  padding: 0 44px 22px 68px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted-dark);
}
.m-acc details p strong{ font-weight: 600; color: var(--text-dark); }

/* ---------- 4. EL RECORRIDO ---------- */
.m-recorrido{
  padding: 110px 0;
  background: #efe8dd;
}
.m-tag{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 6px;
}
.m-ruta{ margin: 0; }

/* Cabecera de cada bloque */
.m-banner{
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 170px;
  padding: 30px 40px;
  background: var(--bg-dark);
  color: var(--text-cream);
  overflow: hidden;
}
.m-banner img{
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60%; height: 100%;
  object-fit: cover;
  object-position: right 35%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%);
  mask-image: linear-gradient(to right, transparent 0%, #000 55%);
}
.m-banner > :not(img){ position: relative; z-index: 1; }
.m-nivel-num{
  flex: none;
  font-size: clamp(64px, 6vw, 96px);
  font-weight: 600;
  line-height: 1;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-banner h3{
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 200;
  max-width: 24ch;
}
.m-nivel-2 .m-tag{ color: #e0558f; }

/* Módulos de cada bloque */
.m-cajas{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.m-cajas-1{ grid-template-columns: 1fr; }
.m-cajas-3{ grid-template-columns: repeat(3, 1fr); }
.m-cajas-5{ grid-template-columns: repeat(5, 1fr); }
.m-caja{
  display: block;
  padding: 26px 24px 24px;
  background: var(--bg-cream);
  border-top: 2px solid var(--orange);
  transition: transform .2s ease, box-shadow .2s ease;
}
.m-nivel-2 .m-caja{ border-top-color: var(--magenta); }
a.m-caja:hover{ transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16,13,15,.08); }
a.m-caja:hover h4{ color: var(--orange); }
.m-cajas-1 .m-caja{
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  column-gap: 18px;
}
.m-cajas-1 .m-caja .m-num{ grid-row: span 2; }
.m-cajas-1 .m-caja .m-books{ grid-column: 3; grid-row: 1 / span 2; justify-self: end; margin: 0; }
.m-caja h4{
  margin: 14px 0 0;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.25;
  transition: color .18s ease;
}
.m-cajas-1 .m-caja h4{ margin: 0; }
.m-caja .m-q{ font-size: 14.5px; color: var(--text-muted-dark); margin-top: 6px; }
.m-nivel-2 .m-caja .m-q{ font-style: italic; }
.m-caja-soon{ opacity: .55; }
.m-num{
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--orange);
  border: 1px solid var(--orange);
}
.m-nivel-2 .m-num{ color: var(--magenta); border-color: var(--magenta); }
.m-books{
  list-style: none;
  margin: 14px 0 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.m-books li{
  font-size: 12.5px;
  padding: 5px 12px;
  border: 1px solid #d8cdbd;
  border-radius: 999px;
  color: var(--text-dark);
}
.m-books em{
  font-style: normal;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-left: 4px;
}

/* Línea que une los niveles */
.m-conector{
  position: relative;
  width: 2px;
  height: 64px;
  margin: 0 auto;
  background: var(--gradient);
  transform-origin: top;
}
.m-conector::after{
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 0 4px #efe8dd;
}
.m-anim .m-conector{ opacity: 1; transform: scaleY(0); transition: transform .9s ease .2s; }
.m-anim .m-conector.is-in{ transform: scaleY(1); }
.m-recorrido-foot{
  margin-top: 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted-dark);
}

/* ---------- 5. QUÉ TE LLEVAS ---------- */
.m-llevas{ padding: 110px 0; }
.m-llevas-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.m-llevas-item{
  padding: 10px 44px;
  text-align: center;
  border-left: 1px solid #e4dccf;
}
.m-llevas-item:first-child{ border-left: none; }
.m-llevas-item .approach-icon{
  width: 64px; height: 64px;
  margin: 0 auto 20px;
}
.m-llevas-item .approach-icon svg{ width: 26px; height: 26px; }
.m-llevas-item h3{ font-size: 24px; margin-bottom: 10px; }
.m-llevas-item p{
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted-dark);
  max-width: 30ch;
  margin: 0 auto;
}

/* ---------- 6. DOS PUERTAS ---------- */
.m-puertas{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--bg-dark);
}
.m-puerta{
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--text-cream);
  background:
    radial-gradient(ellipse at 80% 10%, rgba(242,118,46,.22), transparent 55%),
    var(--bg-dark);
}
.m-puerta + .m-puerta{
  background:
    radial-gradient(ellipse at 20% 10%, rgba(198,35,104,.25), transparent 55%),
    var(--bg-dark);
}
.m-puerta img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: right center;
  opacity: .8;
}
.m-puerta-body{
  position: relative;
  padding: 56px;
  max-width: 600px;
}
.m-puerta-body h3{ font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 16px; }
.m-puerta-body h3::after{
  content: "";
  display: block;
  width: 50px; height: 2px;
  margin-top: 16px;
  background: var(--gradient);
}
.m-puerta-body p{
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted-light);
}
.m-note{
  margin-top: 16px;
  font-size: 12px !important;
  letter-spacing: .04em;
  opacity: .7;
}

/* ---------- 7. CIERRE ---------- */
.m-cta{ padding: 120px 0; }
.m-cta .eyebrow{ color: var(--orange); font-weight: 500; }
.m-cta .eyebrow::after{ width: 60px; margin-left: auto; margin-right: auto; }
.m-cta .m-h2{ margin-bottom: 18px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .m-suena-card figcaption{ padding: 26px 24px; }
  .m-planos, .m-recorrido, .m-llevas, .m-cta{ padding: 72px 0; }
  .m-suena{ padding: 0 0 72px; }
  .m-banner{ padding: 24px 22px; gap: 18px; min-height: 150px; }
  .m-banner img{ width: 100%; opacity: .45; -webkit-mask-image: none; mask-image: none; }
  .m-cajas-3, .m-cajas-5{ grid-template-columns: 1fr; }
  .m-cajas-1 .m-caja{ display: block; }
  .m-cajas-1 .m-caja h4{ margin-top: 14px; }
  .m-cajas-1 .m-caja .m-books{ margin-top: 14px; }
  .m-nivel-2 .m-caja{ display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; padding: 16px 18px; }
  .m-nivel-2 .m-caja .m-num{ grid-row: span 2; }
  .m-nivel-2 .m-caja h4{ margin: 0; font-size: 17px; }
  .m-nivel-2 .m-caja .m-q{ margin-top: 2px; }
  .m-conector{ height: 48px; }
  .m-suena-grid, .m-suena-strip, .m-planos-inner, .m-llevas-grid, .m-puertas{
    grid-template-columns: 1fr;
  }
  .m-planos-inner{ gap: 40px; }
  .m-llevas-item{ border-left: none; border-top: 1px solid #e4dccf; padding: 32px 10px; }
  .m-llevas-item:first-child{ border-top: none; }
  .m-puerta{ min-height: 340px; }
  .m-puerta-body{ padding: 36px 28px; }
  .m-key{ margin-top: 56px; }
  .m-key br{ display: none; }
}

/* ============================================
   ANIMACIONES (v2)
   ============================================ */

/* 1. Aparición al hacer scroll — solo si el navegador permite movimiento */
.m-anim .m-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--d, 0s);
}
.m-anim .m-reveal.is-in{ opacity: 1; transform: none; }

/* 2. Diagrama de los cuatro planos */
.m-orbit{ width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; overflow: visible; }
.o-ring{
  fill: none;
  stroke: #d8cdbd;
  stroke-width: 1.2;
  stroke-dasharray: 100;
}
.pl{ cursor: pointer; transition: transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .9s ease; transition-delay: var(--d, 0s); }
.pl circle{ opacity: .95; transition: opacity .4s ease; }
.pl-ico{ fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pl-ico circle{ fill: none; }
.pl-name{
  fill: #fff;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .12em;
  text-anchor: middle;
}
.pl-sub{
  fill: rgba(255,255,255,.88);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 300;
  text-anchor: middle;
}
.o-brain-bg{ fill: var(--bg-cream); stroke: #fff; stroke-width: 4; }
.o-brain{ fill: none; stroke: #7d756e; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.o-brain-fill{ fill: url(#g-brain); }
.o-core{ transform-box: fill-box; transform-origin: center; transition: transform .8s cubic-bezier(.3,1.5,.5,1) 1.2s, opacity .6s ease 1.2s; }
.o-pulse{ fill: none; stroke: var(--magenta); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }

/* Foco: el plano abierto en el acordeón se ilumina */
.m-orbit.has-focus .pl circle{ opacity: .35; }
.m-orbit.has-focus .pl.is-focus circle{ opacity: 1; }

/* Estado inicial (separados) y final (unidos) — solo con animación activa */
.m-anim .m-orbit .o-ring{ stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s ease; }
.m-anim .m-orbit .pl{ opacity: 0; transform: translate(var(--dx), var(--dy)); }
.m-anim .m-orbit .o-core{ opacity: 0; transform: scale(.5); }
.m-anim .m-orbit.is-in .o-ring{ stroke-dashoffset: 0; }
.m-anim .m-orbit.is-in .pl{ opacity: 1; transform: none; }
.m-anim .m-orbit.is-in .o-core{ opacity: 1; transform: none; }
.m-anim .m-orbit.is-in .o-pulse{ animation: m-pulse 3.2s ease-out 2s infinite; }
.m-anim .m-orbit.is-in .o-pulse-2{ animation-delay: 3.6s; }
@keyframes m-pulse{
  0%{ opacity: .55; transform: scale(1); }
  100%{ opacity: 0; transform: scale(2.6); }
}

/* Legibilidad del texto sobre las fotos de las puertas */
.m-puerta::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(16,13,15,.92) 0%, rgba(16,13,15,.65) 45%, rgba(16,13,15,0) 80%);
}
.m-puerta-body{ z-index: 1; }
@media (max-width: 980px){
  .m-puerta::after{ background: linear-gradient(to top, rgba(16,13,15,.95) 0%, rgba(16,13,15,.6) 55%, rgba(16,13,15,.1) 100%); }
}

/* ---------- Textos v6 ---------- */
.m-recorrido-lead{ margin: -20px 0 24px; max-width: 95ch; }
.m-ventaja{ margin: 0 0 48px; max-width: 95ch; font-size: 17px; line-height: 1.6; font-weight: 600; color: var(--text-muted-dark); }
.m-ventaja span{
  margin-right: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange);
}
.m-caja .m-d{ font-size: 14px; line-height: 1.55; color: var(--text-dark); margin-top: 10px; }
.m-sin{
  list-style: none;
  margin: 72px 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.m-sin li{
  padding: 22px 22px 24px;
  background: #efe8dd;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted-dark);
}
.m-sin li span{
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-dark);
}
.m-sin li:nth-child(odd) span{ color: var(--orange); }
.m-sin li:nth-child(even) span{ color: var(--magenta); }
@media (max-width: 980px){
  .m-sin{ grid-template-columns: 1fr 1fr; margin-top: 48px; }
  .m-recorrido-lead{ margin: -20px 0 32px; }
}
@media (max-width: 560px){
  .m-sin{ grid-template-columns: 1fr; }
}

/* Pantallas grandes (más de 1700 px): la foto ocupa el 68 % del ancho y no se recorta tanto
   y las tres tarjetas de ¿Te suena? se alinean con el ancho del contenido */
@media (min-width: 1700px){
  .m-hero{ --hero-size: 68% auto; }
  .m-suena-grid{ max-width: calc(var(--wrap) - 64px); margin: 0 auto; }
}