/* Landing — classes utilisées uniquement par / (audit d'usage réel) */
.hero{padding:8px 0 4px;text-align:center}
.hook{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.24;margin:0 0 14px}
/* <em> sert d'accent chromatique, pas d'italique */
.hook em{font-style:normal;color:var(--am-barro)}
.hook-cierre{font-family:var(--serif);font-weight:600;font-size:23px;
  color:var(--am-barro);margin:0 0 18px}
.promesa{font-size:19px;color:var(--am-humo);margin:0 0 22px;text-align:left}
.promesa strong{color:var(--am-tinta);font-weight:700}
.reassure{text-align:center;font-size:15px;color:var(--am-humo);margin:12px 0 0}

/* Les trois cartes — typographiques, zéro image à télécharger.
   Celle du milieu est redressée et légèrement surélevée. */
.cartas-hero{display:flex;justify-content:center;align-items:flex-end;
  gap:10px;margin:0 0 26px}
.ct{
  flex:0 0 auto;width:92px;height:138px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:var(--am-marfil);border:1.5px solid var(--am-arena);border-radius:11px;
  box-shadow:0 3px 10px rgba(51,34,30,.09);
}
.ct__n{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--am-oro);line-height:1}
.ct__t{font-size:12.5px;line-height:1.25;color:var(--am-humo);padding:0 6px;text-align:center}
.ct--0{transform:rotate(-8deg)}
.ct--1{transform:translateY(-10px);border-color:var(--am-oro)}
.ct--2{transform:rotate(8deg)}
@media (max-width:360px){.ct{width:82px;height:124px}}
.sec{margin-top:36px;content-visibility:auto;contain-intrinsic-size:1px 420px}
.sec--alta{content-visibility:visible}
.sec h2{text-align:center}
.tarjeta{background:var(--am-marfil);border:1px solid var(--am-arena);border-radius:16px;padding:18px;box-shadow:var(--sh)}
.pasos{list-style:none;margin:0;padding:0}
.pasos li{display:flex;gap:12px;margin:0 0 14px;font-size:17px}
.pasos b{color:var(--am-barro);flex:0 0 auto}
/* 160 px = la taille CSS réellement affichée. Le fichier source fait 160×160,
   pas de 2x « au cas où » : une image plus grande que son affichage, c'est du
   poids pur (cas réel documenté dans erreurs.md). */
.retrato{display:block;width:160px;height:160px;border-radius:50%;object-fit:cover;
  margin:0 auto 16px;background:var(--am-arena)}
.quien{text-align:center}
.quien p{margin:0 0 10px}