/*
Theme Name: Ramon Oliveira Hair Excellence
Theme URI: https://ramonoliveirahair.com.br
Author: Ramon Oliveira Hair Excellence
Author URI: https://ramonoliveirahair.com.br
Description: Tema WordPress personalizado (one-page) para o salão Ramon Oliveira Hair Excellence, em Belém - PA. Estética editorial com mechas, tons café/dourado envelhecido.
Version: 1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ramonoliveirahair
*/

  :root{
    --cream:#F4EEE2;
    --cream-2:#EAE1CD;
    --espresso:#332014;
    --chocolate:#5B3A22;
    --gold:#A9803F;
    --gold-light:#C9A468;
    --line:rgba(51,32,20,0.14);
    --paper:#FBF8F1;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--cream);
    color:var(--espresso);
    font-family:'Jost', sans-serif;
    font-weight:300;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  .eyebrow{
    font-family:'Jost',sans-serif;
    font-size:12px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
  }
  h1,h2,h3,.serif{font-family:'Playfair Display', serif; font-weight:500;}
  .script{font-family:'Cormorant Garamond', serif; font-style:italic; font-weight:400;}

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    display:flex; align-items:center; justify-content:space-between;
    padding:22px 5%;
    background:linear-gradient(180deg, rgba(20,12,7,0.45), rgba(20,12,7,0));
    transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  }
  header.scrolled{
    background:rgba(36,18,9,0.92);
    backdrop-filter:blur(8px);
    padding:14px 5%;
    box-shadow:0 1px 0 rgba(0,0,0,0.2);
  }
  .brand-mark{display:flex; align-items:center; gap:10px;}
  .brand-mark .rlogo{
    font-family:'Playfair Display',serif; font-size:20px; letter-spacing:0.05em;
    color:#fff; display:flex; flex-direction:column; line-height:1.05;
  }
  .nav-links{display:flex; gap:32px; align-items:center;}
  .nav-links a{
    font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; font-weight:500;
    position:relative; padding-bottom:4px; color:#fff;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:0%;
    background:var(--gold-light); transition:width .35s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-instagram{display:flex; align-items:center;}
  .nav-instagram svg{width:18px; height:18px; display:block;}
  .nav-instagram:hover{opacity:0.75;}
  .nav-cta{
    border:1px solid rgba(255,255,255,0.75); color:#fff;
    padding:10px 22px; font-size:12px; letter-spacing:0.14em;
    text-transform:uppercase; border-radius:2px; transition:all .3s ease;
  }
  .nav-cta:hover{background:#fff; color:var(--espresso);}
  .menu-toggle{display:none;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; height:100vh; min-height:640px; width:100%;
    color:#fff; overflow:hidden;
  }
  .hero img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    object-position:32% 20%;
    filter:saturate(1.02);
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(30,17,10,0.55) 0%, rgba(30,17,10,0.12) 32%, rgba(30,17,10,0.18) 60%, rgba(20,12,7,0.82) 100%);
    z-index:1;
  }
  .hero-content{
    position:relative; z-index:2; height:100%;
    display:flex; flex-direction:column; justify-content:flex-end;
    padding:0 5% 130px;
    max-width:900px;
  }
  .hero-eyebrow{
    letter-spacing:0.4em; font-size:12px; text-transform:uppercase; color:var(--gold-light);
    margin-bottom:18px; font-weight:500;
  }
  .hero h1{
    font-size:clamp(38px, 6vw, 74px);
    line-height:1.05;
    font-weight:500;
    text-shadow:0 2px 24px rgba(0,0,0,0.25);
  }
  .hero h1 em{font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:400; color:var(--gold-light);}
  .hero p{
    margin-top:22px; max-width:480px; font-size:16px; line-height:1.7; color:rgba(255,255,255,0.88); font-weight:300;
  }
  .hero-ctas{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:15px 30px; font-size:12.5px; letter-spacing:0.15em; text-transform:uppercase; font-weight:500;
    border-radius:2px; transition:all .3s ease; cursor:pointer; border:1px solid transparent;
  }
  .btn-gold{background:var(--gold); color:#fff;}
  .btn-gold:hover{background:var(--gold-light); transform:translateY(-1px);}
  .btn-ghost{border-color:rgba(255,255,255,0.7); color:#fff;}
  .btn-ghost:hover{background:rgba(255,255,255,0.12);}
  .btn-dark{background:var(--espresso); color:var(--cream);}
  .btn-dark:hover{background:var(--chocolate);}

  .scroll-cue{
    position:absolute; right:5%; bottom:38px; z-index:2; color:#fff;
    writing-mode:vertical-rl; font-size:11px; letter-spacing:0.3em; text-transform:uppercase;
    display:flex; align-items:center; gap:10px; opacity:0.85;
  }
  .scroll-cue .line{width:1px; height:46px; background:rgba(255,255,255,0.6);}

  /* ---------- MAGAZINE INSERT (signature element) ---------- */
  .insert-wrap{
    position:relative; max-width:1180px; margin:-150px auto 0; padding:0 5%; z-index:5;
  }
  .insert{
    background:var(--paper);
    box-shadow:0 30px 70px rgba(20,10,5,0.28);
    display:grid; grid-template-columns:0.9fr 1.4fr;
    border:1px solid var(--line);
  }
  .insert-photo{position:relative; overflow:hidden; min-height:420px;}
  .insert-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}
  .insert-text{padding:52px 54px; display:flex; flex-direction:column; justify-content:center;}
  .insert-kicker{
    display:flex; justify-content:space-between; align-items:center;
    font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--chocolate);
    border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:26px;
  }
  .insert-text h2{font-size:clamp(26px,3vw,36px); line-height:1.15; margin-bottom:6px;}
  .insert-text .script{font-size:20px; color:var(--gold); display:block; margin-bottom:20px;}
  .insert-text p{font-size:14.5px; line-height:1.85; color:#4b3626; font-weight:300; margin-bottom:14px;}
  .insert-sign{margin-top:10px; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:20px; color:var(--espresso);}

  /* ---------- SECTION generic ---------- */
  section{padding:150px 5% 90px;}
  .section-head{max-width:640px; margin:0 auto 64px; text-align:center;}
  .section-head .eyebrow{display:block; margin-bottom:14px;}
  .section-head h2{font-size:clamp(30px,4vw,46px); line-height:1.15;}
  .section-head p{margin-top:18px; font-size:15.5px; line-height:1.8; color:var(--chocolate); font-weight:300;}
  .center{text-align:center;}
  .divider{
    width:52px; height:1px; background:var(--gold); margin:22px auto;
  }

  /* ---------- SERVICES / MECHAS ---------- */
  .services{max-width:1180px; margin:0 auto;}
  .services-lead{
    display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-bottom:80px;
  }
  .services-lead p{font-size:15.5px; line-height:1.9; color:var(--chocolate); margin-bottom:16px; font-weight:300;}
  .services-lead h3{font-size:14px; letter-spacing:.08em;}
  .price-list{list-style:none; border-top:1px solid var(--line);}
  .price-item{
    display:flex; justify-content:space-between; align-items:center; gap:24px;
    padding:26px 0; border-bottom:1px solid var(--line);
  }
  .price-item .pi-name{font-family:'Playfair Display',serif; font-size:19px; font-weight:500;}
  .price-item .pi-desc{font-size:13px; color:var(--chocolate); margin-top:6px; line-height:1.6; font-weight:300; max-width:520px;}
  .pi-quote{
    flex-shrink:0; white-space:nowrap; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:500;
    border:1px solid var(--espresso); color:var(--espresso); padding:11px 22px; border-radius:2px; transition:all .3s ease;
  }
  .pi-quote:hover{background:var(--espresso); color:var(--cream); border-color:var(--espresso);}
  .price-item.featured{background:linear-gradient(90deg, rgba(169,128,63,0.06), transparent); padding-left:16px; padding-right:16px; margin:0 -16px;}
  .price-item.featured .pi-name::after{
    content:"MAIS PROCURADO"; font-size:9px; letter-spacing:.14em; margin-left:12px;
    background:var(--gold); color:#fff; padding:3px 8px; vertical-align:middle; font-family:'Jost',sans-serif; font-weight:500;
  }

  /* ---------- STORY / ABOUT ---------- */
  .story{
    background:var(--espresso); color:var(--cream); position:relative; overflow:hidden;
  }
  .story-grid{
    max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center;
  }
  .story-photos{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .story-photos img{width:100%; height:100%; object-fit:cover;}
  .story-photos .p1{aspect-ratio:3/4; margin-top:48px;}
  .story-photos .p2{aspect-ratio:3/4;}
  .story-copy .eyebrow{color:var(--gold-light);}
  .story-copy h2{font-size:clamp(28px,3.6vw,42px); margin:16px 0 24px; line-height:1.18;}
  .story-copy p{font-size:15px; line-height:1.9; color:rgba(244,238,226,0.82); font-weight:300; margin-bottom:16px;}
  .stat-row{display:flex; gap:48px; margin-top:38px;}
  .stat b{display:block; font-family:'Playfair Display',serif; font-size:34px; color:var(--gold-light);}
  .stat span{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(244,238,226,0.65);}

  /* ---------- GALLERY ---------- */
  .gallery-grid{
    max-width:1280px; margin:0 auto;
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  }
  .gallery-grid a{display:block; overflow:hidden; position:relative;}
  .gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1); aspect-ratio:3/4;}
  .gallery-grid a:hover img{transform:scale(1.06);}
  .gallery-grid a.tall{grid-row:span 2;}
  .gallery-grid a.tall img{aspect-ratio:auto; height:100%;}
  .gallery-grid a::after{
    content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
  }

  /* ---------- BOOKING INFO ---------- */
  .booking{background:var(--cream-2);}
  .booking-wrap{
    max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.1fr 0.9fr; gap:0;
    box-shadow:0 20px 60px rgba(20,10,5,0.12);
  }
  .booking-info{background:var(--paper); padding:64px 56px; border:1px solid var(--line); border-right:none;}
  .booking-info h2{font-size:28px; margin-bottom:8px;}
  .booking-info .script{color:var(--gold); font-size:18px; display:block; margin-bottom:28px;}
  .rules{list-style:none;}
  .rules li{display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line); font-size:14px; line-height:1.7; color:var(--chocolate); font-weight:300;}
  .rules li:last-child{border-bottom:1px solid var(--line);}
  .rules b{color:var(--espresso); font-weight:500; min-width:120px; display:inline-block; font-family:'Playfair Display',serif; font-size:14.5px;}
  .booking-photo{position:relative; min-height:100%;}
  .booking-photo img{width:100%; height:100%; object-fit:cover; object-position:center 20%;}

  /* ---------- CONTACT / FOOTER ---------- */
  .contact{
    background:var(--espresso); color:var(--cream); text-align:center; position:relative;
  }
  .contact .eyebrow{color:var(--gold-light);}
  .contact h2{font-size:clamp(30px,4.4vw,54px); margin:18px 0 26px;}
  .contact-details{
    display:flex; justify-content:center; gap:60px; flex-wrap:wrap; margin:44px 0 46px;
  }
  .cdetail{text-align:left; max-width:280px;}
  .cdetail .eyebrow{color:var(--gold-light); margin-bottom:10px; display:block;}
  .cdetail p{font-size:15px; line-height:1.7; font-weight:300; color:rgba(244,238,226,0.86);}
  .cdetail a{border-bottom:1px solid rgba(244,238,226,0.35); transition:border-color .3s;}
  .cdetail a:hover{border-color:var(--gold-light);}
  footer{
    background:#241209; color:rgba(244,238,226,0.55); padding:34px 5%;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
    font-size:12px; letter-spacing:.03em;
  }
  footer .rlogo{font-family:'Playfair Display',serif; color:rgba(244,238,226,0.8); font-size:15px; letter-spacing:.06em;}

  /* decorative gold leaf */
  .leaf{position:absolute; opacity:0.9; pointer-events:none;}

  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  @media (max-width:980px){
    .nav-links{display:none;}
    .insert{grid-template-columns:1fr;}
    .insert-photo{min-height:280px;}
    .services-lead{grid-template-columns:1fr; gap:36px;}
    .story-grid{grid-template-columns:1fr; gap:44px;}
    .story-photos .p1{margin-top:0;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);}
    .gallery-grid a.tall{grid-row:span 1;}
    .booking-wrap{grid-template-columns:1fr;}
    .booking-photo{min-height:280px;}
    .booking-info{border-right:1px solid var(--line);}
    .contact-details{gap:34px;}
    .hero-content{padding-bottom:90px;}
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    .gallery-grid img{transition:none;}
  }