/* =====================================================================
   Manual da Cultura Familiar — Karol Rocha
   Design system: paleta pastel quente, editorial e elegante.
   ===================================================================== */

:root{
  /* Paleta quente extraída do material da Karol */
  --cream:      #f7f3ec;
  --cream-2:    #fbf8f2;
  --paper:      #fffdf9;
  --line:       #ece3d5;
  --line-2:     #e3d7c4;

  --caramel:    #b08d6a;   /* acento principal */
  --caramel-d:  #9a7a55;   /* acento escuro (hover) */
  --sand:       #d9b38c;
  --blush:      #e8d3bf;

  --ink:        #3d342b;   /* títulos */
  --ink-2:      #5c4f42;   /* texto */
  --muted:      #a08a72;   /* apoio */

  --ok:         #6f8f6a;
  --err:        #b4634f;

  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 18px 50px -24px rgba(80,58,34,.35);
  --shadow-sm:  0 8px 24px -14px rgba(80,58,34,.30);

  --serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
/* Nunca rolar na horizontal: a decoração é position:fixed com offset negativo e SVG
   overflow:visible; sem isto ela "vaza" pra fora da tela no celular, o navegador alarga
   o viewport e as media queries de mobile deixam de valer (folhas gigantes fora do lugar). */
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  max-width:100%;
  font-family:var(--sans);
  color:var(--ink-2);
  background:
    radial-gradient(1200px 600px at 100% -10%, #fdf6ea 0%, transparent 60%),
    radial-gradient(900px 500px at -10% 110%, #f3ead9 0%, transparent 55%),
    var(--cream);
  line-height:1.6;
  min-height:100vh;
}

h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:.2px; }
h1{ font-size:clamp(2rem,4.5vw,3.2rem); }
h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
h3{ font-size:1.3rem; }
p{ margin:0 0 1rem; }
a{ color:var(--caramel-d); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{ width:min(1080px,92vw); margin-inline:auto; position:relative; z-index:1; }
.narrow{ width:min(560px,92vw); margin-inline:auto; }

/* ---- Decoração botânica ambiente (dashboard / admin) --------------- */
.ambient{ position:fixed; width:190px; height:190px; z-index:0; pointer-events:none; opacity:.32; overflow:hidden; }
.ambient svg{ width:100%; height:100%; overflow:visible; display:block;
  animation:windSway 15s ease-in-out infinite alternate; transform-origin:14% 6%; }
.ambient-tr{ top:-16px; right:-16px; transform:scaleX(-1); }
.ambient-bl{ bottom:-16px; left:-16px; transform:scaleY(-1); }
.ambient-tr svg{ animation-delay:-6s; }
.ambient .leaf{ transform-box:fill-box; transform-origin:left center;
  animation:leafSway var(--d,8s) ease-in-out infinite alternate; animation-delay:calc(var(--dl,0s) * -1); }
@keyframes leafSway{ from{ transform:rotate(calc(var(--amp,6deg) * -1)); } to{ transform:rotate(var(--amp,6deg)); } }
@keyframes windSway{ 0%{ transform:rotate(-2deg) translateX(-2px); } 50%{ transform:rotate(.6deg) translateX(1px); } 100%{ transform:rotate(2.4deg) translateX(3px); } }
@media (max-width:720px){
  .ambient{ width:96px; height:96px; opacity:.16; }
  .ambient-bl{ display:none; } /* evita a folha "solta" no meio do conteúdo no celular */
}
@media (prefers-reduced-motion:reduce){ .ambient svg, .ambient .leaf{ animation:none !important; } }

.eyebrow{
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.28em;
  font-size:.72rem; font-weight:600; color:var(--caramel); margin-bottom:.9rem;
}
.serif-accent{ font-family:var(--serif); font-style:italic; color:var(--caramel-d); }
.divider{ width:64px; height:2px; background:var(--caramel); border:0; margin:1.4rem 0; }
.text-center{ text-align:center; }
.text-center .divider{ margin-inline:auto; }
.muted{ color:var(--muted); }

/* ---- Botões --------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  padding:.85rem 1.6rem; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-decoration:none; line-height:1;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn-primary{ background:var(--caramel); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--caramel-d); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn-ghost:hover{ background:var(--cream-2); }
.btn-light{ background:var(--paper); color:var(--ink); border-color:var(--line-2); }
.btn-lg{ padding:1rem 2rem; font-size:1.05rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

/* ---- Cartões -------------------------------------------------------- */
.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-sm);
  padding:clamp(1.5rem,4vw,2.6rem);
}

