/* ==========================================================================
   Ajustes propios de la propuesta de Heber Zepeda.
   Se carga después de styles.css (plantilla, sin cambios).
   ========================================================================== */

/* ---------- Portada: plato servido (Heber eligió esta versión el 2026-10-06) ---------- */
.cover__subject {
  aspect-ratio: 1;
  height: min(66svh, 720px);
  bottom: 5vh;
  left: 62%;
}
.cover__subject img {
  object-position: center;
  filter: drop-shadow(0 34px 44px rgb(28 36 22 / 0.28)) drop-shadow(0 8px 12px rgb(28 36 22 / 0.14));
}
@media (max-width: 899px) {
  .cover__subject {
    top: calc(var(--header-h) + 2.6rem + 15vw);
    bottom: auto;
    left: 50%;
    height: min(44svh, 86vw);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Aviso de propuesta en el folio (siempre visible, no tapa botones) ---------- */
.propuesta-badge {
  align-self: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--tomato-600);
  color: var(--paper-100);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.folio[data-ground="olive"] .propuesta-badge { background: var(--tomato-300); color: var(--olive-950); }

/* ---------- Quién soy: espacio reservado para su foto ---------- */
.foto-pendiente {
  aspect-ratio: 896 / 1200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-3);
  padding: var(--s-6);
  text-align: center;
  border-radius: var(--r-s);
  border: 1.5px dashed rgb(28 36 22 / 0.32);
  background:
    radial-gradient(circle at 50% 38%, rgb(255 255 255 / 0.55), transparent 60%),
    var(--sage-200);
  color: var(--olive-600);
}
.foto-pendiente .icon { width: 48px; height: 48px; color: var(--tomato-700); }
.foto-pendiente strong {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.15;
  color: var(--olive-900);
}
.foto-pendiente span { font-size: var(--t-small); max-width: 24ch; }

/* ---------- Quién soy: el destacado no es una cita, va sin comillas ---------- */
.sobre__destacado {
  margin-block: var(--s-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--accent-text);
  max-width: 20em;
}
.sobre__creds ul { grid-template-columns: 1fr; }

/* ---------- Testimonios: fuente de la opinión ---------- */
.quote figcaption span { color: var(--ink-soft); }

/* En móvil el nombre va en una línea; la etiqueta se compacta para que quepa junto a "Índice" */
@media (max-width: 899px) {
  .folio__brand { gap: var(--s-2); align-items: center; }
  .folio__name { white-space: nowrap; font-size: 1.25rem; }
  .propuesta-badge { font-size: 10px; padding: 2px 7px; }
}

/* ==========================================================================
   Primera ronda de cambios (spec005): InBody arriba, sus áreas al entrar
   y su formación completa. Pedidos de Heber del 2026-10-04.
   ========================================================================== */

/* ---------- Portada: InBody desde la primera pantalla ---------- */
.cover__inbody {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: calc(var(--s-2) * -1);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent);
  text-underline-offset: 4px;
}
.cover__inbody .icon { width: 18px; height: 18px; flex: none; color: var(--accent-text); }

/* ---------- Cap. 1: sus áreas, cada una con imagen y su WhatsApp ---------- */
.areas { padding-block: var(--section) calc(var(--section) * 0.9); }
.areas__head { display: grid; gap: var(--s-4); max-width: 40rem; margin-bottom: clamp(var(--s-7), 6vh, var(--s-9)); }
.areas__title { font-size: var(--t-h1); line-height: 0.98; letter-spacing: -0.03em; }
.areas__lede { font-size: var(--t-lead); color: var(--ink-soft); }
.areas__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s-6), 4vw, var(--s-8)) var(--gutter);
}
.area { position: relative; display: grid; align-content: start; gap: var(--s-2); }
.area__media { aspect-ratio: 4 / 5; margin-bottom: var(--s-3); }
.area__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.area__name {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.area__for { font-size: var(--t-small); color: var(--ink-soft); max-width: 30ch; }
.area__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: start;
  margin-top: var(--s-1);
  font-weight: 600;
  color: var(--accent-text);
}
.area__cta .icon { width: 18px; height: 18px; transition: transform var(--d-micro) var(--ease-out); }
/* Toda la tarjeta abre WhatsApp; el nombre accesible del enlace sigue siendo corto */
.area__cta::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-s); }
.area__cta:focus-visible { outline: none; }
.area__cta:focus-visible::after { outline: 2px solid var(--accent-text); outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) {
  .area:hover .area__media img { transform: scale(1.04); }
  .area:hover .area__cta .icon { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .area__media img, .area__cta .icon { transition: none; }
  .area:hover .area__media img, .area:hover .area__cta .icon { transform: none; }
}
@media (max-width: 899px) {
  .areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-4); }
  .area__name { font-size: 1.2rem; }
  .area__for { font-size: var(--t-caption); }
}

/* ---------- InBody: qué mide y para qué sirve ---------- */
.inbody {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--s-6) clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
  margin-top: clamp(var(--s-8), 9vh, var(--s-10));
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  border-radius: var(--r-m);
  background: var(--sage-200);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.inbody__text { display: grid; gap: var(--s-4); justify-items: start; }
.inbody__title {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 14ch;
}
.inbody__text p:not(.label) { max-width: 34em; }
.inbody__lectura { display: grid; border-top: 1px solid var(--rule); }
.inbody__lectura li { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.inbody__dato { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.1; }
.inbody__para { font-size: var(--t-small); color: var(--ink-soft); }
.inbody__precio { grid-column: 1 / -1; font-size: var(--t-small); color: var(--ink-soft); }
/* Foto del equipo (provisional, spec007): imagen de referencia hasta tener la de su consultorio */
.inbody { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.75fr) minmax(0, 1fr); }
.inbody__equipo { display: grid; justify-items: center; }
.inbody__equipo img {
  width: auto;
  max-height: min(420px, 60svh);
  filter: drop-shadow(0 22px 26px rgb(28 36 22 / 0.22)) drop-shadow(0 4px 6px rgb(28 36 22 / 0.12));
}
.inbody__equipo figcaption { margin-top: var(--s-3); font-size: var(--t-caption); color: var(--ink-soft); }
@media (max-width: 1099px) {
  .inbody { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); }
  .inbody__lectura { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .inbody { grid-template-columns: 1fr; }
  .inbody__equipo img { max-height: 340px; }
}

/* ---------- Quién soy: formación completa en tres grupos ---------- */
.sobre__creds { gap: var(--s-5); }
.creds__group { display: grid; gap: var(--s-2); }
.creds__group ul { gap: var(--s-2); }

/* ---------- Consultas: precio alterno o aclaración bajo el precio (precios confirmados 2026-10-06) ---------- */
.plan__price-alt { margin-top: calc(var(--s-2) * -1); font-size: var(--t-small); color: var(--ink-soft); max-width: 26em; }
.plan__price-alt strong { color: var(--ink); font-weight: 600; }