/* ===========================
   RESET
=========================== */

:root{
    --site-bg:#F5F1E8;
    --site-text:#2F241D;
    --site-accent:#B08D57;
    --site-dark:#241B15;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:var(--site-bg);

    background-image:

    radial-gradient(circle at top,#faf6ef 0%,#f5f1e8 45%,#ece3d3 100%);

    color:var(--site-text);

    line-height:1.7;

    overflow-x:hidden;

}

/* ===========================
   COLORS
===========================

Cream: #F5F1E8

Brown: #2F241D

Wood: #5A4333

Gold: #B08D57

*/

/* ===========================
   NAVBAR
=========================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:24px 8%;

    background:rgba(36,27,21,.75);

    backdrop-filter:blur(10px);

    border-bottom:1px solid color-mix(in srgb, var(--site-accent) 35%, transparent);

    z-index:1000;

    transition:.4s;

}

.logo h1{

    color:white;

    font-family:'Cormorant Garamond',serif;

    font-size:34px;

    font-weight:600;

    letter-spacing:1px;

}

.logo span{

    color:var(--site-accent);

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:11px;

}

nav{

    display:flex;

    gap:35px;

}

nav a{

    position:relative;

    color:white;

    text-decoration:none;

    font-size:13px;

    letter-spacing:1px;

    padding:6px 0;

    transition:.3s;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-4px;

    width:0%;

    height:1px;

    background:var(--site-accent);

    transition:.35s;

}

nav a:hover{

    color:var(--site-accent);

}

nav a:hover::after{

    width:100%;

}

nav a:hover{

    color:#B08D57;

}

/* ===========================
   HERO
=========================== */

.hero{

    position:relative;

    height:100vh;

    background-image:url("https://images.unsplash.com/photo-1547891654-e66ed7ebb968?auto=format&fit=crop&w=1900&q=80");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

}

.hero-slide{

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:0;

    transform:scale(1);

    transition:opacity 2s ease;

    animation:kenburns 18s linear infinite;

}

.hero-slide:nth-child(1){

background-image:url("https://images.unsplash.com/photo-1547891654-e66ed7ebb968?auto=format&fit=crop&w=1900&q=80");

}

.hero-slide:nth-child(2){

background-image:url("https://images.unsplash.com/photo-1541963463532-d68292c34b19?auto=format&fit=crop&w=1900&q=80");

}

.hero-slide:nth-child(3){

background-image:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1900&q=80");

}

.hero-slide.active{

opacity:1;

}

@keyframes kenburns{

0%{

transform:scale(1);

}

100%{

transform:scale(1.12);

}

}

.overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(

        rgba(20,15,12,.55),

        rgba(20,15,12,.72)

    );

}

.hero-content{

position:relative;

z-index:5;

max-width:850px;

text-align:center;

color:white;

padding:20px;

}

.hero-content h2{

    font-size:72px;

    font-family:'Cormorant Garamond',serif;

    margin-bottom:25px;

    font-weight:500;

}

.hero-content p{

    font-size:18px;

    margin-bottom:40px;

}

.btn{

display:inline-block;

padding:16px 42px;

border:1px solid var(--site-accent);

background:rgba(176,141,87,.15);

backdrop-filter:blur(4px);

color:white;

text-decoration:none;

letter-spacing:1px;

transition:.35s;

}

.btn:hover{

background:var(--site-accent);

transform:translateY(-2px);

}

.hero-small{

letter-spacing:5px;

text-transform:uppercase;

font-size:14px;

margin-bottom:20px;

color:#D8C7AA;

}

.hero-description{

font-size:20px;

margin:35px auto;

max-width:650px;

line-height:1.8;

}

/* ===========================
   BIOGRAPHY
=========================== */

.biografia{

    width:90%;
    max-width:1400px;

    margin:160px auto;

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:80px;

    align-items:center;

}

.section-tag{

    color:var(--site-accent);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:12px;

}

.bio-text{

    padding:20px;

}

.bio-text blockquote{

    font-family:'Cormorant Garamond',serif;

    font-size:32px;

    line-height:1.4;

    color:#5A4333;

    margin:30px 0;

    border-left:3px solid var(--site-accent);

    padding-left:25px;

    font-style:italic;

}

