/* ==============================================================
   pages/acerca-de-mi.css — estilos exclusivos de esta página
   Se carga solo en su HTML correspondiente (PageSpeed).
   Requiere: tokens.css, base.css, components.css, layout.css
   ============================================================== */

/* --- Hero de Acerca de Mí ------------------------------------------- */
/* Especificación: docs/componente-acerca-de-mi-noedelaflor.md §1.
   Misma construcción que los Hero de las páginas legales (fondo carbón con
   el efecto de puntos, dos wrappers de 62px y bloque de texto de 1053px),
   pero con copy propio: el título va en crema con "Noé" en itálica oro,
   igual que Garantías. Vive aquí y no en legal.css porque esta página no
   carga esa hoja. */
.am-hero {
  --am-hero-pad-y: clamp(var(--space-7), 8.6vw, 124px);  /* 62 + 62 en desktop */
  --am-hero-pad-x: 20px;
  --am-hero-text-max: 1053px;
  --am-hero-gap: 32px;               /* título → intro */

  position: relative;                /* contiene el canvas absoluto */
  overflow: hidden;
  background-color: var(--color-carbon);
  color: var(--color-crema);
  padding: var(--am-hero-pad-y) var(--am-hero-pad-x);
  /* Mi Historia también va sobre carbón: sin este borde las dos secciones se
     leen como una sola. Mismo tratamiento que el borde del nav sticky (y el
     del footer y el trust bar): 1px oro. Solo en el Hero de esta página. */
  border-bottom: 1px solid var(--color-oro);
}

/* Canvas del efecto de puntos: detrás de todo, nunca captura el puntero */
.am-hero .dots-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.am-hero__inner {
  position: relative;                /* por encima del canvas */
  max-width: var(--am-hero-text-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--am-hero-gap);
  text-align: center;
}

.am-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-body);   /* Fraunces Regular (400) */
  font-size: var(--fs-hero);         /* 36px → 57px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

.am-hero__title em {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-oro);
}

.am-hero__intro {
  margin: 0;
  font-weight: var(--weight-semibold);  /* Hanken Grotesk SemiBold (600) */
  font-size: var(--fs-h2);           /* 24px → 32px */
  line-height: 1.5;
}

/* --- Mi Historia ---------------------------------------------------- */
/* Especificación: §2. Fondo carbón, igual que el bloque de texto, para que
   se perciban como una sola superficie alrededor de la imagen.
   Mobile (base): imagen completa arriba y texto debajo, en flujo normal.
   Desktop (≥1024px): la imagen se recorta por la izquierda dentro de una
   ventana de 840px pegada al borde izquierdo, y el bloque de texto de 600px
   se superpone en absolute arrancando en el 50 % del contenedor. */
.am-historia {
  --am-hist-pad-y: clamp(var(--space-7), 13.3vw, 192px);  /* mismo ritmo que el resto del sitio */
  --am-hist-pad-x: 20px;
  --am-hist-content-max: 1280px;
  --am-hist-header-gap: 18px;        /* eyebrow → título */
  --am-hist-header-to-stage: clamp(var(--space-6), 4.3vw, 62px);
  --am-hist-img-width: 1024px;       /* ancho conceptual de la imagen */
  --am-hist-img-visible: 840px;      /* ventana visible: se recortan 184px por la izquierda */
  --am-hist-text-width: 600px;
  --am-hist-text-pad: clamp(var(--space-4), 3vw, 40px);
  --am-hist-text-gap: 24px;          /* entre párrafos */
  --am-hist-caption-gap: var(--space-2);  /* imagen → caption, mismo que la 404 */

  background-color: var(--color-carbon);
  color: var(--color-crema);
  padding: var(--am-hist-pad-y) var(--am-hist-pad-x);
}

.am-historia__inner {
  max-width: var(--am-hist-content-max);
  margin-inline: auto;
}

.am-historia__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--am-hist-header-gap);
  text-align: center;
  margin-bottom: var(--am-hist-header-to-stage);
}

.am-historia__header > * { margin: 0; }

.am-historia__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;                   /* 16px */
  line-height: 1.5;
  text-transform: uppercase;
}

.am-historia__title {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);           /* 24px → 32px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

/* Mobile: imagen y texto apilados, sin superposición */
.am-historia__stage {
  display: flex;
  flex-direction: column;
  gap: var(--am-hist-text-gap);
}

.am-historia__figure { margin: 0; }

.am-historia__frame { line-height: 0; }   /* sin hueco bajo la imagen */

/* Caption del retrato: misma técnica que .e404__caption (12px, centrado,
   texto discreto). Va sobre carbón, así que usa --color-crema-50 (4.59:1 AA),
   el equivalente del --color-carbon-62 de la 404 sobre crema. */
.am-historia__caption {
  margin-top: var(--am-hist-caption-gap);
  font-size: var(--fs-caption);      /* 12px, Hanken Grotesk Regular */
  line-height: 1.5;
  color: var(--color-crema-50);
  text-align: center;
}

.am-historia__img {
  width: 100%;
  height: auto;
}

.am-historia__text {
  display: flex;
  flex-direction: column;
  gap: var(--am-hist-text-gap);
  background-color: var(--color-carbon);
  font-size: var(--fs-body);         /* 16px → 18px */
  line-height: 1.5;
}

.am-historia__text > p { margin: 0; }