/* ---- Topo / navegação ---------------------------------------------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 0;
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand img{ height:52px; width:auto; }
.brand .brand-name{ font-family:var(--serif); font-size:1.15rem; color:var(--ink); line-height:1.1; }
.brand .brand-name small{ display:block; font-family:var(--sans); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.nav-links{ display:flex; align-items:center; gap:1.4rem; }
.nav-links a{ color:var(--ink-2); font-size:.95rem; }

/* ---- Hero landing --------------------------------------------------- */
.hero{ padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(2rem,5vw,4rem); }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.5rem,5vw,4rem); align-items:center; }
.hero h1{ margin-bottom:.3rem; }
.hero .lede{ font-size:1.12rem; color:var(--ink-2); max-width:44ch; }
.hero-cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.6rem; }
.hero-art{
  position:relative; border-radius:22px; overflow:hidden;
  aspect-ratio:4/5; background:linear-gradient(160deg,#efe2cf,#e7d2b8);
  box-shadow:var(--shadow); border:1px solid var(--line);
}
.hero-art .quote{
  position:absolute; inset:auto 1.6rem 1.6rem; color:#5a4a38;
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
}
.hero-emblem{
  display:flex; align-items:center; justify-content:center; height:100%;
}
.hero-emblem img{ width:66%; opacity:.92; }

.feature-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3rem; }
.feature{ background:var(--cream-2); border:1px solid var(--line); border-radius:var(--radius); padding:1.4rem 1.4rem 1.2rem; }
.feature .num{ font-family:var(--serif); font-size:1.6rem; color:var(--caramel); }
.feature h3{ font-size:1.05rem; margin:.3rem 0 .3rem; }
.feature p{ font-size:.92rem; margin:0; color:var(--ink-2); }

/* ---- Formulários (auth) -------------------------------------------- */
.auth-wrap{ min-height:100vh; display:grid; place-items:center; padding:2.5rem 0; }
.auth-card{ width:min(430px,92vw); }
.auth-card .brand{ justify-content:center; margin-bottom:1.4rem; }
.form-group{ margin-bottom:1.1rem; }
label.field-label{ display:block; font-weight:600; color:var(--ink); margin-bottom:.4rem; font-size:.95rem; }
.hint{ font-size:.85rem; color:var(--muted); margin-top:.35rem; }
.input, .textarea, select.input{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:var(--cream-2); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.8rem .95rem; transition:border-color .15s, box-shadow .15s, background .15s;
}
.input:focus, .textarea:focus, select.input:focus{
  outline:none; border-color:var(--caramel); background:#fff;
  box-shadow:0 0 0 4px rgba(176,141,106,.14);
}
.textarea{ min-height:130px; resize:vertical; line-height:1.6; }
.form-row{ display:flex; gap:1rem; }
.form-row > *{ flex:1; }
.checkbox-row{ display:flex; align-items:flex-start; gap:.6rem; font-size:.95rem; }
.checkbox-row input{ margin-top:.25rem; width:18px; height:18px; accent-color:var(--caramel); }
.form-foot{ margin-top:1.3rem; text-align:center; font-size:.92rem; }

/* Password toggle */
.pw-wrap{ position:relative; }
.pw-wrap .pw-toggle{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:var(--muted); font-size:.85rem; padding:.3rem .5rem;
}

