/* ==========================================================================
   EROS FITNESS — MÉTODO (metodo.html)
   Entrada clara con la foto de Eros + 4 pilares → proceso I–IV (oscuro) →
   calculadora (clara, con tarjetas oscuras) → CTA.
   Mobile-first: los @media (min-width) agregan tablet y escritorio.
   ========================================================================== */

/* ---------- Entrada (portada con Eros: ver .portada y .retrato en base.css) ---------- */
.metodo-hero { overflow: hidden; }

/* ---------- 4 pilares ---------- */
.pilares { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: clamp(36px, 5vw, 64px); }
.pilar { position: relative; padding: 18px 16px 20px; border-radius: 18px; background: rgba(255, 252, 245, .7); border: 1px solid var(--line-claro); box-shadow: 0 20px 40px -30px rgba(60, 45, 20, .5); }
.pilar__icono { width: 38px; height: 38px; color: var(--gold-ink); margin-bottom: 14px; }
.pilar__num { position: absolute; right: 14px; top: 14px; font: italic 500 1.05rem/1 var(--f-serif); color: var(--gold-ink); }
.pilar h2 { font: 400 1.3rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 8px; color: var(--t-oscuro); }
.pilar p { font-size: .88rem; line-height: 1.5; color: var(--t-medio); }
@media (min-width: 1024px) {
  .pilares { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .pilar { padding: 26px 24px 28px; }
  .pilar h2 { font-size: 1.5rem; }
}

/* ---------- Proceso I–IV (oscuro) ---------- */
.proceso-sec { overflow: hidden; background: radial-gradient(60% 50% at 90% 0%, rgba(233, 169, 58, .1), transparent 70%), var(--ink-2); }
.proceso-sec .contenedor { position: relative; z-index: 1; }
.proceso { position: relative; display: grid; gap: 28px; padding-left: 62px; }
.proceso__linea { position: absolute; left: 22px; top: 8px; bottom: 8px; width: 16px; }
.proceso__linea span { position: absolute; left: 7px; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.proceso__linea span::after { content: ''; position: absolute; inset: 0; background: var(--gold); transform-origin: 50% 0; transform: scaleY(var(--p, 1)); }
.proceso__linea svg { position: absolute; left: -24px; top: calc(var(--p, 1) * 100% - 40px); width: 64px; height: 16px; color: var(--gold-hi); transform: rotate(90deg); }
.paso { position: relative; }
.paso__num { position: absolute; left: -62px; top: -6px; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--ink-2); border: 1px solid var(--gold); font: italic 500 1.15rem/1 var(--f-serif); color: var(--gold-hi); }
.paso h3 { font: 400 1.55rem/1 var(--f-display); text-transform: uppercase; margin-bottom: 8px; }
.paso p { color: var(--text-2); font-size: .95rem; max-width: 26em; }
@media (min-width: 1024px) {
  .proceso { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; padding: 76px 0 0; }
  .proceso__linea { left: 0; right: 0; top: 22px; bottom: auto; width: auto; height: 16px; }
  .proceso__linea span { left: 0; right: 0; top: 7.5px; bottom: auto; width: auto; height: 1px; }
  .proceso__linea span::after { transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
  .proceso__linea svg { top: 0; left: calc(var(--p, 1) * 100% - 62px); transform: none; }
  .paso__num { left: 0; top: -76px; }
}

/* ---------- Calculadora (sección clara, tarjetas oscuras) ---------- */
.calculadora { overflow: hidden; }
.calc { display: grid; gap: 14px; }
.calc__form { padding: clamp(20px, 3vw, 34px); display: grid; gap: 22px; }
.calc__tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.calc__tres .campo__caja { padding-inline: 12px; }
.seg--tres span { font-size: .84rem; }
.campo--rango > span:first-child { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
.calc__actividad { font: 600 .8rem/1.3 var(--f-ui); letter-spacing: 0; text-transform: none; color: var(--gold-hi); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--r, 50%), rgba(239, 232, 220, .14) var(--r, 50%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(239, 232, 220, .14); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold-hi); box-shadow: 0 0 0 6px rgba(233, 169, 58, .15); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); border: 2px solid var(--gold-hi); }
input[type=range]:focus-visible { outline: none; }
input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(246, 199, 104, .45); }
.rango__marcas { display: flex; justify-content: space-between; gap: 4px; font-size: .62rem; color: var(--muted); margin-top: -4px; }
.rango__marcas i { font-style: normal; }
.calc__aviso { font-size: .8rem; color: var(--muted); border-top: 1px solid var(--line-soft); padding-top: 14px; }
.calc__resultado { padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; overflow: hidden; }
.calc__rotulo { font: 700 .68rem/1.3 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.calc__kcal { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; font: 400 clamp(3.8rem, 3rem + 4vw, 6.2rem)/.85 var(--f-display); }
.calc__kcal span { background: var(--oro-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
.calc__kcal small { font: 600 .8rem/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.calc__base { font-size: .88rem; }
.anillos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-block: 4px; }
.anillo { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.anillo svg { width: 100%; max-width: 110px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 7; }
.anillo__fondo { stroke: rgba(239, 232, 220, .1); }
.anillo__valor { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, 0)); transition: stroke-dashoffset 1.3s var(--ease); }
.anillo[data-macro=p] .anillo__valor { stroke: var(--gold-hi); }
.anillo[data-macro=g] .anillo__valor { stroke: var(--gold-deep); }
.anillo[data-macro=c] .anillo__valor { stroke: var(--marble); }
.anillo p { display: grid; gap: 3px; }
.anillo strong { font: 400 1.45rem/1 var(--f-display); }
.anillo span { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.anillo em { font-style: normal; font-size: .7rem; color: var(--text-2); }
@media (min-width: 1024px) {
  .calc { grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: start; }
  .calc__resultado { position: sticky; top: 96px; }
}

/* ¿Cómo lo calculo? */
.formula { margin-top: 18px; border-radius: 18px; border: 1px solid var(--line-claro); background: rgba(255, 252, 245, .6); }
.formula summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 12px 20px; cursor: pointer; list-style: none; font-weight: 700; color: var(--t-oscuro); }
.formula summary::-webkit-details-marker { display: none; }
.formula summary svg { width: 22px; height: 22px; flex: none; color: var(--gold-ink); transition: transform .5s var(--ease); }
.formula[open] summary svg { transform: rotate(135deg); }
.formula__cuerpo { display: grid; gap: 10px; padding: 0 20px 20px; font-size: .92rem; }
.formula__cuerpo ul { display: grid; gap: 6px; padding-left: 4px; }
.formula__cuerpo li { position: relative; padding-left: 18px; color: var(--t-medio); font-variant-numeric: tabular-nums; }
.formula__cuerpo li::before { content: ''; position: absolute; left: 0; top: .72em; width: 10px; height: 1px; background: var(--gold-ink); }