/* Secondary hero artwork only. Complete replacement for css/detalhes-artes.css.
   Shell, identity, .perm measurements: existing css/detalhes-artes.css.
   Product artwork, colors and variants: css/flagship.css?v=0ac90bbd, art rules at lines 95-97, 118-119,
   154-156, 165, 174, 178, 183 and 203-243. SVG faces remain inline from paginas.arte().
   No global flagship import, page layout rules, motion rules or content overlays. */
body.secondary .detail-art{
  position:relative;
  min-width:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
  min-height:570px;
  padding:64px 40px;
  border-radius:var(--r-art);
  overflow:hidden;
  background:#eee center/cover no-repeat;
  color:#1C2327;
  text-align:left;
}
body.secondary .detail-art.tx-verde{background-image:url('/img/novo/fundo2.webp?v=57d3191e');}
body.secondary .detail-art.tx-pastel{background-image:url('/img/novo/fundo5.webp?v=59bb1ed5');}
body.secondary .detail-art .ask{
  align-self:flex-end;
  max-width:85%;
  margin:0 0 8px;
  padding:12px 18px;
  border-radius:18px;
  border-bottom-right-radius:4px;
  background:#D9FDD3;
  color:#111B21;
  font-size:17px;
  line-height:1.3;
  font-weight:400;
  box-shadow:0 1px 1px rgba(11,20,26,.13);
}
body.secondary .detail-art .detail-art-brand{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  max-width:380px;
  margin-bottom:0;
  color:#fff;
  font-size:24px;
  font-weight:500;
  line-height:1;
}
body.secondary .detail-art .detail-art-avatar{display:block;width:48px;height:48px;flex:none;}
body.secondary .detail-art .detail-art-verified{display:block;width:20px;height:20px;margin-left:-4px;flex:none;}
body.secondary .detail-art .card{
  position:relative;
  filter:drop-shadow(0 26px 36px rgba(40,40,20,.20)) drop-shadow(0 3px 8px rgba(40,40,20,.08));
}
body.secondary .detail-art .perm{
  width:100%;
  max-width:380px;
  padding:24px;
  border-radius:32px;
  background:#FCFCFC;
  color:#1C2327;
}
body.secondary .detail-art .perm-h{display:flex;align-items:center;gap:12px;padding-bottom:18px;font-size:18px;font-weight:500;}
body.secondary .detail-art .perm-h>div,
body.secondary .detail-art .perm-h>span:not(.perm-logo):not(.av-j){min-width:0;}
body.secondary .detail-art .perm-h small{display:block;margin-top:2px;color:#66717A;font-size:13px;font-weight:400;line-height:1.35;}
body.secondary .detail-art .perm-h i{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:#CC092F;color:#fff;font-style:normal;font-weight:700;}
body.secondary .detail-art .perm-logo{display:block;width:40px;height:40px;flex:none;}
body.secondary .detail-art .perm-logo svg{display:block;width:100%;height:100%;}
body.secondary .detail-art .perm-r{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid #EDEDED;font-size:15px;font-weight:500;}
body.secondary .detail-art .perm-r small{display:block;margin-top:2px;color:#66717A;font-size:13px;font-weight:400;line-height:1.35;}
body.secondary .detail-art .perm-r b{font-size:22px;font-weight:500;letter-spacing:-.02em;}
body.secondary .detail-art .perm-r em{flex:none;padding:5px 12px;border-radius:20px;background:#E7F7EC;color:#18773E;font-size:13px;font-style:normal;font-weight:500;white-space:nowrap;}
body.secondary .detail-art .perm-r .cp{background:#F0F0F0;color:#1C2327;}
body.secondary .detail-art .perm-f{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid #EDEDED;}
body.secondary .detail-art .perm-f>em{flex:none;padding:5px 12px;border-radius:20px;background:#E7F7EC;color:#18773E;font-style:normal;font-size:13px;font-weight:500;white-space:nowrap;}
body.secondary .detail-art .perm-f small{color:#66717A;font-size:13px;line-height:1.35;}
body.secondary .detail-art .btn-k{flex:none;padding:11px 18px;border-radius:24px;background:#1C2327;color:#fff;font-size:14px;font-weight:500;}

/* The other three source art textures. Existing green/pastel remain unchanged. */
body.secondary .detail-art.tx-rosa{background-image:url('/img/novo/fundo4.webp?v=6728587a');}
body.secondary .detail-art.tx-aneis{background-image:url('/img/novo/fundo3.webp?v=a9e376f7');}
body.secondary .detail-art.tx-azul{background-image:url('/img/novo/fundo1.webp?v=050aebf8');}

/* Source SVG widgets: their own fills, radii, text, images and bank marks stay
   inside the inline SVG. Do not recolor, crop or rebuild these as HTML rows. */
body.secondary .detail-art .card{flex:none;min-width:0;}
body.secondary .detail-art .card svg{display:block;width:100%;height:auto;}
body.secondary .detail-art .card-wide{
  width:100%;
  max-width:470px;
  padding:20px 18px 12px;
  border-radius:32px;
  background:#FCFCFC;
}
body.secondary .detail-art .card-a{
  width:78%;
  max-width:330px;
  align-self:flex-start;
  transform:rotate(-3deg);
  z-index:1;
}
body.secondary .detail-art .card-b{
  width:78%;
  max-width:330px;
  align-self:flex-end;
  transform:rotate(2deg);
}
body.secondary .detail-art .card-pix{width:100%;max-width:330px;}

/* The source small-print rule also covers headers whose text wrapper is a span
   (autoriza), not only the div used in the two initial representative heroes. */
body.secondary .detail-art .perm small{display:block;margin-top:2px;font-size:13px;color:#66717A;}
body.secondary .detail-art .perm-r>span{min-width:0;overflow-wrap:break-word;}
body.secondary .detail-art .perm-r b{flex:none;white-space:nowrap;}
body.secondary .detail-art .perm-f{flex-wrap:wrap;}
body.secondary .detail-art .perm-f small{flex:1 1 90px;min-width:0;margin:0;}
body.secondary .detail-art .btn-k,
body.secondary .detail-art .btn-d{max-width:100%;}
body.secondary .detail-art .btn-d{
  flex:none;
  padding:10px 16px;
  border-radius:24px;
  background:#F0F0F0;
  font-size:14px;
  font-weight:500;
  color:#C42B2B;
}

/* Exact source identities. The default red is Bradesco, not Carla purple.
   Keep the padaria rule after av-c: pix-qr intentionally has both classes. */
body.secondary .detail-art .perm-h i.nu{background:#820AD1;}
body.secondary .detail-art .perm-h i.it{background:#EC7000;color:#0A2A8C;}
body.secondary .detail-art .perm-h i.sa{background:#EC0000;}
body.secondary .detail-art .perm-h i.dk{background:#1C2327;}
body.secondary .detail-art .perm-h i.av-c{background:#8E5BD9;}
body.secondary .detail-art .perm-h i.in{background:#FF7A00;}
body.secondary .detail-art .perm-h i.pd{background:#E07B39;}
body.secondary .detail-art .perm-logo svg{display:block;width:100%;height:100%;}

/* Source WhatsApp request bubbles with photo/PDF attachments and QR codes. */
body.secondary .detail-art .ask{flex:none;overflow-wrap:break-word;}
body.secondary .detail-art .ask .anexo{
  display:flex;
  align-items:center;
  gap:10px;
  margin:-4px -8px 10px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,.65);
  font-size:14px;
}
body.secondary .detail-art .ask .anexo i{flex:none;width:22px;height:22px;background:#C42B2B;}
body.secondary .detail-art .ask.foto{padding:8px;border-bottom-right-radius:8px;}
body.secondary .detail-art .ask.foto .qr{box-shadow:inset 0 0 0 1px #EDEDED;}
body.secondary .detail-art .foto .qr{display:block;width:190px;height:190px;border-radius:18px;}
body.secondary .detail-art .foto span{display:block;padding:10px 8px 4px;}
body.secondary .detail-art .perm-qr svg{
  display:block;
  width:150px;
  height:150px;
  margin:0 auto 18px;
  border-radius:12px;
  box-shadow:inset 0 0 0 1px #EDEDED;
}

/* Tap to Pay's four payment-mode pills, copied from the source product card. */
body.secondary .detail-art .perm .tp-op{
  display:flex;
  gap:8px;
  margin:0;
  padding:14px 0 16px;
  border-top:1px solid #EDEDED;
}
body.secondary .detail-art .perm .tp-op span{
  flex:1;
  min-width:0;
  padding:8px 0;
  border-radius:20px;
  background:#F0F0F0;
  color:#1C2327;
  text-align:center;
  font-size:13px;
  font-weight:500;
}
body.secondary .detail-art .perm .tp-op span.on{background:#1C2327;color:#fff;}

/* Only the attachment masks used by the mapped art; no global icon registry. */
body.secondary .detail-art .mk{-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;}
body.secondary .detail-art .ic-doc{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6v18h12V7z'/%3E%3Cpath d='M14 3v4h4M9 13h6M9 17h6'/%3E%3C/svg%3E");}
body.secondary .detail-art .ic-foto{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8a2 2 0 0 1 2-2h2l2-2h6l2 2h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");}
@media(max-width:1100px) and (min-width:901px){
  body.secondary .detail-art{padding:56px 28px;}
}
@media(max-width:900px){
  body.secondary .detail-art{max-width:600px;min-height:570px;margin:auto;padding:64px 48px;}
}
@media(max-width:560px){
  body.secondary .detail-art{min-height:530px;padding:48px 24px;border-radius:32px;gap:18px;}
  body.secondary .detail-art .ask{max-width:90%;font-size:16px;}
  body.secondary .detail-art .perm{padding:22px;}
  body.secondary .detail-art .perm-h{font-size:17px;}
  body.secondary .detail-art .perm-f{flex-wrap:wrap;gap:9px;}
  body.secondary .detail-art .btn-k{font-size:13px;}
}

/* Keep source QR-photo size at the source mobile breakpoint. */
@media(max-width:560px){
  body.secondary .detail-art .foto .qr{width:130px;height:130px;}
}

/* Fixed-viewBox widgets cannot reflow their labels. At phone widths, recover
   horizontal space rather than shrinking source text into an unreadable card.
   This affects SVG-only compositions, never the approved .perm/card shell. */
@media(max-width:560px){
  body.secondary .detail-art:has(>.card-pix),
  body.secondary .detail-art:has(>.card-wide){padding-left:12px;padding-right:12px;}
  body.secondary .detail-art:has(>.card-pix)>.ask,
  body.secondary .detail-art:has(>.card-wide)>.ask{margin-right:12px;}
  body.secondary .detail-art:has(>.card-pix)>.detail-art-brand,
  body.secondary .detail-art:has(>.card-wide)>.detail-art-brand{padding-left:12px;padding-right:12px;}
  body.secondary .detail-art .card-wide{padding:10px 0 6px;}
  body.secondary .detail-art:has(>.card-a){padding-left:18px;padding-right:18px;}
  body.secondary .detail-art .card-a,
  body.secondary .detail-art .card-b{width:100%;max-width:330px;}
}

/* Product-specific bodies. Scoped after the shared artwork rules. The shared artwork wrapper
   supplies Jota's official identity, so these fragments have no brand header. */
body.secondary .detail-art.art-pj-opening .perm-h,body.secondary .detail-art.art-tap-devices .perm-h{justify-content:space-between;gap:10px;}
body.secondary .detail-art.art-pj-opening .pj-type,body.secondary .detail-art.art-tap-devices .device-app{flex:none;border-radius:20px;background:#F0F0F0;padding:6px 10px;font-size:12px;font-weight:500;line-height:1.2;}
body.secondary .detail-art.art-pj-opening .pj-question{padding-top:20px;border-top:1px solid #EDEDED;font-size:26px;font-weight:500;line-height:1.1;letter-spacing:-.035em;}
body.secondary .detail-art.art-pj-opening .pj-field{margin:22px 0 20px;padding:13px 15px 15px;border:1px solid #CCD2D5;border-radius:14px;background:#fff;}
body.secondary .detail-art.art-pj-opening .pj-field>span{font-size:11px;font-weight:500;letter-spacing:.06em;color:#5A656D;}
body.secondary .detail-art.art-pj-opening .pj-field>div{display:flex;align-items:center;gap:4px;margin-top:7px;font-size:21px;letter-spacing:-.025em;color:#9BA3A7;white-space:nowrap;}
body.secondary .detail-art.art-pj-opening .pj-cursor{display:inline-block;width:1px;height:22px;background:#1C2327;}
body.secondary .detail-art.art-pj-opening .perm-f{border:0;padding:0;}
body.secondary .detail-art.art-pj-opening .btn-k{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:13px 18px;font-size:15px;}
body.secondary .detail-art.art-pj-opening .btn-k>span{font-size:20px;line-height:1;}
body.secondary .detail-art.art-pj-opening .pj-next{margin-top:13px;font-size:12px;line-height:1.4;color:#66717A;text-align:center;}

body.secondary .detail-art.art-tap-devices .device-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:21px 0 22px;border-top:1px solid #EDEDED;}
body.secondary .detail-art.art-tap-devices .device-option{min-width:0;text-align:center;}
body.secondary .detail-art.art-tap-devices .device-option>strong{display:block;margin-top:13px;font-size:17px;font-weight:500;letter-spacing:-.025em;}
body.secondary .detail-art.art-tap-devices .device-option>small{margin-top:4px;font-size:11px;line-height:1.3;white-space:nowrap;}
body.secondary .detail-art.art-tap-devices .device-phone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:94px;height:155px;margin:auto;border:4px solid #1C2327;border-radius:18px;background:#EAF2E8;box-shadow:0 5px 9px rgba(28,35,39,.10);}
body.secondary .detail-art.art-tap-devices .device-camera{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#1C2327;}
body.secondary .detail-art.art-tap-devices .device-version{display:block;margin-top:10px;font-size:38px;font-weight:500;line-height:1;letter-spacing:-.06em;}
body.secondary .detail-art.art-tap-devices .device-version>span{display:block;margin-top:5px;font-size:8px;font-weight:400;letter-spacing:0;}
body.secondary .detail-art.art-tap-devices .device-nfc,body.secondary .detail-art.art-tap-devices .device-ios{margin-top:14px;padding:4px 8px;border-radius:9px;background:#1C2327;color:#fff;font-size:10px;font-weight:500;letter-spacing:.01em;}
body.secondary .detail-art.art-tap-devices .device-iphone{background:#EEEAF3;border-radius:21px;}
body.secondary .detail-art.art-tap-devices .device-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);width:44px;height:9px;border-radius:0 0 6px 6px;background:#1C2327;}
body.secondary .detail-art.art-tap-devices .device-home{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:29px;height:3px;border-radius:3px;background:#1C2327;}
body.secondary .detail-art.art-tap-devices .device-requirements{display:block;text-align:center;}
body.secondary .detail-art.art-tap-devices .device-requirements>span{display:block;font-size:13px;font-weight:500;}
body.secondary .detail-art.art-tap-devices .device-requirements>small{margin-top:5px;font-size:11px;line-height:1.4;}

body.secondary .detail-art.art-account-identity .account-institution{display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px 12px;padding:22px 20px 17px;border-radius:20px;background:#1C2327;color:#fff;}
body.secondary .detail-art.art-account-identity .account-institution small{margin:0;font-size:11px;color:#B5C1C7;}
body.secondary .detail-art.art-account-identity .account-provider>strong{display:block;margin-top:5px;font-size:31px;font-weight:500;letter-spacing:-.04em;line-height:1.1;}
body.secondary .detail-art.art-account-identity .account-code{padding-left:17px;border-left:1px solid #465056;text-align:right;}
body.secondary .detail-art.art-account-identity .account-code>b{display:block;margin-top:5px;font-size:31px;font-weight:500;font-variant-numeric:tabular-nums;line-height:1.1;letter-spacing:-.03em;}
body.secondary .detail-art.art-account-identity .account-cnpj{grid-column:1/-1;display:flex;flex-direction:column;gap:4px;padding-top:14px;border-top:1px solid #465056;font-size:13px;line-height:1.3;}
body.secondary .detail-art.art-account-identity .account-cnpj>span:first-child{color:#B5C1C7;font-size:10px;}
body.secondary .detail-art.art-account-identity .account-cnpj>span:last-child{font-variant-numeric:tabular-nums;letter-spacing:.015em;}
body.secondary .detail-art.art-account-identity .account-authority{padding:18px 0;font-size:14px;line-height:1.4;font-weight:500;}
body.secondary .detail-art.art-account-identity .perm-f small{font-size:12px;line-height:1.45;}
@media(max-width:560px){
  body.secondary .detail-art.art-pj-opening .pj-question{font-size:25px;}
  body.secondary .detail-art.art-pj-opening .pj-field>div{font-size:20px;}
  body.secondary .detail-art.art-tap-devices .device-pair{gap:12px;padding:18px 0;}
  body.secondary .detail-art.art-tap-devices .device-phone{width:88px;height:145px;}
  body.secondary .detail-art.art-tap-devices .device-app{font-size:10px;padding:6px 8px;}
  body.secondary .detail-art.art-tap-devices .device-option>strong{font-size:16px;}
}

body.secondary .detail-art .art-phone{white-space:nowrap;}