@charset "UTF-8";




:root{

  /* Fundo inspirado no pôster:
     Preto profundo → azul petróleo escuro */
  --bg: linear-gradient(180deg, #050505 0%, #003b46 100%);

  /* Textos */
  --accent: #e7f9fb; 
  --muted: rgba(231,249,251,0.7);
  --max-w: 1100px;

  /* Pills */
  --pill-bg: #055f6a;
  --pill-border: rgba(247,208,56,0.25);
  --pill-hover: #03707c;
  --pill-active: #02444d;

  /* Links */
  --link: #f7d038;
  --link-hover: #ffec7a;
  --link-active: #d8b728;

  /* TEXT AREA (fundo azul petróleo claro translúcido) */
  --text-area-bg: rgba(5,95,106,0.25);
  --text-area-border: rgba(255,255,255,0.08);

  /* IMG BOX – inspirado no tom ciano/azul da arte */
  --imgbox-bg: linear-gradient(180deg, #37d5d3 0%, #055f6a 100%);
  --imgbox-overlay: rgba(0,0,0,0.08);

  --card-shadow: 0 6px 18px rgba(0,0,0,0.25);

  --gap-desktop: 40px;
  --gap-tablet: 28px;
  --gap-mobile: 14px;

  --pill-min-height: 44px;
  --font-base: 16px;

  --fast: .12s;
  --mid: .18s;
}

/* Reset / base */
*{ box-sizing: border-box; }
html, body{
  height:100%;
  overflow-x:hidden;
}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg);
  color:var(--accent);
  line-height:1.35;
  font-size:var(--font-base);
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-tap-highlight-color: transparent;
  cursor: url("./imagens/pontinhacredito.cur"), auto;
}

/* Main wrapper */
.wrap{
  width:100%;
  max-width:var(--max-w);
  padding:30px 16px;
  display:flex;
  gap:var(--gap-desktop);
  align-items:center;
  justify-content:center;
  flex:1;
  margin:0 auto;
}
.wrap > *{ min-width:0; }

/* Left Image */
.portrait{
  flex:0 0 360px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.imgbox{
  width:320px;
  height:320px;
  border-radius:16px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--card-shadow);
  background:var(--imgbox-bg);
  position:relative;
  transition: transform var(--mid), box-shadow var(--mid);
  border:2px solid rgba(255,255,255,0.05);
}

.imgbox::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--imgbox-overlay);
}

.img-desktop{
  width:100%;
  height:100%;
  object-fit:cover;
}

.img-mobile{
  display:none;
}

/* Hover */
.imgbox:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}
.imgbox:active{
  transform: translateY(-2px) scale(.995);
}

/* Right content */
.content{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:18px;
  justify-content:center;
}

.title{ display:flex; flex-direction:column; gap:6px; }

.name{
  font-size:34px;
  font-weight:700;
  color:var(--accent);
}

.meta{
  color:var(--muted);
  font-size:13px;
}

/* Buttons (pills) */
.pills{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px 18px;
  width:100%;
}

.pill{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  min-height:var(--pill-min-height);
  border-radius:999px;
  text-decoration:none;
  background:var(--pill-bg);
  border:2px solid var(--pill-border);
  font-weight:600;
  color:var(--accent);
  box-shadow:var(--card-shadow);
  transition: var(--fast);
  cursor:pointer;
}

.pill:hover{
  transform:translateY(-4px);
  background:var(--pill-hover);
}
.pill:active{
  transform:translateY(-1px) scale(.995);
  background:var(--pill-active);
}

/* TEXT AREA */
.text-area{
  border:2px solid var(--text-area-border);
  font-family: "Kalam", cursive;
  text-align: justify;
  background:var(--text-area-bg);
  padding:18px;
  border-radius:10px;
  font-size:15px;
  line-height:1.45;
  color:var(--accent);
}

.text-area:focus-within{
  transform: translateY(-4px);
}

/* Footer */
.footer{
  width:100%;
  text-align:center;
  padding:16px 0;
  font-size:14px;
  color:var(--muted);
}

/* LINKS */
a{
  color:var(--link);
  text-decoration:none;
  transition: color var(--fast) ease, transform var(--fast) ease;
}

a:hover,
a:focus{
  color:var(--link-hover);
  transform: translateY(-2px);
  cursor: url("./imagens/cursorCREDITO02.png"), auto;
}

a:active{
  color:var(--link-active);
  transform: scale(.97);
  opacity:.9;
}

/* ================= Responsividade ================= */

@media (max-width: 620px){

  .wrap{
    flex-direction:column;
    gap:18px;
  }

  .portrait{ order:-1; }

  .img-desktop{ display:none; }
  .img-mobile{
    display:block;
    width:100%;
    max-width:420px;
  }

  .content{
    align-items:center;
    text-align:center;
  }

  .pills{
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 360px){
  .pill{
    padding:10px 8px;
    font-size:12px;
  }
}