.bio-text p{

    margin-bottom:20px;

    font-size:17px;

}

.bio-image img{

    width:100%;

    height:720px;

    object-fit:cover;

    border:10px solid #EFE6D7;

    box-shadow:

    0 20px 40px rgba(0,0,0,.15),

    0 30px 70px rgba(0,0,0,.18);

}

.bio-text h2{

font-family:'Cormorant Garamond',serif;

font-size:60px;

font-weight:500;

letter-spacing:1px;

text-align:center;

margin-bottom:70px;

color:var(--site-text);

}

.bio-text p{

    margin-bottom:25px;

}

.btn-dark{

display:inline-block;

margin-top:25px;

padding:15px 35px;

background:var(--site-text);

color:white;

text-decoration:none;

letter-spacing:1px;

transition:.35s;

}

.btn-dark:hover{

background:#5A4333;

transform:translateY(-3px);

}

.btn-dark:hover{

    background:#5A4333;

}

/* ===========================
   GALLERY
=========================== */

.obras{

    width:90%;
    max-width: 1400px;

    margin:170px auto;

}

.obras h2{

font-family:'Cormorant Garamond',serif;

font-size:60px;

font-weight:500;

letter-spacing:1px;

text-align:center;

margin-bottom:70px;

color:var(--site-text);

}

.gallery{

    display:grid;

grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:30px;

}

.card{

position:relative;

overflow:hidden;

background:#EFE6D7;

padding:12px;

border:1px solid rgba(176,141,87,.15);

box-shadow:

0 15px 35px rgba(0,0,0,.08),

0 30px 70px rgba(0,0,0,.12);

transition:.45s;

}

.card img{

width:100%;

height:420px;

object-fit:cover;

filter:saturate(.9) contrast(1.05);

transition:1s;

}

.hover{

position:absolute;

top:12px;

left:12px;

right:12px;

bottom:12px;

background:rgba(24,18,14,.72);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

opacity:0;

transition:.45s;

}

.hover h3{

color:#F5F1E8;

font-family:'Cormorant Garamond',serif;

font-size:34px;

margin-bottom:18px;

text-align:center;

}

.hover a{

color:white;

text-decoration:none;

padding:12px 26px;

border:1px solid var(--site-accent);

transition:.35s;

}

.hover a:hover{

background:var(--site-accent);

}

.card:hover{

transform:translateY(-10px);

}

.card:hover img{

transform:scale(1.12);

}

.card:hover .hover{

opacity:1;

}

/* ===========================
   NEWS
=========================== */

.preview-news{

    width:85%;
    max-width:1400px;
    margin:170px auto;

}

.preview-news h2{

font-family:'Cormorant Garamond',serif;

font-size:60px;

font-weight:500;

letter-spacing:1px;

text-align:center;

margin-bottom:70px;

color:var(--site-text);

}

.news-container{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:40px;

    margin-top:60px;

}

