/* BEAT34 | editorial jovem: formatos de rosto são inspirações, nunca regras rígidas. */
.faceArticle .cmsIntro{background:radial-gradient(ellipse at 86% 12%,#e3222914,transparent 40%),#f2e5e1;position:relative;overflow:hidden}
/* Usar grafismo tipográfico, não o emoji ✳ (renderizado como ícone verde no iOS). */
.faceArticle .cmsIntro::after{
 content:"34";position:absolute;right:3.5vw;bottom:-34px;top:auto;
 font:800 clamp(90px,15vw,165px)/1 'Archivo Black',sans-serif;
 -webkit-text-stroke:2px #e3222920;color:transparent;opacity:.8;
 pointer-events:none;z-index:0;
}
.faceArticle .cmsIntro .cmsEyebrow,
.faceArticle .cmsIntro h1,
.faceArticle .cmsIntro p{position:relative;z-index:1}
.faceArticle .cmsArticle{max-width:1120px;padding-top:45px}
.faceArticle .cmsArticle .cmsText{max-width:870px;margin:38px auto 0}
.faceMatchGuide{margin:0 0 38px;display:grid;gap:24px}
.faceMatchHead{background:#201e1f;color:#fff;border-radius:25px;padding:31px 35px;position:relative;overflow:hidden}
.faceMatchHead:after{content:"34";position:absolute;right:-18px;top:-37px;color:#e322292b;font:170px/1 'Archivo Black';pointer-events:none}
.faceMatchHead>span{font:800 10px 'Space Grotesk';color:#febec0;letter-spacing:1.3px}
.faceMatchHead h2{font:clamp(32px,4.3vw,54px)/.99 'Archivo Black';letter-spacing:-1.3px;margin:13px 0}
.faceMatchHead h2 em{color:#ff7477;font-style:normal}
.faceMatchHead p{max-width:650px;color:#ded1cf;line-height:1.7;font-size:14px;margin:0}
.faceMatchGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.faceMatchCard{overflow:hidden;border:1px solid #ecdcd8;background:#fff;border-radius:19px;box-shadow:0 9px 25px #2c22200c;transition:transform .18s}
.faceMatchCard:hover{transform:translateY(-4px)}
.faceMatchDrawing{background:radial-gradient(ellipse at center,#fff9f5,#f5eae6);position:relative;display:flex;align-items:center;justify-content:center;height:221px;padding:5px}
.faceMatchDrawing svg{width:100%;height:100%;max-width:190px;max-height:213px}
.faceMatchDrawing>span{position:absolute;top:10px;left:11px;font:800 9px 'Space Grotesk';letter-spacing:.8px;color:#9a4c50}
.faceMatchText{padding:17px 15px 19px}
.faceMatchText h3{font:700 17px 'Space Grotesk';letter-spacing:-.5px;margin:0 0 7px}
.faceMatchText strong{font:800 10px 'Space Grotesk';color:#c32a34;letter-spacing:.5px;text-transform:uppercase}
.faceMatchText p{font-size:12px;line-height:1.6;color:#716562;margin:10px 0 0}
.faceMatchNote{display:flex;align-items:center;gap:14px 20px;padding:18px 22px;background:#fcf2f0;border:1px solid #eeddd9;border-radius:14px;flex-wrap:wrap}
.faceMatchNote strong{font:800 11px 'Space Grotesk';color:#b42634;white-space:nowrap}
.faceMatchNote span{flex:1;min-width:240px;color:#6e5b57;font-size:12px;line-height:1.6}
.faceMatchNote a{border-radius:100px;background:#e32229;color:white;padding:11px 14px;font:800 10px 'Space Grotesk';white-space:nowrap}
@media(max-width:850px){.faceMatchGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.faceArticle .cmsIntro{padding-top:37px;padding-bottom:36px}.faceMatchHead{padding:25px 22px;border-radius:18px}.faceMatchHead p{font-size:12px}.faceMatchGuide{gap:13px}.faceMatchGrid{gap:9px}.faceMatchCard{border-radius:14px}.faceMatchDrawing{height:161px}.faceMatchText{padding:12px}.faceMatchText h3{font-size:14px}.faceMatchText strong{font-size:9px}.faceMatchText p{font-size:11px;line-height:1.5}.faceMatchNote{padding:15px}.faceMatchNote span{min-width:100%}.faceMatchNote a{min-height:42px;display:inline-flex;align-items:center}}
/* Mobile editorial: headline readable, image compact, no emoji over content. */
@media(max-width:760px){
 .faceArticle .cmsIntro{padding:30px 17px 32px}
 .faceArticle .cmsIntro::after{content:none!important;display:none!important}
 .faceArticle .cmsIntro .cmsEyebrow{font-size:10px;letter-spacing:1px;line-height:1.5}
 .faceArticle .cmsIntro h1{
  font-size:clamp(28px,8.05vw,39px)!important;
  line-height:1.09;letter-spacing:-.85px;
  max-width:100%;margin:12px 0;
  overflow-wrap:break-word;word-break:normal;
 }
 .faceArticle .cmsIntro p{
  font-size:13px;line-height:1.55;max-width:38rem;margin:0;
 }
 .faceArticle .cmsArticle{max-width:100%;padding:20px 15px 48px;min-width:0}
 .faceArticle .cmsCover{
  display:block;width:100%;max-width:100%;
  height:clamp(250px,80vw,335px);max-height:none;
  object-fit:cover;object-position:center 42%;
  margin:0 0 24px;border-radius:9px;
 }
 .faceArticle .faceMatchHead h2{font-size:clamp(28px,7.5vw,36px);line-height:1.06}
 .faceArticle .faceMatchHead{padding:23px 20px}
 .faceArticle .faceMatchHead::after{font-size:105px;top:-14px;right:-8px}
 .faceArticle .faceMatchText p{line-height:1.5}
}
@media(max-width:350px){
 .faceArticle .cmsIntro{padding-left:14px;padding-right:14px}
 .faceArticle .cmsIntro h1{font-size:28px!important}
 .faceArticle .cmsArticle{padding-left:12px;padding-right:12px}
 .faceArticle .faceMatchDrawing{height:145px}
}
@media(prefers-reduced-motion:reduce){.faceMatchCard{transition:none}}