/* ---- Alerts / flash ------------------------------------------------- */
.alert{ border-radius:var(--radius-sm); padding:.85rem 1.05rem; margin-bottom:1.1rem; font-size:.95rem; border:1px solid; }
.alert-success{ background:#eef4ec; border-color:#cfe0ca; color:#43603c; }
.alert-error{ background:#f8ece8; border-color:#e8cabf; color:#8f4234; }
.alert-info{ background:#f4eee2; border-color:#e6d8bf; color:#7a6647; }

/* ---- Dashboard ------------------------------------------------------ */
.page{ padding:2.5rem 0 4rem; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.8rem; }
.manual-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.3rem; }
.manual-card{ display:flex; flex-direction:column; gap:.6rem; }
.manual-card .status{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; padding:.25rem .7rem; border-radius:999px; width:fit-content; }
.status-draft{ background:#f4ead6; color:#9a7a3f; }
.status-completed{ background:#e7efe3; color:#4d6b45; }
.progress{ height:8px; border-radius:999px; background:var(--line); overflow:hidden; }
.progress > span{ display:block; height:100%; background:linear-gradient(90deg,var(--sand),var(--caramel)); }
.card-actions{ display:flex; gap:.6rem; margin-top:.4rem; flex-wrap:wrap; }
.empty{ text-align:center; padding:3rem 1rem; color:var(--muted); }

/* botões menores e de ação destrutiva */
.btn-sm{ padding:.45rem .85rem; font-size:.85rem; }
.btn-danger{ background:var(--err); color:#fff; border-color:transparent; }
.btn-danger:hover{ filter:brightness(.94); }

/* foto de capa: quadro fixo (16/10) onde a imagem é recortada para caber */
.cover-upload{ margin:0; }
.cover-box{ position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden;
  border:1.5px dashed var(--line-2); border-radius:12px; background:var(--cream-2); cursor:pointer;
  transition:border-color .15s, background .15s; }
.cover-box:hover{ border-color:var(--caramel); background:#fbf6ee; }
.cover-box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.cover-hint{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; color:var(--muted); font-size:.85rem; font-weight:600; text-align:center; padding:.5rem; }
.cover-box .cover-ico{ font-size:1.4rem; line-height:1; }
/* com foto: o texto some, e reaparece (sobre um véu) ao passar o mouse para trocar */
.cover-box.has-photo .cover-hint{ opacity:0; background:rgba(45,35,25,.42); color:#fff; transition:opacity .15s; }
.cover-box.has-photo:hover .cover-hint{ opacity:1; }
.cover-remove{ margin:.4rem 0 0; text-align:center; }
.link-quiet{ background:none; border:0; padding:0; color:var(--muted); font:inherit; font-size:.85rem; text-decoration:underline; cursor:pointer; }
.link-quiet:hover{ color:var(--caramel-d); }

/* "ferramentas" recolhíveis dentro do card (compartilhar) */
.card-tool{ border-top:1px solid var(--line); padding-top:.6rem; }
.card-tool > summary{ cursor:pointer; font-weight:600; color:var(--caramel-d); font-size:.9rem; list-style:none; }
.card-tool > summary::-webkit-details-marker{ display:none; }
.card-tool > summary::before{ content:"+ "; color:var(--muted); font-weight:700; }
.card-tool[open] > summary::before{ content:"\2013 "; }
.card-tool[open] > summary{ margin-bottom:.5rem; }
.share-row{ display:flex; gap:.5rem; align-items:center; }
.share-link{ font-size:.8rem; padding:.5rem .6rem; }
.share-actions{ display:flex; gap:.6rem; margin-top:.5rem; flex-wrap:wrap; }

/* zona de perigo (excluir conta) */
.danger-zone{ border:1px solid #e6c9c0; background:#fdf6f4; }
.danger-zone h3{ color:var(--err); }

/* ---- Footer --------------------------------------------------------- */
.site-footer{ border-top:1px solid var(--line); margin-top:3rem; padding:1.8rem 0; color:var(--muted); font-size:.88rem; text-align:center; }

/* ---- Utilitários ---------------------------------------------------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:1.2rem}.stack>*+*{margin-top:1rem}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---- Responsivo ----------------------------------------------------- */
@media (max-width:820px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; aspect-ratio:16/10; }
  .feature-row{ grid-template-columns:1fr; }
  .form-row{ flex-direction:column; }
  .nav-links a.hide-sm{ display:none; }
}