/* bernisa-dator.css – datorn (900 px och bredare): djup, läsbar text och foton.
   Att göra rad 940 (Birgitta 17/10: "ser platt ut på datorn", "inte barnsligt – fotografier",
   "det ska vara vackert att titta på – balans i färg, form och layout").
   Laddas sist i varje sida. Storlekar och skuggor per sida skrivs av system/dator/dator-stil.py.
   Telefonen (under 900 px) påverkas inte: allt nedan ligger i min-width:900px, och fotona är dolda på telefon. */
.dbild,.dbakgrund{display:none}
@media (min-width:900px){
  /* bakgrundstoningen ligger på html så att ett foto kan ligga bakom sidan */
  html{overflow-x:clip;
    background:radial-gradient(1100px 700px at 92% -160px,rgba(245,181,63,.11) 0%,rgba(245,181,63,0) 70%),
               radial-gradient(900px 700px at -120px 520px,rgba(62,214,168,.07) 0%,rgba(62,214,168,0) 70%),
               linear-gradient(180deg,#141D28 0px,#0F161F 900px,#0B1016 1800px) #0B1016}
  body{font-size:18px;line-height:1.6;background:transparent}
  p,li,dd,td,th,label,small,blockquote{line-height:1.6}
  h1,h2,h3{line-height:1.2}
  small{font-size:max(16px,.9em)}
  input,select,textarea{font-size:max(16px,1em)}
  input::placeholder,textarea::placeholder{color:#C3CDD5;opacity:1}
  main img,.ph img{box-shadow:0 16px 40px rgba(0,0,0,.45)}

  /* Ett foto i en spalt: fotots eget format (3:2, inget skärs av), lika brett som spalten,
     samma mörka och varma ton på alla foton så att de smälter in i sidans färger */
  .dbild{display:block;position:relative;width:100%;margin:36px 0 0;aspect-ratio:3/2;border-radius:22px;overflow:hidden;pointer-events:none;
    border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 56px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3)}
  .dbild img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.8) contrast(1.05)}
  .dbild::after{content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(11,16,22,0) 40%,rgba(11,16,22,.55) 100%),linear-gradient(135deg,rgba(245,181,63,.10) 0%,rgba(11,16,22,0) 55%)}

  /* Sidor med ett smalt kort i mitten: ett mörkt, mjukt foto bakom hela sidan, kortet ligger ovanpå */
  .dbakgrund{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:#0B1016}
  .dbakgrund img{width:100%;height:100%;object-fit:cover;filter:blur(4px) saturate(.7) brightness(.6);transform:scale(1.05)}
  .dbakgrund::after{content:"";position:absolute;inset:0;
    background:radial-gradient(ellipse 55% 70% at 50% 50%,rgba(11,16,22,.55) 0%,rgba(11,16,22,.82) 100%),
               linear-gradient(180deg,rgba(11,16,22,.35) 0%,rgba(11,16,22,.6) 100%)}

  /* Partnersidan (bernisa-varvning): fotot fyller den tomma ytan uppe till vänster, stegen flyttar upp bredvid chatten */
  .sida > .dbild-varv{grid-column:1;grid-row:1;align-self:start;margin:10px 0 0}
  .sida:has(> .dbild-varv) .skal{grid-row:2 / span 2;margin-top:10px}
  /* Frågerutan i sidomenyn (FAQ): fältet får krympa så att knappen stannar inne i rutan */
  #chattFraga{min-width:0}
}

/* ===== Riktig datorlayout för Quando usar (startsidan) och Parceiros =====
   Birgitta 17/10: "ser ut som en mobilanpassad sida som ska funka på datorn – det ser billigt ut".
   Bara 900 px och bredare. Telefonen har kvar sin smala spalt. */
