/* ===== INÍCIO: 08 Teste de pH (medidor 3D, ponteiro entre 7 e 8) ===== */
.ph{display:grid;gap:28px;align-items:center}
.gauge-card{position:relative;border-radius:24px;padding:22px 18px 20px;background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,#EAF6FB 100%);border:1px solid var(--line);box-shadow:0 30px 60px rgba(11,43,99,.16),0 2px 0 #fff inset;overflow:hidden}
.dial{position:relative;width:100%;max-width:340px;margin:28px auto 0}
.gauge{position:relative;width:100%;aspect-ratio:2/1;overflow:hidden}
.gauge .arc,.gauge .ok{position:absolute;left:0;top:0;width:100%;aspect-ratio:1/1;border-radius:50%}
.gauge .arc{background:conic-gradient(from -90deg,#E5484D 0deg,#F08A3E 26deg,#F2C94C 52deg,#7AC74F 77deg,#3BB273 90deg,#2BA6B5 108deg,#2B7BD8 133deg,#4B4FC9 157deg,#6A3DB8 180deg,transparent 180deg);
  -webkit-mask:radial-gradient(circle,transparent 56%,#000 57%,#000 72%,transparent 73%);mask:radial-gradient(circle,transparent 56%,#000 57%,#000 72%,transparent 73%)}
.gauge .ok{background:conic-gradient(from -90deg,transparent 90deg,#fff 90deg,#fff 103deg,transparent 103deg);
  -webkit-mask:radial-gradient(circle,transparent 73.5%,#000 74%,#000 79%,transparent 79.5%);mask:radial-gradient(circle,transparent 73.5%,#000 74%,#000 79%,transparent 79.5%);filter:drop-shadow(0 0 3px rgba(17,169,226,1)) drop-shadow(0 0 6px rgba(17,169,226,.8))}
.gauge .face{position:absolute;left:24%;width:52%;bottom:0;aspect-ratio:2/1;border-radius:999px 999px 0 0;background:radial-gradient(circle at 50% 100%,#FFFFFF 0%,#DDEFF7 85%);box-shadow:inset 0 6px 14px rgba(11,43,99,.10)}
.gauge .needle{position:absolute;left:50%;bottom:0;width:4px;height:70%;margin-left:-2px;background:linear-gradient(180deg,var(--navy),#1F4E8C);border-radius:4px 4px 0 0;transform-origin:50% 100%;transform:rotate(var(--deg,6.4deg));box-shadow:0 2px 6px rgba(0,0,0,.25)}
.dial .hub{position:absolute;left:50%;top:100%;width:24px;height:24px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 35%,#5B7DB8,var(--navy-2));box-shadow:0 3px 8px rgba(0,0,0,.3)}
.dial .lbl{position:absolute;top:calc(100% + 8px);font-family:var(--head);font-weight:700;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dial .l0{left:0}.dial .l14{right:0}
.dial .l7{left:50%;top:-24px;transform:translateX(-50%);color:var(--navy)}
.read{text-align:center;margin-top:22px}
.read b{display:block;font-family:var(--head);font-weight:800;color:var(--navy);font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.read span{font-size:12.5px;color:var(--muted);font-family:var(--head);font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gauge-card .badge{display:flex;gap:12px;align-items:center;margin-top:10px;padding:12px 14px;border-radius:14px;background:var(--navy-2);color:#fff}
.gauge-card .badge b{display:block;font-family:var(--head);font-size:15px}
.gauge-card .badge span{font-size:13.5px;color:rgba(255,255,255,.75)}
.gauge-card .badge .tile{width:42px;height:42px;background:rgba(17,169,226,.18)}
.gauge-card .badge .ico{color:#DDF6FF;--prisma-icon-accent:#58DDF7;width:24px;height:24px}
.drops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.drops div{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--white);border:1px solid var(--line);font-size:13.5px;line-height:1.3;color:var(--muted)}
.drops i{width:16px;height:20px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;flex:none}
.drops b{color:var(--navy);font-family:var(--head);display:block;font-size:14px}
.phnote{display:flex;gap:10px;align-items:flex-start;margin-top:4px}
.phnote svg{width:20px;height:20px;color:var(--deep);--prisma-icon-accent:var(--aqua-2);flex:none;margin-top:2px}
/* ===== FIM: 08 Teste de pH ===== */

/* ----- rodada 3: imagem de referência no lugar do medidor ----- */
.ph{align-items:start}
.ph-img{margin:0;border-radius:22px;overflow:hidden;box-shadow:0 24px 50px rgba(11,43,99,.14);background:#EAF6FB}
.ph-img img{width:100%;height:auto;display:block}
/* bloco de imagem do pH: proporção fixa, a imagem preenche tudo (sem moldura própria) */
.ph-img{aspect-ratio:532/452;background:#DDF1F9;border:0}
.ph-img img{width:100%;height:100%;object-fit:cover;object-position:center}
