/*
Theme Name: Camaleonica
Theme URI: https://camaleonica.music
Author: Camaleônica
Author URI: https://camaleonica.music
Description: Tema one-page para a banda Camaleônica — trio de música brasileira baseado no Rio de Janeiro e em Barcelona.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: camaleonica
*/


  :root{
    --bg:#0d0805;
    --bg-deep:#150c08;
    --duotone-1:#5c1a10;
    --duotone-2:#170906;
    --gold:#dba52f;
    --gold-soft:#e8c26a;
    --terracotta:#d85a2a;
    --cream:#f2e8d8;
    --cream-dim:#b8ab93;
    --line:rgba(242,232,216,0.14);
    --font-display:'Anton', sans-serif;
    --font-voice:'DM Serif Display', serif;
    --font-body:'Work Sans', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg);
    color:var(--cream);
    font-family:var(--font-body);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .duotone{position:relative; overflow:hidden; background:linear-gradient(160deg,var(--duotone-1),var(--duotone-2));}
  .duotone::after{
    content:'';
    position:absolute; inset:0;
    background:
      radial-gradient(circle at 25% 20%, rgba(216,90,42,0.5), transparent 55%),
      radial-gradient(circle at 80% 80%, rgba(219,165,47,0.16), transparent 55%);
  }

  /* header */
  .site-header{
    position:sticky; top:0; z-index:50;
    background:rgba(13,8,5,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .header-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    gap:20px;
    flex-wrap:wrap;
  }
  .brand-block{display:flex; align-items:center; gap:12px;}
  .mark{font-family:var(--font-display); font-size:18px; letter-spacing:2px; color:var(--cream);}
  .listen-badge{
    display:flex; align-items:center; gap:6px;
    font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
    color:var(--gold);
    border:1px solid var(--gold);
    border-radius:999px;
    padding:4px 10px 4px 8px;
    text-decoration:none;
  }
  .listen-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}

  nav.main-nav{
    display:flex; gap:24px;
    flex-wrap:wrap;
  }
  nav.main-nav a{
    font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase;
    color:var(--cream-dim); text-decoration:none;
  }
  nav.main-nav a:hover{color:var(--gold);}

  .header-right{display:flex; align-items:center; gap:18px;}
  .socials-inline{display:flex; gap:12px;}
  .socials-inline a{
    width:26px; height:26px; border-radius:50%;
    border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; color:var(--cream-dim); text-decoration:none;
  }
  .lang{display:flex; gap:10px; font-size:11px; letter-spacing:1px;}
  .lang span{cursor:pointer; color:var(--cream-dim);}
  .lang span.active{color:var(--gold);}

  /* section shell */
  section.chapter{
    min-height:100vh;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    position:relative;
  }
  .chapter-num{
    position:absolute; top:24px; left:28px;
    font-size:12px; font-weight:600;
    color:var(--gold-soft); letter-spacing:2px;
    z-index:3;
  }
  .chapter-num span{color:var(--cream-dim); font-weight:400;}

  /* hero — same anchored-callout logic as "o show" */
  .hero-callout{
    position:relative; z-index:3;
    background:var(--bg);
    border-top:1px solid var(--gold);
    padding:36px 28px 52px;
    max-width:680px;
  }
  .hero-callout .label{
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    color:var(--terracotta); font-weight:700; margin-bottom:12px;
  }
  .hero-callout h1{
    font-family:var(--font-display);
    font-size:clamp(32px,6vw,58px);
    text-transform:uppercase;
    color:var(--cream);
    line-height:1.03;
    margin-bottom:18px;
  }
  .hero-callout h1 em{font-style:normal; color:var(--gold);}
  .hero-callout p{color:var(--cream-dim); font-size:15px; max-width:56ch;}

  /* quote chapter */
  .quote-chapter{
    justify-content:center;
    align-items:flex-start;
    background:var(--bg-deep);
    padding:120px 28px;
  }
  .quote-chapter blockquote{
    font-family:var(--font-voice);
    font-style:italic;
    font-size:clamp(24px, 4.2vw, 42px);
    line-height:1.28;
    color:var(--gold-soft);
    max-width:18ch;
  }
  .quote-attrib{
    margin-top:24px;
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    color:var(--cream-dim);
  }

  /* show chapter — the one you liked */
  .show-callout{
    position:relative; z-index:3;
    background:var(--bg);
    border-top:1px solid var(--gold);
    padding:40px 28px 56px;
    max-width:620px;
  }
  .show-callout .label{
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    color:var(--terracotta); font-weight:700; margin-bottom:12px;
  }
  .show-callout h2{
    font-family:var(--font-display);
    font-size:clamp(28px,5vw,46px);
    text-transform:uppercase;
    color:var(--cream);
    margin-bottom:18px;
    line-height:1.03;
  }
  .show-callout p{color:var(--cream-dim); font-size:15px; max-width:52ch; margin-bottom:14px;}
  .btn{
    display:inline-block;
    font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase;
    padding:13px 26px; border-radius:999px;
    background:var(--terracotta); color:#1c0c02; text-decoration:none;
  }

  /* formacao */
  .formacao-chapter{
    background:var(--bg-deep);
    justify-content:center;
    padding:100px 28px;
  }
  .formacao-head{
    font-family:var(--font-display);
    font-size:clamp(26px,4vw,40px);
    color:var(--gold);
    text-transform:uppercase;
    margin-bottom:44px;
  }
  .formacao-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:28px;
  }
  @media(min-width:760px){ .formacao-grid{grid-template-columns:repeat(3,1fr);} }
  .formacao-card{border-top:1px solid var(--line); padding-top:18px;}
  .formacao-card .n{font-family:var(--font-display); font-size:13px; color:var(--terracotta); margin-bottom:10px;}
  .formacao-card h3{font-size:20px; font-weight:600; color:var(--cream); margin-bottom:4px;}
  .formacao-card p{font-size:13px; color:var(--cream-dim);}

  /* closing chapter — band-forward, not album-forward */
  .closing-chapter{
    justify-content:flex-end;
    padding:0;
  }
  .closing-callout{
    position:relative; z-index:3;
    background:var(--bg);
    border-top:1px solid var(--gold);
    padding:40px 28px 56px;
    max-width:600px;
    display:flex; flex-direction:column; gap:18px; align-items:flex-start;
  }
  .closing-callout .label{
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    color:var(--terracotta); font-weight:700;
  }
  .closing-callout h2{
    font-family:var(--font-display);
    font-size:clamp(26px,4.5vw,42px);
    text-transform:uppercase;
    color:var(--cream);
    line-height:1.05;
  }
  .btn-row{display:flex; gap:12px; flex-wrap:wrap;}
  .btn-outline{
    display:inline-block;
    font-weight:700; font-size:13px; letter-spacing:1px; text-transform:uppercase;
    padding:12px 24px; border-radius:999px;
    border:1px solid var(--gold); color:var(--gold); text-decoration:none;
  }
  .video-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; width:100%;}
  @media(min-width:600px){ .video-grid{grid-template-columns:repeat(3,1fr);} }
  @media(min-width:900px){ .video-grid{grid-template-columns:repeat(5,1fr);} }

  .duotone-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  @media(max-width:600px){
    section.chapter{ min-height:auto; aspect-ratio:3/4; }
    #sobre .duotone-img{ object-position: center 20%; }
  }

  .split-grid{display:grid; grid-template-columns:1fr;}
  .split-photo{position:relative; overflow:hidden; min-height:360px;}
  .split-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
  .split-photo::after{content:''; position:absolute; inset:0; z-index:1; background: radial-gradient(circle at 25% 20%, rgba(216,90,42,0.5), transparent 55%), radial-gradient(circle at 80% 80%, rgba(219,165,47,0.16), transparent 55%);}
  .split-text{padding:56px 28px; display:flex; flex-direction:column; justify-content:center; background:var(--bg);}
  @media(min-width:900px){ .split-text{padding:56px;}
    .split-grid{grid-template-columns:1fr 1fr; min-height:82vh;}
    .split-grid.photo-right .split-photo{order:2;}
    .split-grid.photo-right .split-text{order:1;}
  }
  .split-text .label{font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--terracotta); font-weight:700; margin-bottom:16px;}
  .split-text .voice-line{font-family:var(--font-voice); font-style:italic; font-weight:400; color:var(--gold-soft); font-size:clamp(22px,3.4vw,32px); line-height:1.3; margin-bottom:18px; max-width:20ch;}
  .split-text p{color:var(--cream-dim); font-size:15px; max-width:52ch; margin-bottom:14px;}

  /* compact variant — used where there's little copy, so the block doesn't need full viewport height */
  .split-grid.compact-block .split-photo{min-height:280px;}
  .split-grid.compact-block .split-text{padding:40px 28px;}
  .split-grid.compact-block .split-photo img{transform:scale(1.15);}
  @media(min-width:900px){
    .split-grid.compact-block{min-height:56vh;}
    .split-grid.compact-block .split-text{padding:40px 56px;}
  }

  .closing-grid{display:grid; grid-template-columns:1fr; background:var(--bg-deep); border-top:1px solid var(--line);}
  .closing-art{aspect-ratio:1/1; overflow:hidden; max-height:70vh;}
  .closing-art img{width:100%; height:100%; object-fit:cover; object-position:center; display:block;}
  .closing-grid.compact-block .closing-art{max-height:44vh;}
  .closing-grid.compact-block .closing-art img{transform:scale(1.15); transform-origin:center;}
  .closing-grid.compact-block .closing-text2{padding:36px 28px;}
  @media(min-width:860px){ .closing-grid.compact-block .closing-text2{padding:40px 56px;} }
  .closing-text2{padding:48px 28px; display:flex; flex-direction:column; justify-content:center; gap:18px; align-items:flex-start;}
  @media(min-width:860px){ .closing-grid{grid-template-columns:minmax(280px,460px) 1fr;} .closing-text2{padding:56px;} }

  /* novidades */
  .post-grid{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:32px;}
  @media(min-width:640px){ .post-grid{grid-template-columns:repeat(3,1fr);} }
  .post-card{display:flex; flex-direction:column;}
  .post-thumb{aspect-ratio:4/3; border-radius:4px; margin-bottom:16px;}
  .post-meta{font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--terracotta); font-weight:700; margin-bottom:8px;}
  .post-card h3{font-size:17px; font-weight:600; color:var(--cream); margin-bottom:8px; line-height:1.3;}
  .post-card p{font-size:13px; color:var(--cream-dim); margin-bottom:10px;}
  .read-link{font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--gold); text-decoration:none;}