/**
 * Capa de páginas-herramienta SEO. Todo lo de acá lo comparten TODAS las calculadoras: el hero, la
 * tarjeta de cálculo, el resultado parcial con su bloqueo, la captura de correo, el resultado
 * completo, el contenido editorial y las herramientas relacionadas.
 *
 * Una calculadora nueva no debería necesitar CSS propio: cambia el copy, los campos del formulario,
 * la fórmula del servicio, las métricas del resultado y el contenido SEO — todo eso vive en su
 * `index.html` y su `.js`.
 *
 * Depende de `/assets/ritmo-ds.css` para tokens y primitivas (botones, cards, campos, header).
 */

/* ----------------------------------------------------------------- hero --- */

.tool-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: calc(var(--header-h) + var(--s-14));
  padding-bottom: var(--s-18);
}

/* Retícula y halo: la misma atmósfera del producto, a muy baja opacidad. Van en pseudo-elementos
   sin contenido para que no participen del layout y no puedan mover nada (CLS). */
.tool-hero::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(248, 247, 242, 0.02) 1px, transparent 1px),
    linear-gradient(rgba(248, 247, 242, 0.02) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  content: "";
}

.tool-hero::after {
  position: absolute;
  top: -180px;
  right: -160px;
  z-index: -1;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 201, 40, 0.12), transparent 68%);
  content: "";
}

.tool-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: var(--s-18);
}

.tool-hero h1 {
  margin: var(--s-6) 0 var(--s-5);
  color: var(--white);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: var(--ls-display);
  line-height: 1.04;
  text-wrap: balance;
}

.tool-hero h1 span { color: var(--yellow); }

.tool-lead {
  max-width: 46ch;
  color: var(--gray-light);
  font-size: var(--fs-body);
  line-height: 1.65;
}

.tool-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-6);
}

.tool-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-4);
  background: rgba(248, 247, 242, 0.03);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  font-weight: 700;
}

.tool-trust svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--yellow);
  stroke-width: 2.6;
}

/* Nota de método: honestidad sobre lo que el número es y lo que no es. En escritorio acompaña al
   titular; en móvil baja debajo de la calculadora, porque ahí el espacio antes de la herramienta
   es lo más caro de la página. */
.tool-method {
  display: flex;
  gap: var(--s-4);
  max-width: 52ch;
  margin-top: var(--s-8);
  border-left: 2px solid rgba(255, 201, 40, 0.6);
  padding-left: var(--s-5);
}

.tool-method strong { font-size: var(--fs-subhead); }

.tool-method p {
  margin-top: var(--s-1);
  color: var(--gray);
  font-size: var(--fs-footnote);
  line-height: 1.6;
}

/* ------------------------------------------------------ tarjeta de cálculo --- */

.tool-card {
  /* La tarjeta es el contexto de sus propios bloques: lo que decide si el CTA final va al lado del
     texto o debajo es el ancho de LA TARJETA, no el de la ventana. En escritorio la tarjeta ocupa
     poco más de la mitad del ancho, así que medir la ventana partía el titular en tres líneas. */
  container-type: inline-size;
  padding: var(--s-8);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}

.tool-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}

.tool-card-head h2 {
  margin-top: var(--s-2);
  color: var(--white);
  font-size: var(--fs-title2);
  font-weight: 800;
  letter-spacing: var(--ls-heading2);
  line-height: 1.2;
}

.step-indicator {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-3);
  color: var(--gray);
  font-size: var(--fs-caption);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-label);
}

.tool-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4);
}

.tool-form-grid .span-2 { grid-column: 1 / -1; }

.tool-submit { margin-top: var(--s-2); }

.tool-privacy {
  margin-top: var(--s-3);
  color: var(--gray);
  font-size: var(--fs-caption);
  text-align: center;
}

.btn-spinner {
  display: none;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(18, 20, 25, 0.28);
  border-top-color: var(--graphite);
  border-radius: 50%;
  animation: tool-spin 0.7s linear infinite;
}

