/* 
   Base
 */

:root{
  --amarelo:#f7d736;
  --cinza-escuro:#2c2c2c;
  --cinza:#4c4c4c;
  --bg:#f5f6f8;
}

html, body{
  height:100%;
}

body{
  font-family:'Roboto', sans-serif;
  color:var(--cinza-escuro);
  background:var(--bg);
  line-height:1.25;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size: 1em;
}


/* 
   App Bar (logo, subtítulo)
 */

.appbar{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.75rem 1rem;
  background: var(--amarelo);                 
  box-shadow: 0 2px 6px rgba(0,0,0,.25);      
  position: sticky;
  top: 0;
  z-index: 10;
}

.logo{
  width: 42px;                               
  height: auto;
  display:block;
}

.subtitle{
  font-size: .98rem;
  color: var(--cinza-escuro);
}

/* 
   Cartão do Formulário
 */

.form-card{
  max-width: 460px;
  margin: 24px auto;                          /* centraliza */
  padding: 16px;
  background:#fff;
  border-radius: 12px;                         /* cantos arredondados */
  box-shadow: 0 4px 16px rgba(0,0,0,.15);      /* sombra do cartão */
  display:flex;
  flex-direction:column;
  gap:12px;
}

.form-card-title,
.autoresize{
  width:90%;
  font: 1rem/1.3 'Roboto', sans-serif;
  padding: 10px 12px;
  border:none;                                 /* sem bordas */
  outline:none;
  background:white;
  border-radius:10px;
  color:var(--cinza-escuro);
}

.form-card-title::placeholder,
.autoresize::placeholder{
  color: var(--cinza);
  opacity:.7;
}

.btn{
  padding:10px 16px;
  border:none;
  border-radius:10px;
  background:var(--amarelo);
  color:#1f1f1f;
  font-weight:700;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition: transform .05s ease, box-shadow .15s ease, filter .15s ease;
  position: relative;
  overflow: hidden; 
}

.btn:hover{ box-shadow:0 4px 12px rgba(0,0,0,.25); filter:brightness(1.02); }
.btn:active{ transform: translateY(1px); }

.btn::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:0; height:0;
  border-radius:100%;
  background-color:rgba(236,240,241,0.35);
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, opacity .3s ease;
  pointer-events:none;
}

.btn:active::before{
  width: 220%;
  height: 220%;
  opacity:0;
}

/* 
   Cartões
 */

.container{
  max-width: 95%;
  margin: 0 auto;
  padding: 16px;
}

.card-container{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-evenly;
  gap: 1em;
}

.card{
  /* sem width/max-width necessários */
  border-radius: 12px;
  font-family:'Permanent Marker', cursive;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
  padding: .5rem;
  line-height: 1.4;
  width: 15em;
  height: 10em;
}


.card-title{ 
  margin-bottom: 8px; 
  font-family:'Permanent Marker', cursive; 
  font-size:1.08rem; 
  color:#1f1f1f; }

.card-content p {
  font-family:'Permanent Marker', cursive; 
  color: var(--cinza);
  line-height: 1.4;
  word-break: break-word;  /* força quebra em palavras longas */
  overflow-wrap: break-word; /* compatibilidade extra */
  margin: 0;               /* remove margens extras */
  padding: 0;     
  text-align: center;         
}


.card-color-1{ background:#ead3a7; }  /* bege */
.card-color-2{ background:#9de0f5; }  /* azul */
.card-color-3{ background:#ef89ba; }  /* rosa */
.card-color-4{ background:#fae890; }  /* amarelo */
.card-color-5{ background:#abe9c1; }  /* verde */


.card-rotation-1  { transform: rotate(-4deg); }
.card-rotation-2  { transform: rotate( 3deg); }
.card-rotation-3  { transform: rotate(-2deg); }
.card-rotation-4  { transform: rotate( 2deg); }
.card-rotation-5  { transform: rotate(-3deg); }
.card-rotation-6  { transform: rotate( 1deg); }
.card-rotation-7  { transform: rotate(-1deg); }
.card-rotation-8  { transform: rotate( 4deg); }
.card-rotation-9  { transform: rotate(-2.5deg); }
.card-rotation-10 { transform: rotate( 2.5deg); }
.card-rotation-11 { transform: rotate( 0deg); }