/*
 * IKI.CODE LAB · Método V3.7.3
 * Composición editorial alineada con la portada oficial.
 */

body.method-page{
  --method-ink:var(--site-ink,#171717);
  --method-muted:var(--site-muted,#5d5a54);
  --method-red:var(--site-red,#e65a1f);
  --method-paper:var(--site-paper,#f1f0ec);
  --method-surface:rgba(255,255,255,.30);
  --method-surface-strong:rgba(248,247,243,.82);
  --method-line:var(--site-line,#d5d1c9);
}

/* Cabecera horizontal configurable con el regreso superpuesto. */
body.method-page .method-header-banner{
  position:relative!important;
  width:100%!important;
  height:clamp(96px,10vw,126px)!important;
  margin:0 0 18px!important;
  overflow:hidden!important;
  border:1px solid var(--method-line)!important;
  border-radius:0 0 22px 22px!important;
  background:linear-gradient(110deg,rgba(230,90,31,.12),rgba(248,247,243,.92))!important;
  box-shadow:0 12px 28px rgba(23,23,23,.045)!important;
}
body.method-page .method-header-banner img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}
body.method-page .method-header-back-row{
  position:absolute!important;
  inset:0!important;
  z-index:3!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  width:100%!important;
  margin:0!important;
  padding:14px 18px!important;
  pointer-events:none!important;
}
body.method-page .method-header-back-row .public-back-button{
  pointer-events:auto!important;
  background:var(--method-red)!important;
  border-color:var(--method-red)!important;
  box-shadow:0 10px 24px rgba(230,90,31,.22)!important;
}

body.method-page .method-main{
  padding-top:30px!important;
}

/* Apertura: conserva la escala exacta de Inicio y reduce el aire residual. */
body.method-page .method-detail-hero{
  min-height:500px!important;
  grid-template-columns:minmax(0,1.08fr) minmax(300px,.92fr)!important;
  gap:clamp(42px,5vw,66px)!important;
  padding:22px 0 64px!important;
  border-bottom:0!important;
}
body.method-page .method-detail-intro{max-width:650px!important;}
body.method-page .method-detail-intro h1{
  max-width:620px!important;
  margin:12px 0 22px!important;
  font-family:var(--site-font-heading)!important;
  font-size:var(--site-title-display)!important;
  font-weight:500!important;
  line-height:.98!important;
  letter-spacing:-.045em!important;
}
body.method-page .method-detail-lead{
  max-width:590px!important;
  color:var(--method-muted)!important;
  font-family:var(--site-font-body)!important;
  font-size:var(--iki-type-lead)!important;
  line-height:var(--iki-leading-lead)!important;
}
body.method-page .method-detail-orbit{
  width:min(100%,360px)!important;
  justify-self:end!important;
}
body.method-page .method-detail-orbit svg{stroke-width:.8!important;}
body.method-page .method-detail-orbit span{
  padding:7px 10px!important;
  background:var(--method-paper)!important;
  font-family:var(--site-font-ui)!important;
  font-size:var(--iki-type-label)!important;
  line-height:1!important;
}

/* Los botones replican el componente de la portada: 48 px y Space Mono. */
body.method-page .method-detail-actions{
  gap:10px!important;
  margin-top:28px!important;
}
body.method-page .method-detail-actions .btn{
  width:auto!important;
  min-width:0!important;
  min-height:48px!important;
  height:48px!important;
  padding:0 24px!important;
  gap:22px!important;
  border-radius:999px!important;
  font-family:var(--iki-font-body)!important;
  font-size:var(--iki-type-button)!important;
  font-weight:600!important;
  line-height:1!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  white-space:nowrap!important;
}

/* Explorador: una unidad cerrada; todas las fases comparten la misma altura. */
body.method-page .method-explorer{
  width:100%!important;
  margin:0 0 32px!important;
  border:1px solid var(--method-line)!important;
  border-radius:28px!important;
  background:var(--method-surface-strong)!important;
  box-shadow:0 16px 38px rgba(23,23,23,.045)!important;
  overflow:visible!important;
}
body.method-page .method-explorer .method-phase-nav{
  top:84px!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  overflow:hidden!important;
  border-bottom:1px solid var(--method-line)!important;
  border-radius:28px 28px 0 0!important;
  background:rgba(241,240,236,.94)!important;
  box-shadow:0 10px 26px rgba(23,23,23,.035)!important;
}
body.method-page .method-explorer .method-phase-nav a{
  min-height:70px!important;
  padding:14px 20px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-content:center!important;
  gap:3px 11px!important;
  border-right:1px solid var(--method-line)!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--method-ink)!important;
  box-shadow:none!important;
  font-family:var(--site-font-body)!important;
  text-align:left!important;
}
body.method-page .method-explorer .method-phase-nav a:last-child{border-right:0!important;}
body.method-page .method-explorer .method-phase-nav a.active{
  background:#171717!important;
  color:#fff!important;
  box-shadow:none!important;
}
body.method-page .method-explorer .method-phase-nav a:hover,
body.method-page .method-explorer .method-phase-nav a:focus-visible{
  background:#171717!important;
  color:#fff!important;
}
body.method-page .method-explorer .method-phase-nav span{
  color:var(--method-red)!important;
  font-family:var(--site-font-ui)!important;
  font-size:var(--iki-type-label)!important;
}
body.method-page .method-explorer .method-phase-nav strong{
  color:inherit!important;
  font-family:var(--site-font-body)!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1.1!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
body.method-page .method-explorer .method-phase-nav small{
  color:inherit!important;
  font-family:var(--site-font-body)!important;
  font-size:var(--iki-type-small)!important;
  line-height:1.2!important;
  opacity:.62!important;
}
body.method-page .method-explorer .method-phases{
  padding:0 42px!important;
}
body.method-page .method-explorer .method-phase{
  width:100%!important;
  height:560px!important;
  min-height:560px!important;
  padding:24px 0!important;
  grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr)!important;
  align-items:center!important;
  gap:38px!important;
}
body.method-page .method-explorer .method-phase-visual{
  width:min(100%,310px)!important;
  aspect-ratio:4/5!important;
  min-height:0!important;
  border-radius:36px 36px 24px 24px!important;
  border-color:var(--method-line)!important;
  background:rgba(255,255,255,.26)!important;
}
body.method-page .method-explorer .method-phase-visual::after{
  background:linear-gradient(180deg,rgba(241,240,236,.02),rgba(241,240,236,.14))!important;
}
body.method-page .method-explorer .method-phase-visual svg{
  width:54%!important;
  max-width:190px!important;
  stroke-width:1.15!important;
}
body.method-page .method-explorer .method-phase-number{
  top:22px!important;
  left:24px!important;
  font-family:var(--site-font-ui)!important;
  font-size:var(--iki-type-small)!important;
}
body.method-page .method-phase-copy h2,
body.method-page .method-delivery h2,
body.method-page .method-final-cta h2{
  max-width:720px!important;
  margin:8px 0 18px!important;
  font-family:var(--site-font-heading)!important;
  font-size:var(--site-title-section)!important;
  font-weight:500!important;
  line-height:var(--iki-leading-section)!important;
  letter-spacing:var(--iki-tracking-section)!important;
}
body.method-page .method-phase-lead{
  max-width:700px!important;
  color:var(--method-muted)!important;
  font-family:var(--site-font-body)!important;
  font-size:var(--iki-type-body)!important;
  line-height:var(--iki-leading-body)!important;
}
body.method-page .method-phase-columns,
body.method-page .method-ikigai-grid{
  gap:10px!important;
  margin-top:24px!important;
}
body.method-page .method-phase-columns>div,
body.method-page .method-ikigai-grid>div{
  padding:17px 18px!important;
  border-color:var(--method-line)!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.25)!important;
}
body.method-page .method-phase-columns h3,
body.method-page .method-ikigai-grid strong,
body.method-page .method-action-list strong{
  margin:0 0 7px!important;
  font-family:var(--site-font-heading)!important;
  font-size:var(--iki-type-card)!important;
  font-weight:500!important;
  line-height:var(--iki-leading-card)!important;
  letter-spacing:var(--iki-tracking-card)!important;
}
body.method-page .method-phase-columns p,
body.method-page .method-ikigai-grid p,
body.method-page .method-action-list p{
  color:var(--method-muted)!important;
  font-family:var(--site-font-body)!important;
  font-size:var(--iki-type-body)!important;
  line-height:var(--iki-leading-body)!important;
}
body.method-page .method-ikigai-grid span{margin-bottom:10px!important;}
body.method-page .method-action-list{margin-top:24px!important;}
body.method-page .method-action-list li{
  grid-template-columns:40px 1fr!important;
  gap:12px!important;
  padding:15px 0!important;
}
body.method-page .method-result{
  grid-template-columns:90px 1fr!important;
  gap:14px!important;
  margin-top:14px!important;
  padding-top:17px!important;
}
body.method-page .method-result span{
  font-family:var(--site-font-ui)!important;
  font-size:var(--iki-type-label)!important;
}
body.method-page .method-result p{
  font-family:var(--site-font-body)!important;
  font-size:var(--iki-type-body)!important;
  line-height:var(--iki-leading-body)!important;
}

/* Cuatro conceptos interactivos: frente visual y explicación al seleccionar. */
body.method-page .method-delivery{
  padding:64px 0!important;
  border-bottom:0!important;
}
body.method-page .method-delivery>div:first-child{max-width:720px!important;}
body.method-page .method-delivery-lead{
  max-width:600px!important;
  margin:0!important;
  color:var(--method-muted)!important;
  font-size:var(--iki-type-body)!important;
  line-height:var(--iki-leading-body)!important;
}
body.method-page .method-delivery-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:28px!important;
}
body.method-page .method-delivery-card{
  position:relative!important;
  min-width:0!important;
  height:220px!important;
  padding:0!important;
  border:0!important;
  border-radius:24px!important;
  background:transparent!important;
  color:var(--method-ink)!important;
  font:inherit!important;
  text-align:left!important;
  cursor:pointer!important;
  perspective:1000px!important;
}
body.method-page .method-delivery-card-inner{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  display:block!important;
  transform-style:preserve-3d!important;
  transition:transform .5s cubic-bezier(.22,.7,.24,1)!important;
}
body.method-page .method-delivery-card.is-flipped .method-delivery-card-inner{transform:rotateY(180deg)!important;}
body.method-page .method-delivery-card-face{
  position:absolute!important;
  inset:0!important;
  padding:20px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  border:1px solid var(--method-line)!important;
  border-radius:24px!important;
  background:var(--method-surface)!important;
  box-shadow:0 12px 28px rgba(23,23,23,.035)!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
body.method-page .method-delivery-card-back{
  justify-content:space-between!important;
  background:#171717!important;
  color:#fff!important;
  transform:rotateY(180deg)!important;
}
body.method-page .method-delivery-card:hover .method-delivery-card-front,
body.method-page .method-delivery-card:focus-visible .method-delivery-card-front{
  border-color:var(--method-red)!important;
  transform:translateY(-2px)!important;
}
body.method-page .method-delivery-index{
  color:var(--method-red)!important;
  font-family:var(--site-font-ui)!important;
  font-size:var(--iki-type-label)!important;
  line-height:1!important;
  letter-spacing:.12em!important;
}
body.method-page .method-delivery-card svg{
  width:62px!important;
  height:62px!important;
  margin:auto!important;
  stroke:var(--method-red)!important;
  stroke-width:1.15!important;
}
body.method-page .method-delivery-card svg .solid{fill:var(--method-red)!important;stroke:none!important;}
body.method-page .method-delivery-card strong{
  color:inherit!important;
  font-family:var(--site-font-heading)!important;
  font-size:var(--iki-type-card)!important;
  font-weight:500!important;
  line-height:var(--iki-leading-card)!important;
  letter-spacing:var(--iki-tracking-card)!important;
}
body.method-page .method-delivery-card small{
  margin-top:8px!important;
  color:var(--method-red)!important;
  font-family:var(--site-font-ui)!important;
  font-size:var(--iki-type-small)!important;
  line-height:1!important;
  letter-spacing:.11em!important;
  text-transform:uppercase!important;
}
body.method-page .method-delivery-description{
  color:rgba(255,255,255,.78)!important;
  font-family:var(--site-font-body)!important;
  font-size:var(--iki-type-body)!important;
  line-height:var(--iki-leading-body)!important;
}

/* Cierre compacto en una tarjeta que continúa el lenguaje de Inicio. */
body.method-page .method-final-cta{
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:32px!important;
  margin:0 0 0!important;
  padding:38px 40px!important;
  border:1px solid var(--method-line)!important;
  border-radius:28px!important;
  background:var(--method-surface)!important;
  box-shadow:0 14px 34px rgba(23,23,23,.04)!important;
}
body.method-page .method-final-cta p:last-child{
  color:var(--method-muted)!important;
  font-size:var(--iki-type-body)!important;
  line-height:var(--iki-leading-body)!important;
}
body.method-page .method-final-cta .method-detail-actions{
  justify-content:flex-end!important;
  margin-top:0!important;
}

@media (max-width:1024px){
  body.method-page .method-detail-hero{
    grid-template-columns:1fr!important;
    min-height:0!important;
    padding-top:26px!important;
  }
  body.method-page .method-detail-orbit{
    width:min(100%,340px)!important;
    justify-self:center!important;
  }
  body.method-page .method-explorer .method-phase{
    height:auto!important;
    min-height:0!important;
    grid-template-columns:1fr!important;
    gap:24px!important;
    padding:28px 0 32px!important;
  }
  body.method-page .method-explorer .method-phase-visual{width:min(100%,340px)!important;}
  body.method-page .method-delivery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  body.method-page .method-final-cta{
    grid-template-columns:1fr!important;
    align-items:start!important;
  }
  body.method-page .method-final-cta .method-detail-actions{justify-content:flex-start!important;}
}

@media (max-width:767px){
  body.method-page .method-header-banner{
    height:86px!important;
    margin-bottom:12px!important;
    border-radius:0 0 18px 18px!important;
  }
  body.method-page .method-header-back-row{padding:12px 14px!important;}
  body.method-page .method-main{padding-top:24px!important;}
  body.method-page .method-detail-hero{
    gap:30px!important;
    padding:16px 0 46px!important;
  }
  body.method-page .method-detail-orbit{width:min(100%,300px)!important;}
  body.method-page .method-detail-actions{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  body.method-page .method-detail-actions .btn{width:100%!important;}
  body.method-page .method-explorer{border-radius:22px!important;}
  body.method-page .method-explorer .method-phase-nav{
    top:64px!important;
    border-radius:22px 22px 0 0!important;
  }
  body.method-page .method-explorer .method-phase-nav a{
    min-height:66px!important;
    padding:10px!important;
    grid-template-columns:1fr!important;
    gap:4px!important;
  }
  body.method-page .method-explorer .method-phase-nav span{grid-row:auto!important;}
  body.method-page .method-explorer .method-phase-nav strong{font-size:12px!important;}
  body.method-page .method-explorer .method-phase-nav small{font-size:var(--iki-type-small)!important;}
  body.method-page .method-explorer .method-phases{padding:0 20px!important;}
  body.method-page .method-explorer .method-phase{padding:22px 0 26px!important;}
  body.method-page .method-explorer .method-phase-visual{
    width:min(100%,300px)!important;
    border-radius:28px 28px 20px 20px!important;
  }
  body.method-page .method-phase-columns,
  body.method-page .method-ikigai-grid{grid-template-columns:1fr!important;}
  body.method-page .method-result{grid-template-columns:1fr!important;gap:7px!important;}
  body.method-page .method-delivery{padding:52px 0!important;}
  body.method-page .method-delivery-grid{grid-template-columns:1fr!important;}
  body.method-page .method-delivery-card{height:205px!important;}
  body.method-page .method-final-cta{
    padding:26px 24px!important;
    border-radius:22px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  body.method-page .method-delivery-card-inner{transition:none!important;}
}