.news-container article{

    background:white;

    padding:40px;

    box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.news-container h3{

    font-family:'Cormorant Garamond',serif;

    margin-bottom:20px;

    font-size:32px;

}

.news-container a{

    display:inline-block;

    margin-top:25px;

    text-decoration:none;

    color:#5A4333;

    font-weight:600;

}

/* ===========================
   FOOTER
=========================== */

footer{

    background:var(--site-dark);

    color:white;

    padding:80px 20px;

    text-align:center;

}

footer h2{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    margin-bottom:15px;

}

footer p{

    color:#D3C4B3;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:1000px){
    .contact-section{

grid-template-columns:1fr;

}

.page-hero h1{

font-size:46px;

}

.menu-toggle{

display:block;

opacity:1;

visibility:visible;

}

nav{

position:absolute;

top:100%;

left:0;

width:100%;

background:#241B15;

display:flex;

flex-direction:column;

align-items:center;

gap:25px;

padding:30px;

display:none;

}

nav.active{

display:flex;

opacity:1;

visibility:visible;

}

.navbar{

padding:20px;

}

.hero-content h2{

font-size:44px;

}

.biografia{

grid-template-columns:1fr;

}

.bio-image img{

height:450px;

}

.gallery{

grid-template-columns:1fr;

}

.news-container{

grid-template-columns:1fr;

}

.obras h2,
.preview-news h2,
.bio-text h2{

font-size:38px;

}

}


/* ===========================
   FADE ANIMATION
=========================== */

.biografia,
.obras,
.preview-news{

    opacity:0;

    transform:translateY(60px);

    transition:1s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

.logo p{

    color:#d9c7aa;

    font-size:11px;

    letter-spacing:2px;

    margin-top:3px;

}

/* ===========================
   FOOTER
=========================== */

footer{

    background:var(--site-dark);

    color:#F5F1E8;

    padding:80px 8% 30px;

}

.footer-container{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

}

.footer-brand h2{

    font-family:'Cormorant Garamond',serif;

    font-size:42px;

    margin-bottom:20px;

}

.footer-brand p{

    color:#CDBA9A;

}

.footer-links h3,
.footer-contact h3{

    margin-bottom:20px;

    color:var(--site-accent);

}

.footer-links{

    display:flex;

    flex-direction:column;

}

.footer-links a{

    color:#F5F1E8;

    text-decoration:none;

    margin-bottom:12px;

    transition:.3s;

}

.footer-links a:hover{

    color:var(--site-accent);

    padding-left:6px;

}

.footer-contact p{

    margin-bottom:12px;

    color:#DDD;

}

footer hr{

    margin:50px 0 25px;

    border:none;

    height:1px;

    background:rgba(255,255,255,.15);

}

.copyright{

    text-align:center;

    color:#B9A58A;

    font-size:14px;

}

@media(max-width:1000px){

.footer-container{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

}

.menu-toggle{

display:none;

opacity:0;

visibility:hidden;

transition:.35s;

background:none;

border:none;

font-size:34px;

color:white;

cursor:pointer;

}

@media(max-width:1000px){

.menu-toggle{

display:block;

opacity:1;

visibility:visible;

}

}

.bio-text p,
.news-container p{

font-size:17px;

line-height:1.9;

color:#4b4037;

}

.section-divider{

width:140px;

height:1px;

background:var(--site-accent);

margin:80px auto;

opacity:.6;

}

.page-hero{

padding:180px 20px 80px;

text-align:center;

}

.page-hero h1{

font-family:'Cormorant Garamond',serif;

font-size:64px;

margin-bottom:20px;

}

.page-hero p{

max-width:700px;

margin:auto;

font-size:18px;

line-height:1.8;

}

.contact-section{

width:90%;

max-width:1400px;

margin:80px auto 140px;

display:grid;

grid-template-columns:2fr 1fr;

gap:70px;

}

.contact-form{

background:#EFE6D7;

padding:50px;

box-shadow:0 20px 50px rgba(0,0,0,.08);

}

.contact-form h2{

font-family:'Cormorant Garamond',serif;

font-size:42px;

margin-bottom:30px;

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,

.contact-form textarea{

padding:18px;

background:#FAF8F4;

border:1px solid #D7C7AC;

font-size:16px;

font-family:'Inter',sans-serif;

outline:none;

}

.contact-form textarea{

height:180px;

resize:none;

}

.contact-form input:focus,

.contact-form textarea:focus{

border-color:#B08D57;

}

.contact-info{

    background:var(--site-dark);

color:white;

padding:50px;

display:flex;

flex-direction:column;

justify-content:center;

}

.contact-info h2{

font-family:'Cormorant Garamond',serif;

font-size:42px;

margin-bottom:25px;

}

.contact-info p{

margin-bottom:18px;

line-height:1.8;

}

.work-video{

width:100%;

margin-top:30px;

background:#000;

border:10px solid #EFE6D7;

box-shadow:0 20px 45px rgba(0,0,0,.18);

}

.admin-body{

background:#f7f3eb;

background-image:none;

}

.admin-body .navbar{

position:static;

}

.admin-hero{

padding:150px 8% 60px;

background:var(--site-dark);

color:white;

}

.admin-hero h1{

font-family:'Cormorant Garamond',serif;

font-size:58px;

font-weight:500;

margin-bottom:12px;

}

.admin-hero p{

max-width:760px;

color:#d9c7aa;

font-size:18px;

}

.admin-shell{

width:92%;

max-width:1320px;

margin:50px auto 120px;

display:grid;

grid-template-columns:280px 1fr;

gap:28px;

opacity:1;

transform:none;

transition:1s ease;

}

.admin-login{

width:92%;

max-width:520px;

margin:50px auto 120px;

background:white;

border:1px solid #e4d8c5;

padding:34px;

box-shadow:0 16px 38px rgba(0,0,0,.06);

}

.admin-login h2{

font-family:'Cormorant Garamond',serif;

font-size:38px;

font-weight:500;

margin-bottom:12px;

}

.admin-login p{

margin-bottom:22px;

color:#5A4333;

}

.admin-sidebar{

position:sticky;

top:120px;

align-self:start;

display:flex;

flex-direction:column;

gap:10px;

background:#fff;

padding:18px;

border:1px solid #e4d8c5;

box-shadow:0 12px 28px rgba(0,0,0,.06);

}

.admin-tab{

border:0;

background:#f4ede3;

color:#3d3129;

padding:14px 16px;

text-align:left;

font:600 14px 'Inter',sans-serif;

cursor:pointer;

transition:.25s;

}

.admin-tab.active,
.admin-tab:hover{

background:var(--site-dark);

color:white;

}

.admin-panel{

display:none;

background:white;

border:1px solid #e4d8c5;

padding:34px;

box-shadow:0 16px 38px rgba(0,0,0,.06);

}

.admin-panel.active{

display:block;

}

.admin-panel h2{

font-family:'Cormorant Garamond',serif;

font-size:40px;

font-weight:500;

margin-bottom:24px;

}

.admin-grid{

display:grid;

grid-template-columns:repeat(2,minmax(0,1fr));

gap:20px;

}

.admin-field{

display:flex;

flex-direction:column;

gap:8px;

margin-bottom:18px;

}

.admin-field label{

font-weight:600;

font-size:13px;

color:#5A4333;

}

.admin-field input,
.admin-field textarea,
.admin-field select{

width:100%;

padding:14px;

border:1px solid #d6c8b6;

background:#fffaf4;

font:15px 'Inter',sans-serif;

color:#2f241d;

outline:none;

}

.admin-field input[type="color"]{

height:50px;

padding:5px;

}

.admin-field textarea{

min-height:115px;

resize:vertical;

}

.admin-repeat-list{

display:flex;

flex-direction:column;

gap:22px;

}

.admin-item{

border:1px solid #e1d4c1;

background:#fbf7ef;

padding:22px;

}

.admin-item-head{

display:flex;

align-items:center;

justify-content:space-between;

gap:14px;

margin-bottom:18px;

}

.admin-item-head h3{

font-family:'Cormorant Garamond',serif;

font-size:30px;

font-weight:500;

}

.admin-actions{

position:sticky;

bottom:0;

display:flex;

flex-wrap:wrap;

gap:12px;

justify-content:flex-end;

padding:18px 0 0;

background:linear-gradient(rgba(255,255,255,0),#fff 26%);

}

.admin-button{

border:0;

background:var(--site-dark);

color:white;

padding:13px 20px;

font:600 14px 'Inter',sans-serif;

cursor:pointer;

transition:.25s;

}

.admin-button.secondary{

background:#efe6d7;

color:#2f241d;

}

.admin-button.danger{

background:#8a2f25;

}

.admin-button:hover{

transform:translateY(-2px);

}

.admin-checkbox{

display:flex;

align-items:center;

gap:10px;

font-weight:600;

}

.admin-preview{

max-width:140px;

height:90px;

object-fit:cover;

border:1px solid #dbcbb7;

background:#efe6d7;

}

.admin-status{

min-height:26px;

font-weight:600;

color:#426032;

}

.template-section{

width:90%;

max-width:1180px;

margin:110px auto;

opacity:0;

transform:translateY(40px);

transition:1s ease;

}

@media(max-width:900px){

.admin-shell{

grid-template-columns:1fr;

}

.admin-sidebar{

position:static;

}

.admin-grid{

grid-template-columns:1fr;

}

.admin-hero h1{

font-size:42px;

}

}