.is-loading .btn-spinner { display: block; }
.is-loading .btn-icon { display: none; }

@keyframes tool-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------- resultado parcial --- */

/* La transición del formulario al resultado es el momento de mayor valor de la página: el número
   entra con un movimiento corto y firme, no con un efecto. */
.tool-result-enter { animation: tool-result-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes tool-result-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.result-back {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  font-weight: 700;
}
.result-back:hover { color: var(--white); }
.result-back svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }

.headline-metric { margin-bottom: var(--s-5); }

.headline-metric .section-kicker { margin-bottom: var(--s-3); }

.headline-value {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.headline-value strong {
  color: var(--white);
  font-size: clamp(52px, 8vw, 68px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -2px;
  line-height: 1;
}

.headline-value span {
  color: var(--gray-light);
  font-size: var(--fs-subhead);
  font-weight: 700;
}

.headline-note {
  margin-top: var(--s-3);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  line-height: 1.6;
}

/**
 * Estado bloqueado. La intención es "tu análisis ya está preparado", no "paga para ver": por eso se
 * muestran las etiquetas reales de lo que se calculó (mantenimiento, objetivo y los tres macros),
 * el desenfoque es suave y no hay candado ni cortina opaca. La persona ve exactamente qué recibe.
 */
.locked-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: var(--s-3);
  background: var(--field);
}

.locked-item {
  display: grid;
  gap: var(--s-1);
  border-radius: var(--r-control);
  padding: var(--s-3);
  background: rgba(248, 247, 242, 0.03);
}

.locked-item span {
  color: var(--gray);
  font-size: var(--fs-caption);
  font-weight: 700;
}

/* El valor va oculto de verdad (texto de relleno), no desenfocado con CSS: un `blur` sobre el dato
   real lo deja legible en el HTML y copiable desde las herramientas del navegador. */
.locked-item strong {
  color: var(--gray-light);
  font-size: var(--fs-callout);
  font-weight: 800;
  letter-spacing: 2px;
}

.locked-hint {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  font-weight: 700;
}
.locked-hint svg { width: 16px; height: 16px; fill: none; stroke: var(--yellow); stroke-width: 2.2; }

/* ------------------------------------------------------ captura de correo --- */

.lead-panel {
  margin-top: var(--s-5);
  border: 1px solid rgba(255, 201, 40, 0.18);
  border-radius: var(--r-card);
  padding: var(--s-6);
  background: rgba(255, 201, 40, 0.05);
}

.lead-panel h3 {
  margin-bottom: var(--s-2);
  font-size: var(--fs-title3);
  font-weight: 800;
  letter-spacing: var(--ls-heading2);
}

.lead-panel > p {
  margin-bottom: var(--s-5);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  line-height: 1.6;
}

.lead-fields {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--s-3);
}

.lead-consents { display: grid; gap: var(--s-3); margin-top: var(--s-4); }

.consent-error {
  display: block;
  min-height: 18px;
  margin-left: 32px;
  color: var(--error);
  font-size: var(--fs-caption);
}

/* ---------------------------------------------------- resultado completo --- */

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  border: 1px solid rgba(49, 199, 121, 0.24);
  border-radius: var(--r-pill);
  padding: var(--s-2) var(--s-3);
  background: rgba(49, 199, 121, 0.08);
  color: var(--success);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

/* Una métrica manda y dos acompañan: el objetivo es lo que la persona vino a buscar, y
   mantenimiento y basal son el contexto que lo hace creíble. */
.result-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
}

.metric {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  padding: var(--s-4);
  background: var(--field);
}

.metric-lead {
  border-color: rgba(255, 201, 40, 0.26);
  background: rgba(255, 201, 40, 0.07);
}