/* --- Desktop (≥ 1024px): imagen recortada + texto superpuesto --------- */
@media (min-width: 64em) {
  .am-historia__stage {
    position: relative;              /* referencia del bloque de texto */
    display: block;
  }

  /* Ventana de 840px pegada al borde izquierdo: la imagen mide 1024px y se
     ancla a la derecha de la ventana, así que se recortan sus 184px
     izquierdos y quedan visibles los 840px derechos (el rostro) */
  .am-historia__frame {
    position: relative;
    width: var(--am-hist-img-visible);
    /* El archivo es cuadrado (1024 × 1024), así que el alto del bloque
       es igual al ancho conceptual de la imagen */
    aspect-ratio: 1;
    overflow: hidden;
  }

  /* El <figure> mide lo mismo que la ventana; el caption sale del flujo y
     cuelga justo debajo de la imagen (centrado bajo sus 840px visibles), para
     que el escenario conserve su alto de 840px y el texto superpuesto siga
     centrado verticalmente igual que antes. Cae sobre el padding inferior
     de la sección. */
  .am-historia__figure {
    position: relative;
    width: var(--am-hist-img-visible);
  }

  .am-historia__caption {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
  }

  .am-historia__img {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--am-hist-img-width);
    max-width: none;
    height: 100%;
    object-fit: cover;
  }

  /* El borde IZQUIERDO del bloque arranca en el 50 % del contenedor y se
     extiende 600px hacia la derecha: no lleva translateX porque no va
     centrado (§2). Se superpone a la imagen, que queda detrás. */
  .am-historia__text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);     /* solo vertical: horizontalmente no se centra */
    /* 600px, pero nunca más que la mitad derecha del escenario: entre 1024 y
       1279px el contenedor mide menos de 1200px y los 600px fijos se salían
       por la derecha (texto cortado + scroll horizontal). Desde 1280px el 50%
       ya es ≥ 640px y manda el valor de siempre. */
    width: min(var(--am-hist-text-width), 50%);
    padding: var(--am-hist-text-pad);
  }
}

/* --- Cómo Trabajar Conmigo ------------------------------------------- */
/* Especificación: §3. Fondo crema, contenedor de 1280px. Desktop: 2 columnas
   (título a la izquierda, alineado a la izquierda; lista de pasos a la
   derecha, el doble de ancha). Mobile: una sola columna.
   Cada paso lleva solo borde inferior como separador. */
.am-proceso {
  --am-proc-pad-y: clamp(var(--space-7), 13.3vw, 192px);
  --am-proc-pad-x: 20px;
  --am-proc-content-max: 1280px;
  --am-proc-eyebrow-to-grid: clamp(var(--space-6), 4.3vw, 62px);
  --am-proc-col-gap: clamp(var(--space-5), 5vw, 72px);
  --am-proc-step-pad-y: clamp(var(--space-4), 2.8vw, 40px);
  --am-proc-step-gap: clamp(var(--space-4), 2.5vw, 36px);  /* número → texto */
  --am-proc-step-inner-gap: 16px;    /* título → párrafo */
  --am-proc-num-size: clamp(2.5rem, 1.8rem + 2.8vw, 4rem);  /* 40px → 64px */
  /* Columna del número: ancho fijo (en em, escala con el número en todos los
     breakpoints) para que el texto de los 5 pasos arranque igual. Fraunces, tal
     como la sirve Google Fonts, no aplica cifras tabulares: "01" mide 1.19em y
     "04", el más ancho, 1.365em */
  --am-proc-num-width: 1.4em;

  background-color: var(--color-crema);
  color: var(--color-carbon);
  padding: var(--am-proc-pad-y) var(--am-proc-pad-x);
}

.am-proceso__inner {
  max-width: var(--am-proc-content-max);
  margin-inline: auto;
}

.am-proceso__eyebrow {
  margin: 0 0 var(--am-proc-eyebrow-to-grid);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: 1rem;                   /* 16px */
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.am-proceso__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--am-proc-col-gap);
}

.am-proceso__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h2);           /* 24px → 32px */
  line-height: var(--leading-tight);
  font-variation-settings: "SOFT" 0, "WONK" 1;
  text-align: left;                  /* a diferencia de otros títulos de sección */
}

.am-proceso__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Paso: número + bloque de texto en fila, separados por el borde inferior */
.am-step {
  display: flex;
  align-items: flex-start;
  gap: var(--am-proc-step-gap);
  padding-block: var(--am-proc-step-pad-y);
  border-bottom: 1px solid var(--color-carbon);
}

.am-step > * { margin: 0; }

.am-step__num {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--am-proc-num-size);
  line-height: 1;                    /* 100 % (valor confirmado en Figma) */
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--color-marron);
  font-variant-numeric: tabular-nums; /* por si la fuente llega a traer tnum */
  width: var(--am-proc-num-width);
}

.am-step__body {
  display: flex;
  flex-direction: column;
  gap: var(--am-proc-step-inner-gap);
}

.am-step__body > * { margin: 0; }

.am-step__title {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--fs-h3);           /* 20px → 24px */
  line-height: 1.3;
  text-transform: uppercase;
}

.am-step__text {
  font-size: var(--fs-body);         /* 16px → 18px */
  line-height: 1.5;
}

/* --- Desktop (≥ 1024px): 2 columnas, la lista el doble de ancha ------- */
@media (min-width: 64em) {
  .am-proceso__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}