/*
Theme Name: Corumbá Filmes
Theme URI: https://corumbafilmes.com.br
Author: Michelle Karen
Description: Tema oficial da produtora Corumbá Filmes.
Version: 1.0.2
Text Domain: corumba-filmes
*/

:root{--black:#070707;--panel:#101010;--gold:#d7a13f;--gold-light:#f0c56a;--white:#f5f2ea;--muted:#aaa59b}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}

.header{height:84px;display:flex;align-items:center;gap:40px;padding:0 clamp(24px,5vw,78px);position:absolute;z-index:10;top:0;width:100%;border-bottom:1px solid #ffffff16}
.brand{display:flex;align-items:center;gap:12px;font-family:Georgia,serif;letter-spacing:.16em;font-size:16px;white-space:nowrap}
.brand-mark{width:42px;height:42px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:26px;letter-spacing:0}
.brand small{display:block;font-family:Arial,sans-serif;color:var(--gold);font-size:8px;letter-spacing:.5em;margin-top:4px}
.nav{display:flex;align-items:center;justify-content:center;gap:30px;margin-left:auto;font-size:13px}
.nav a{color:#ddd;transition:.2s}
.nav a:hover{color:var(--gold)}
.gold-button,.light-button,.outline-button{display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700;padding:15px 24px;border-radius:2px;border:0;cursor:pointer;transition:.25s}
.gold-button{background:linear-gradient(135deg,var(--gold-light),#bd7e1e);color:#171008;box-shadow:0 8px 26px #c58b2a24}
.gold-button:hover{transform:translateY(-2px);filter:brightness(1.08)}
.light-button{background:#f7f6f1;color:#111}
.outline-button{border:1px solid #a87532;background:transparent;color:#f0dbc0}
.menu-button{display:none;background:none;border:0;color:white;font-size:24px}

.hero{min-height:720px;height:100vh;max-height:940px;background-image:url('assets/hero-cinema.png');background-size:cover;background-position:center;position:relative;display:flex;align-items:center;padding:90px clamp(24px,8vw,130px) 30px;overflow:hidden}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.98) 0%,rgba(0,0,0,.8) 35%,rgba(0,0,0,.08) 75%),linear-gradient(0deg,#070707 0%,transparent 22%)}
.hero-content{position:relative;z-index:1;width:100%;max-width:620px;min-width:0}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.22em;font-size:10px;font-weight:700}
.hero h1{font:700 clamp(46px,6vw,84px)/.97 Georgia,serif;letter-spacing:-.03em;margin:20px 0 24px;max-width:100%}
.hero h1 span{color:var(--gold-light)}
.hero-content>p:not(.eyebrow){color:#d4d1cb;line-height:1.8;max-width:510px;font-size:16px;margin-bottom:32px}
.scroll{position:absolute;z-index:2;bottom:25px;left:50%;transform:translateX(-50%);font-size:10px;text-transform:uppercase;letter-spacing:.18em;color:#bdb8ae}
.scroll span{display:block;text-align:center;font-size:18px;color:var(--gold);margin-top:5px}

.section{padding:105px clamp(24px,7vw,110px)}
.about{max-width:1240px;margin:auto;display:grid;grid-template-columns:1fr .85fr;gap:90px;align-items:center}
.about h2,.section-heading h2,.contact h2,.cta-strip h2{font:400 clamp(34px,4vw,54px)/1.1 Georgia,serif;margin:14px 0 25px}
.about-copy>p:not(.eyebrow){color:var(--muted);font-size:15px;line-height:1.8;max-width:570px}
.about-copy .outline-button{margin-top:18px}
.portrait-card{text-align:center}
.portrait-image{height:430px;background:url('assets/hero-cinema.png') 72% center/cover;filter:grayscale(1);border:1px solid #2d2a25;box-shadow:20px 20px 0 #0e0e0e}
.signature{font:italic 32px Georgia,serif;color:var(--gold);margin:20px 0 4px}
.portrait-card span{text-transform:uppercase;letter-spacing:.18em;font-size:9px;color:#b8b1a7}

.services{background:#0b0b0b;border-top:1px solid #171717;border-bottom:1px solid #171717}
.section-heading{text-align:center;max-width:750px;margin:0 auto 46px}
.section-heading h2{margin-bottom:14px}
.section-heading>p:last-child{color:var(--muted);line-height:1.7}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:1240px;margin:auto}
.service-card{background:linear-gradient(145deg,#161616,#0d0d0d);border:1px solid #232323;padding:38px 28px;min-height:250px;transition:.3s}
.service-card:hover{border-color:#a87532;transform:translateY(-5px)}
.service-icon{color:var(--gold);font-size:34px}
.service-card h3{font:400 23px Georgia,serif;margin:22px 0 15px}
.service-card p{color:var(--muted);font-size:13px;line-height:1.7}

.portfolio{max-width:1400px;margin:auto}
.work-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:16px}
.work{min-height:360px;position:relative;background-image:url('assets/hero-cinema.png');background-size:cover;overflow:hidden}
.work-two{background-position:43% center}
.work-three{background-position:80% center}
.work:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,transparent 70%);transition:.3s}
.work:hover:after{background:linear-gradient(0deg,#000 0%,rgba(200,137,37,.1) 100%)}
.work div{position:absolute;z-index:1;bottom:0;padding:25px}
.work span{color:var(--gold);font-size:9px;text-transform:uppercase;letter-spacing:.2em}
.work h3{font:400 21px Georgia,serif;max-width:280px}
.centered{width:max-content;margin:34px auto 0;display:flex}

.testimonials{background:#0a0a0a}
.quotes{max-width:1200px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quotes blockquote{margin:0;background:#141414;border:1px solid #222;padding:30px}
.quotes b{font:50px Georgia,serif;color:var(--gold);line-height:.5}
.quotes p{font-size:14px;line-height:1.8;color:#c3bfb8;min-height:128px}
.quotes footer{font-size:12px;color:var(--gold)}
.quotes footer span{display:block;color:#777;margin-top:5px}

.cta-strip{padding:65px clamp(24px,8vw,130px);display:flex;align-items:center;justify-content:space-between;gap:35px;background:linear-gradient(90deg,#0a0908dd,#090909cc),url('assets/hero-cinema.png') center/cover;border-block:1px solid #2d2112}
.cta-strip div{max-width:720px}
.cta-strip h2{margin:10px 0}
.cta-strip div>p:last-child{color:#aaa}
.cta-strip .gold-button{flex-shrink:0}

.contact{max-width:1280px;margin:auto;display:grid;grid-template-columns:.8fr 1.4fr .7fr;gap:55px;align-items:start}
.contact-title p:last-child{color:var(--muted);line-height:1.7}
.contact form label{display:block;color:#9d9890;font-size:11px;text-transform:uppercase;letter-spacing:.12em}
.fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
input,textarea{display:block;width:100%;margin:8px 0 13px;border:1px solid #2b2b2b;background:#0d0d0d;color:white;padding:14px;outline:none;border-radius:2px;text-transform:none;letter-spacing:0}
input:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:vertical}
.form-success{font-size:12px;color:var(--gold);line-height:1.5}
.contact-info{border-left:1px solid #292929;padding-left:28px}
.contact-info p{color:#bbb;line-height:1.6;font-size:13px;margin:0 0 20px}
.contact-info span{color:var(--gold);display:inline-block;width:25px}

.footer{border-top:1px solid #202020;padding:45px clamp(24px,7vw,100px);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:30px;color:#85817a;font-size:12px}
.footer>div{text-align:right}
.footer>div a{margin-left:25px;color:#c0bbb2}
.footer>small{grid-column:1/-1;text-align:center;border-top:1px solid #171717;padding-top:25px}
.floating-whatsapp{position:fixed;z-index:20;right:24px;bottom:24px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#c99236;color:#090909;font-size:25px;box-shadow:0 10px 30px #000}

.reveal{animation:rise .8s ease both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
  .header{height:72px;padding:0 22px}
  .header-cta{display:none}
  .menu-button{display:block;margin-left:auto;z-index:2}
  .nav{display:none;position:absolute;top:0;left:0;width:100%;padding:90px 28px 35px;background:#090909;flex-direction:column;align-items:flex-start;gap:22px}
  .nav.open{display:flex}
  .hero{min-height:760px;background-position:65% center;align-items:flex-end;padding-bottom:120px}
  .hero-overlay{background:linear-gradient(0deg,#070707 5%,rgba(0,0,0,.85) 60%,rgba(0,0,0,.25) 100%)}
  .about{grid-template-columns:1fr;gap:55px}
  .portrait-image{height:400px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .work-grid{grid-template-columns:1fr}
  .work{min-height:320px}
  .quotes{grid-template-columns:1fr}
  .quotes p{min-height:auto}
  .contact{grid-template-columns:1fr}
  .contact-info{border-left:0;border-top:1px solid #292929;padding:25px 0 0}
  .footer{grid-template-columns:1fr;text-align:center}
  .footer .brand{justify-content:center}
  .footer>div{text-align:center}
  .footer>small{grid-column:auto}
}

@media(max-width:620px){
  .header{padding-left:14px;padding-right:14px}
  .brand{font-size:13px;gap:8px;letter-spacing:.08em;min-width:0}
  .brand-mark{width:37px;height:37px;flex-shrink:0}

  .hero{
    padding-left:16px;
    padding-right:16px;
    background-position:58% center;
  }
  .hero-content{
    width:100%;
    max-width:100%;
    min-width:0;
    text-align:center;
  }
  .hero .eyebrow{
    max-width:100%;
    line-height:1.45;
  }
  .hero h1{
    font-size:clamp(34px,10.5vw,43px);
    line-height:.97;
    letter-spacing:-.03em;
    width:100%;
    max-width:96%;
    margin-left:auto;
    margin-right:auto;
  }
  .hero h1 span{
    display:block;
  }
  .hero-content>p:not(.eyebrow){
    font-size:14px;
    margin-left:auto;
    margin-right:auto;
  }

  .section{padding:80px 22px}
  .about h2,.section-heading h2,.contact h2,.cta-strip h2{font-size:36px}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:auto}
  .cta-strip{padding:55px 22px;display:block}
  .cta-strip .gold-button{margin-top:20px}
  .fields{grid-template-columns:1fr}
  .contact{gap:35px}
  .portrait-image{height:330px}
  .floating-whatsapp{width:50px;height:50px;right:16px;bottom:16px}
}

/* Fotografias originais de Rickson Medeiros */
.hero{background-image:url('assets/rickson-retrato.jpg');background-position:65% 42%}
.portrait-image{height:520px;background-image:url('assets/rickson-sentado.jpeg');background-position:center 35%}
.work{background-image:url('assets/rickson-evento.jpg')}
.work-one{background-position:44% center}
.work-two{background-position:66% center}
.work-three{background-image:url('assets/rickson-retrato.jpg');background-position:center 35%}
.cta-strip{background-image:linear-gradient(90deg,#0a0908f2,#090909bd),url('assets/rickson-evento.jpg');background-position:center 52%}

@media(max-width:1000px){
  .hero{background-position:58% center}
  .portrait-image{height:400px}
}
@media(max-width:620px){
  .hero{background-position:58% center}
  .portrait-image{height:330px}
}

/* Identidade e portfólio oficiais */
.brand-logo{display:block;width:138px;height:64px;object-fit:contain;object-position:left center}
.footer-brand .brand-logo{width:170px;height:92px}
.work-grid{grid-template-columns:repeat(2,1fr)}
.work-one{background-image:url('assets/trabalho-casamento.jpg');background-position:center 48%}
.work-two{background-image:url('assets/trabalho-show.jpg');background-position:center}
.work-three{background-image:url('assets/trabalho-documentario.jpg');background-position:center}
.work-four{background-image:url('assets/trabalho-show.jpg');background-position:center}

@media(max-width:1000px){
  .brand-logo{width:112px;height:56px}
  .work-grid{grid-template-columns:1fr}
}

.work-four{background-image:url('assets/dream-day-noiva.jpg');background-position:center 58%}
.work em{display:block;margin-top:10px;color:#e0b45f;font-size:10px;font-style:normal;text-transform:uppercase;letter-spacing:.12em}
.portfolio-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px}

@media(max-width:620px){
  .portfolio-actions .outline-button{width:100%}
}