.metric > span {
  color: var(--gray-light);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.metric strong {
  color: var(--white);
  font-size: var(--fs-title2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-heading);
}

.metric strong small {
  margin-left: var(--s-1);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  font-weight: 700;
}

.metric-lead strong { color: var(--yellow); font-size: var(--fs-title1); }

.metric p { color: var(--gray); font-size: var(--fs-caption); line-height: 1.5; }

.macro-block {
  margin-top: var(--s-6);
  border-top: 1px solid var(--border);
  padding-top: var(--s-6);
}

.macro-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.macro-head h3 {
  font-size: var(--fs-title3);
  font-weight: 800;
  letter-spacing: var(--ls-heading2);
}

.macro-head p { color: var(--gray); font-size: var(--fs-footnote); font-variant-numeric: tabular-nums; }

.macro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}

/* Cada macro toma el color de dominio que ya usa la app, para que el código de color se aprenda
   una sola vez: proteína come del verde de nutrición, carbohidratos del azul, grasas del naranja. */
.macro {
  display: grid;
  gap: var(--s-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--macro-color, var(--nutrition));
  border-radius: var(--r-input);
  padding: var(--s-4);
  background: var(--field);
}

.macro-protein { --macro-color: var(--nutrition); }
.macro-carbs { --macro-color: var(--hydration); }
.macro-fat { --macro-color: var(--movement); }

.macro span { color: var(--gray-light); font-size: var(--fs-footnote); font-weight: 700; }

.macro strong {
  color: var(--white);
  font-size: var(--fs-title2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-heading);
}

.macro strong small { margin-left: 2px; color: var(--gray-light); font-size: var(--fs-footnote); }

.macro-bar {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--macro-color);
  opacity: 0.85;
}

/* ------------------------------------------------------ conversión a app --- */

.next-step {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  border-radius: var(--r-card);
  padding: var(--s-6);
  background: linear-gradient(110deg, rgba(255, 201, 40, 0.12), rgba(255, 201, 40, 0.04));
}

.next-step h3 {
  margin-bottom: var(--s-2);
  font-size: var(--fs-title3);
  font-weight: 800;
  letter-spacing: var(--ls-heading2);
  text-wrap: balance;
}

.next-step .btn { justify-self: stretch; }

@container (min-width: 660px) {
  .next-step {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
  .next-step .btn { justify-self: end; }
}

.next-step p { color: var(--gray-light); font-size: var(--fs-footnote); line-height: 1.6; }
.next-step .btn { white-space: nowrap; }

.result-disclaimer {
  margin-top: var(--s-4);
  color: var(--gray);
  font-size: var(--fs-caption);
  line-height: 1.55;
}

/* --------------------------------------------------------- contenido SEO --- */

.tool-section { padding-block: var(--s-18); }

.section-head {
  max-width: 62ch;
  margin-bottom: var(--s-10);
}

.section-head.is-centered { margin-inline: auto; text-align: center; }

.section-head h2 {
  margin-top: var(--s-3);
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: var(--ls-heading);
  line-height: 1.12;
  text-wrap: balance;
}

.section-head p {
  margin-top: var(--s-4);
  color: var(--gray-light);
  font-size: var(--fs-callout);
  line-height: 1.7;
}

.editorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}

.editorial-card { padding: var(--s-6); }

.editorial-card h3 {
  margin-bottom: var(--s-3);
  font-size: var(--fs-title3);
  font-weight: 800;
  letter-spacing: var(--ls-heading2);
}

.editorial-card p {
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  line-height: 1.72;
}

.editorial-card p + p { margin-top: var(--s-3); }

.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-4);
}

.compare-card { padding: var(--s-6); }

.compare-card h3 {
  margin-bottom: var(--s-2);
  font-size: var(--fs-callout);
  font-weight: 800;
}

.compare-card > span {
  display: block;
  margin-bottom: var(--s-4);
  color: var(--yellow);
  font-size: var(--fs-title2);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-heading);
}

.compare-card p { color: var(--gray-light); font-size: var(--fs-footnote); line-height: 1.7; }