@media (min-width:900px){
  .app{max-width:1180px;padding-bottom:120px}
  .app .gut{padding-left:40px;padding-right:40px}
  .app .top{padding-block:16px}
  /* toppbilden går kant till kant, texten till vänster */
  .app .hero{width:100vw;margin-left:calc(50% - 50vw);min-height:640px;justify-content:center}
  .app .hero .in{max-width:none;padding:120px max(40px,calc((100vw - 1180px) / 2 + 40px)) 70px;gap:18px}
  .app .hero .in > *{max-width:600px}
  .app .hero h1{font-size:64px;line-height:1.02}
  .app .hero p{font-size:20px;max-width:44ch}
  .app .hero .fine{text-align:left}
  .app .pak a.pk{align-self:flex-start}
  .app .hero .btn{align-self:flex-start;min-width:340px;min-height:62px;font-size:19px}
  .app .hero img{filter:blur(1.5px) brightness(.62);object-position:70% 30%}
  .app .hero::after{background:linear-gradient(90deg,rgba(11,16,22,.96) 0%,rgba(11,16,22,.85) 35%,rgba(11,16,22,.35) 70%,rgba(11,16,22,.2) 100%),
                    linear-gradient(to bottom,rgba(11,16,22,0) 70%,var(--bg) 100%)}
  .app .strip{gap:18px;padding-block:30px 8px}
  .app .strip div{flex-direction:row;align-items:center;gap:14px;padding:20px 22px;border-radius:20px}
  .app .strip svg{width:28px;height:28px;flex:0 0 28px}
  .app .strip span{font-size:18px}
  .app .strip b{font-size:30px}
  .app .sec{padding-block:72px 22px}
  .app .sec h2{font-size:44px;max-width:22ch}
  .app .sec p{font-size:19px;max-width:60ch}
  /* Quando usar: paketen, situationerna och reglerna i rader */
  .app .paks{gap:24px}
  .app .pak{padding:28px 26px;gap:12px;border-radius:24px}
  .app .pak .q{font-size:26px}
  .app .pak .pr{font-size:38px}
  .app .pak p,.app .pak ul{font-size:18px}
  /* samma mörka, varma ton på fotona som på resten av sajten */
  .app .sit .ph img,.app .howph img,.app .banner img{filter:saturate(.78) brightness(.8) contrast(1.05)}
  .app .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
  .app .sit{display:flex;flex-direction:column}
  .app .sit .body{flex:1}
  .app .sit .body > .wa{margin-top:auto}
  .app .sit h3{font-size:26px}
  .app .rail{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:4px 0 16px;gap:20px}
  .app .rule{flex:none;min-height:0}
  .app .hint{display:none}
  .app .banner{min-height:380px;margin-top:40px}
  .app .banner .in{padding:40px;max-width:640px}
  .app .banner h3{font-size:36px}
  .app .banner p{font-size:20px}
  .app .sos{margin-top:24px;padding:22px 26px}
  .app .howph{float:left;width:46%;aspect-ratio:4/3;margin:8px 4% 24px 0}
  .app .howph ~ .steps,.app .howph ~ .consent{margin-left:50%}
  .app .step h3{font-size:22px}
  .app .foot{clear:both;padding-top:60px}
  .bar .in{max-width:1180px}
  /* Parceiros: formuläret till höger, det andra till vänster */
  .app > .gut:has(> #form){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:64px;align-items:start}
  .app > .gut:has(> #form) > *{grid-column:1}
  .app > .gut:has(> #form) > .strip,.app > .gut:has(> #form) > .foot{grid-column:1 / -1}
  .app > .gut:has(> #form) > #inscricao{grid-column:2;grid-row:2;padding-top:56px}
  .app > .gut:has(> #form) > #form{grid-column:2;grid-row:3 / span 5;padding:26px;gap:16px}
  .app > .gut:has(> #form) > .sec:has(+ .temas){grid-row:2;padding-top:56px}
  .app > .gut:has(> #form) > .temas{grid-row:3}
  .app > .gut:has(> #form) > .sec:has(+ .steps){grid-row:4;padding-top:48px}
  .app > .gut:has(> #form) > .steps{grid-row:5}
  .app > .gut:has(> #form) > .nota{grid-row:6;align-self:start}
  .app > .gut:has(> #form) > .foot{grid-row:8}
  .app .temas span{font-size:17px;padding:10px 16px}
}

/* Birgitta 17/10: "den gula ramen runt texten ser billig ut" och teckningarna är "barnsliga" (bara dator) */
@media (min-width:900px){
  /* formulärrutan på /verificar och /empresas: diskret kant och skugga i stället för gul ram */
  .cartao{border:1px solid rgba(255,255,255,.10)!important;background:linear-gradient(180deg,#1A2430 0%,#151D27 100%)!important;
    box-shadow:0 24px 60px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)!important}
  /* gula remsan överst på korten (lösenord, aktivera, köp klart) */
  .card::before,.cartao::before{content:none!important;display:none!important}
  /* de gamla tecknade bilderna ersätts av foton */
  .ilustra{display:none!important}
}