.faq-list {
  display: grid;
  max-width: 860px;
  margin-inline: auto;
  gap: var(--s-3);
}

.faq-list details {
  border: 1px solid var(--border);
  border-radius: var(--r-input);
  background: var(--carbon);
  transition: border-color 0.18s ease;
}

.faq-list details[open] { border-color: var(--border-strong); }

.faq-list summary {
  position: relative;
  padding: var(--s-5) var(--s-10) var(--s-5) var(--s-5);
  font-size: var(--fs-callout);
  font-weight: 800;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  position: absolute;
  top: 50%;
  right: var(--s-5);
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--yellow);
  border-bottom: 2px solid var(--yellow);
  content: "";
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-list details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }

.faq-list details p {
  padding: 0 var(--s-5) var(--s-5);
  color: var(--gray-light);
  font-size: var(--fs-footnote);
  line-height: 1.75;
}

/* ------------------------------------------------ herramientas relacionadas --- */

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}

.related-card {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-5);
  transition: border-color 0.18s ease, transform 0.18s ease;
}

a.related-card:hover {
  border-color: rgba(255, 201, 40, 0.4);
  transform: translateY(-2px);
}

.related-card h3 { font-size: var(--fs-callout); font-weight: 800; }
.related-card p { color: var(--gray); font-size: var(--fs-footnote); line-height: 1.55; }

/* Sin página publicada todavía: se muestra como card apagada y NO es un enlace. */
.related-card[data-pending] { opacity: 0.55; }

.related-tag {
  justify-self: start;
  border-radius: var(--r-pill);
  padding: 2px var(--s-2);
  background: rgba(248, 247, 242, 0.06);
  color: var(--gray);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

a.related-card .related-tag { background: rgba(255, 201, 40, 0.12); color: var(--yellow); }

/* ------------------------------------------------------------ responsive --- */

@media (max-width: 1040px) {
  .tool-hero-grid { gap: var(--s-10); }
}

@media (max-width: 900px) {
  /**
   * En móvil la calculadora sube: en la versión anterior el hero ocupaba toda la primera pantalla
   * y la herramienta empezaba a ~1.500px de scroll, en una página cuyo tráfico llega buscando
   * justamente la herramienta. Ahora el orden es titular → subtítulo → calculadora, y las señales
   * de confianza y la nota de método quedan debajo.
   */
  .tool-hero {
    padding-top: calc(var(--header-h) + var(--s-8));
    padding-bottom: var(--s-10);
  }

  .tool-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }

  .tool-hero-copy { display: contents; }
  .tool-hero-copy > .eyebrow { order: 1; justify-self: start; }
  .tool-hero-copy > h1 { order: 2; margin: 0; }
  .tool-hero-copy > .tool-lead { order: 3; max-width: none; }
  .tool-hero-shell { order: 4; }
  .tool-hero-copy > .tool-trust { order: 5; margin-top: 0; }
  .tool-hero-copy > .tool-method { order: 6; max-width: none; margin-top: 0; }

  .result-metrics { grid-template-columns: 1fr 1fr; }
  .metric-lead { grid-column: 1 / -1; }
  .tool-section { padding-block: var(--s-14); }
}

@media (max-width: 620px) {
  .tool-card { padding: var(--s-5); }
  .tool-form-grid { grid-template-columns: 1fr; }
  .tool-form-grid .span-2 { grid-column: auto; }
  .lead-fields { grid-template-columns: 1fr; }
  .lead-panel { padding: var(--s-5); }
  .result-metrics,
  .macro-grid { grid-template-columns: 1fr; }
  .metric-lead { grid-column: auto; }
  .next-step { padding: var(--s-5); }

  /* Tres opciones no caben en una fila legible bajo 620px sin achicar la letra por debajo del
     mínimo del sistema; se apilan y quedan cómodas de tocar. */
  .segmented-options { grid-auto-flow: row; }
  .segmented label { justify-content: flex-start; padding-inline: var(--s-4); }
}