/* =========================================================
   SAGON — PREMIUM EDITORIAL STYLE
========================================================= */

/* =========================
   FONTS
========================= */

@font-face{

  font-family:'Montserrat';

  src:url('Montserrat-Regular.ttf') format('truetype');

  font-weight:400;

}

@font-face{

  font-family:'Montserrat';

  src:url('Montserrat-Bold.ttf') format('truetype');

  font-weight:700;

}

/* =========================
   VARIABLES
========================= */

:root{

  --gold:#c7a96b;

  --gold-light:#dcc08b;

  --gold-dark:#a98a4e;

  --bg:#f7f4ef;

  --bg-soft:#efebe5;

  --white:#ffffff;

  --text:#2a2a2a;

  --text-soft:#666666;

  --dark:#171410;

  --shadow-soft:0 15px 40px rgba(0,0,0,.05);

  --shadow-medium:0 25px 60px rgba(0,0,0,.08);

  --transition:.45s cubic-bezier(.19,1,.22,1);

  --section-padding:140px 8%;

  --radius:2px;

}

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

*{

  margin:0;

  padding:0;

  box-sizing:border-box;

}

html{

  scroll-behavior:smooth;

}

body{

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

  background:var(--bg);

  color:var(--text);

  overflow-x:hidden;

  line-height:1.7;

}

img{

  width:100%;

  display:block;

}

a{

  text-decoration:none;

}

/* =========================
   GLOBAL
========================= */

section{

  position:relative;

  padding:var(--section-padding);

  z-index:2;

}

.container{

  width:100%;

  max-width:1400px;

  margin:auto;

}

.section-header{

  text-align:center;

  margin-bottom:90px;

}

.section-subtitle{

  color:var(--gold);

  letter-spacing:5px;

  font-size:.8rem;

  margin-bottom:20px;

  text-transform:uppercase;

}

h2{

  font-size:4rem;

  font-weight:700;

  line-height:1.1;

  letter-spacing:-2px;

}

.section-divider{

  width:120px;

  height:1px;

  background:var(--gold);

  margin:35px auto 0;

  position:relative;

}

.section-divider::after{

  content:'✦';

  position:absolute;

  left:50%;

  top:50%;

  transform:translate(-50%,-50%);

  background:var(--bg);

  padding:0 14px;

  color:var(--gold);

  font-size:14px;

}

/* =========================
   SECTION HEAD · MODERNO
========================= */

.section-head{

  text-align:center;

  margin-bottom:70px;

}

.section-head--left{

  text-align:left;

  max-width:1400px;

  margin:0 auto 70px;

}

.section-head__eyebrow{

  display:block;

  color:var(--gold);

  letter-spacing:4px;

  font-size:.72rem;

  text-transform:uppercase;

  margin-bottom:18px;

}

.section-head h2{

  font-size:clamp(2.5rem,5vw,4rem);

  line-height:1.05;

  letter-spacing:-2px;

}

.section-head__line{

  display:block;

  width:70px;

  height:2px;

  background:linear-gradient(90deg,var(--gold),transparent);

  margin:28px auto 0;

}

.section-head--left .section-head__line{

  margin:28px 0 0;

}

/* =========================
   TRANSICIONES · CROSSFADE
========================= */

.fade-bridge{

  position:relative;

  z-index:6;

  height:130px;

  background:var(--white);

  margin:-65px 0;

  pointer-events:none;

}

.fade-bridge--down{

  clip-path:polygon(0 0,100% 35%,100% 100%,0 65%);

}

.fade-bridge--up{

  clip-path:polygon(0 35%,100% 0,100% 65%,0 100%);

}

.reveal-section{

  opacity:0;

  transform:translateY(28px);

  transition:
    opacity 1s cubic-bezier(.19,1,.22,1),
    transform 1s cubic-bezier(.19,1,.22,1);

}

.reveal-section.is-visible{

  opacity:1;

  transform:translateY(0);

}

.reveal-tile{

  opacity:0;

  transform:translateY(30px);

  transition:
    opacity 0.85s cubic-bezier(.19,1,.22,1),
    transform 0.85s cubic-bezier(.19,1,.22,1),
    box-shadow var(--transition);

}

.reveal-tile.is-visible{

  opacity:1;

  transform:translateY(0);

}

/* =========================
   HEADER
========================= */

header{

  position:fixed;

  width:100%;

  top:0;

  left:0;

  z-index:9999;

  padding:28px 7%;

  transition:var(--transition);

}

header.scrolled{

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

  backdrop-filter:blur(14px);

  box-shadow:0 10px 40px rgba(0,0,0,.04);

}

nav{

  display:flex;

  justify-content:space-between;

  align-items:center;

}

.logo img{

  height:70px;

  width:auto;

  transition:var(--transition);

}

.menu{

  display:flex;

  align-items:center;

  gap:42px;

  list-style:none;

}

.menu li{

  position:relative;

}

.menu a{

  color:white;

  font-size:.78rem;

  letter-spacing:2px;

  text-transform:uppercase;

  transition:var(--transition);

}

header.scrolled .menu a{

  color:var(--text);

}

.menu a:hover{

  color:var(--gold);

}

/* =========================
   DROPDOWN
========================= */

.dropdown{

  position:absolute;

  top:40px;

  left:0;

  min-width:300px;

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

  backdrop-filter:blur(20px);

  padding:25px;

  opacity:0;

  visibility:hidden;

  transform:translateY(10px);

  transition:var(--transition);

  box-shadow:var(--shadow-soft);

}

.menu li:hover .dropdown{

  opacity:1;

  visibility:visible;

  transform:translateY(0);

}

.dropdown a{

  display:block;

  padding:12px 0;

  color:var(--text) !important;

  border-bottom:1px solid rgba(0,0,0,.05);

  font-size:.75rem;

}

.dropdown a:last-child{

  border:none;

}

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

.hero{

  height:100vh;

  background:url('../img/Portada.png') center center / cover no-repeat;

  display:flex;

  justify-content:center;

  align-items:center;

  text-align:center;

  overflow:hidden;

}

.hero::before{

  content:'';

  position:absolute;

  inset:0;

  background:
  linear-gradient(
    to bottom,
    rgba(0,0,0,.18),
    rgba(0,0,0,.08)
  );

}

.hero-content{

  position:relative;

  z-index:2;

  color:white;

}

.hero h1{

  font-size:9rem;

  font-weight:700;

  letter-spacing:-4px;

  line-height:.9;

  margin-bottom:25px;

}

.hero p{

  letter-spacing:8px;

  font-size:1rem;

  text-transform:uppercase;

}

.scroll-indicator{

  position:absolute;

  bottom:45px;

  left:50%;

  transform:translateX(-50%);

  color:white;

  font-size:2rem;

  animation:float 2s infinite;

}

@keyframes float{

  0%,100%{

    transform:translate(-50%,0);

  }

  50%{

    transform:translate(-50%,12px);

  }

}

/* =========================
   COLLABORATORS
========================= */

.collaborators{

  background:var(--bg);

}

.logos{

  display:flex;

  justify-content:center;

  align-items:center;

  gap:80px;

  flex-wrap:wrap;

  margin-bottom:120px;

}

.logo-box{

  max-width:180px;

  opacity:.55;

  transition:var(--transition);

}

.logo-box:hover{

  opacity:1;

  transform:translateY(-6px);

}

.quote{

  max-width:950px;

  margin:auto;

  text-align:center;

  font-size:3rem;

  font-weight:300;

  line-height:1.4;

  letter-spacing:-1px;

}

.quote span{

  color:var(--gold);

  font-size:5rem;

}

/* =========================
   PARALLAX
========================= */

.parallax{

  height:42vh;

  background-size:cover;

  background-position:center;

  background-attachment:fixed;

  position:relative;

}

.parallax-1{

  background-image:url('../img/fondop1.png');

}

.parallax-2{

  background-image:url('../img/fondop2.png');

}

.parallax-3{

  background-image:url('../img/fondop3.png');

}

/* =========================
   ABOUT
========================= */

.about-content{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:120px;

  align-items:center;

}

.about-image{

  position:relative;

}

.about-image::before{

  content:'';

  position:absolute;

  width:100%;

  height:100%;

  border:1px solid rgba(199,169,107,.4);

  top:25px;

  left:25px;

  z-index:-1;

}

.about-image img{

  box-shadow:var(--shadow-medium);

}

.about-text{

  position:relative;

}

.about-text::before{

  content:'SAGON';

  position:absolute;

  top:-80px;

  left:-30px;

  font-size:8rem;

  font-weight:700;

  color:rgba(0,0,0,.03);

  z-index:-1;

}

.about-text p{

  margin-bottom:30px;

  color:var(--text-soft);

  font-size:1rem;

  line-height:2.1;

}

/* =========================
   SERVICES · BENTO INDIVIDUAL
========================= */

.services-list{

  display:flex;

  flex-direction:column;

  gap:50px;

  max-width:1200px;

  margin:0 auto;

}

.service-item{

  position:relative;

}

.service-item__grid{

  display:grid;

  grid-template-columns:1.2fr .55fr .55fr;

  grid-template-rows:auto auto;

  gap:16px;

}

.service-item:nth-child(even) .service-item__grid{

  direction:rtl;

}

.service-item:nth-child(even) .service-item__grid > *{

  direction:ltr;

}

.service-item__image{

  grid-row:1 / 3;

  border-radius:20px;

  overflow:hidden;

  min-height:400px;

  box-shadow:var(--shadow-soft);

}

.service-item__image img{

  width:100%;

  height:100%;

  object-fit:cover;

  transition:transform 1.1s cubic-bezier(.19,1,.22,1);

}

.service-item:hover .service-item__image img{

  transform:scale(1.04);

}

.service-item__meta,
.service-item__copy,
.service-item__stat{

  background:var(--white);

  border-radius:12px;

  padding:28px;

  box-shadow:var(--shadow-soft);

  transition:transform var(--transition),box-shadow var(--transition);

}

.service-item__copy:hover,
.service-item__stat:hover{

  transform:translateY(-4px);

  box-shadow:var(--shadow-medium);

}

.service-item__meta{

  display:flex;

  align-items:center;

  justify-content:center;

}

.service-item__num{

  font-size:2.4rem;

  font-weight:300;

  line-height:1;

  color:rgba(199,169,107,.35);

}

.service-item__copy h3{

  font-family:'Cormorant Garamond', serif;

  font-size:clamp(1.5rem,2.5vw,2rem);

  line-height:1.15;

  margin-bottom:12px;

}

.service-item__copy p{

  font-size:.92rem;

  color:var(--text-soft);

  line-height:1.85;

}

.service-item__stat{

  display:flex;

  flex-direction:column;

  justify-content:center;

  text-decoration:none;

  color:var(--text);

}

.service-item__stat strong{

  display:block;

  font-family:'Cormorant Garamond', serif;

  font-size:1.15rem;

  margin-bottom:4px;

}

.service-item__stat span{

  font-size:.68rem;

  letter-spacing:2px;

  text-transform:uppercase;

  color:var(--text-soft);

}

.service-item__stat--gold{

  background:var(--dark);

  transition:background var(--transition);

}

.service-item__stat--gold strong{

  color:var(--gold-light);

}

.service-item__stat--gold span{

  color:rgba(255,255,255,.55);

}

.service-item__stat--gold:hover{

  background:var(--gold-dark);

  transform:translateY(-4px);

}

@media (max-width:960px){

  .service-item__grid,
  .service-item:nth-child(even) .service-item__grid{

    grid-template-columns:1fr 1fr;

    direction:ltr;

  }

  .service-item__image{

    grid-column:1 / -1;

    grid-row:auto;

    min-height:280px;

  }

}

@media (max-width:600px){

  .service-item__grid,
  .service-item:nth-child(even) .service-item__grid{

    grid-template-columns:1fr;

  }

}

/* =========================
   CONTACT
========================= */

.contact-wrapper{

  display:grid;

  grid-template-columns:1fr 1fr;

  gap:80px;

  align-items:start;

}

.map-placeholder{

  min-height:620px;

  background:#d8d8d8;

  box-shadow:var(--shadow-soft);

}

.contact-info{

  margin-bottom:50px;

}

.contact-info p{

  margin-bottom:10px;

  color:var(--text-soft);

}

.contact-info strong{

  display:block;

  color:var(--text);

  margin-bottom:10px;

}

.contact-box{

  display:flex;

  flex-direction:column;

  gap:20px;

}

.contact-box input,
.contact-box textarea{

  border:none;

  background:white;

  padding:22px;

  font-family:'Montserrat';

  font-size:.95rem;

  box-shadow:var(--shadow-soft);

}

.contact-box textarea{

  min-height:200px;

  resize:none;

}

button{

  height:62px;

  border:none;

  background:var(--gold);

  color:white;

  font-size:.8rem;

  letter-spacing:3px;

  text-transform:uppercase;

  cursor:pointer;

  transition:var(--transition);

}

button:hover{

  background:var(--gold-dark);

}

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

footer{

  background:#111;

  padding:70px 8%;

  display:flex;

  justify-content:space-between;

  align-items:center;

  flex-wrap:wrap;

  gap:40px;

}

.footer-logo img{

  height:60px;

  width:auto;

}

.footer-menu{

  display:flex;

  gap:35px;

  list-style:none;

}

.footer-menu a{

  color:white;

  font-size:.75rem;

  letter-spacing:2px;

  text-transform:uppercase;

}

footer div{

  color:rgba(255,255,255,.6);

  font-size:.8rem;

}

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

.hamburger{

  display:none;

}

.mobile-menu{

  display:none;

}

@media(max-width:1100px){

  .contact-wrapper{

    grid-template-columns:1fr;

  }

}

@media(max-width:900px){

  :root{

    --section-padding:100px 6%;

  }

  .menu{

    display:none;

  }

  .hamburger{

    display:flex;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

  }

  .hamburger span{

    width:26px;

    height:2px;

    background:white;

  }

  header.scrolled .hamburger span{

    background:var(--text);

  }

  .mobile-menu{

    position:fixed;

    inset:0;

    background:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:35px;

    transform:translateX(100%);

    transition:var(--transition);

    z-index:999;

  }

  .mobile-menu.active{

    transform:translateX(0);

  }

  .mobile-menu a{

    color:var(--text);

    font-size:1.2rem;

    letter-spacing:3px;

    text-transform:uppercase;

  }

  .hero h1{

    font-size:5rem;

  }

  .hero p{

    letter-spacing:4px;

    font-size:.8rem;

  }

  h2{

    font-size:3rem;

  }

  .about-content,
  .contact-wrapper{

    grid-template-columns:1fr;

  }

}

/* =========================
   PAGE LOADER
========================= */

.page-loader{

  position:fixed;

  inset:0;

  z-index:9999;

  display:flex;

  align-items:center;

  justify-content:center;

  background:var(--white);

  opacity:1;

  transition:opacity .5s ease;

}

.page-loader.is-hidden{

  opacity:0;

  pointer-events:none;

}

.page-loader__logo{

  width:180px;

  height:auto;

  overflow:visible;

}

.page-loader__logo .draw{

  stroke-dasharray:1000;

  stroke-dashoffset:1000;

  stroke-width:1.3;

}

.page-loader__logo .p-main,
.page-loader__logo .p-right,
.page-loader__logo .p-left,
.page-loader__logo .p-lineL,
.page-loader__logo .p-lineR{

  fill:url(#loaderGoldGrad);

  fill-opacity:0;

  stroke:var(--gold-dark);

}

.page-loader__logo .p-detail{

  fill:#fff;

  stroke:var(--gold-light);

  stroke-width:.6;

  opacity:1;

}

.page-loader__logo .p-main{

  transform-origin:50% 100%;

  opacity:0;

  transform:scale(.6);

}

.page-loader.is-playing .page-loader__logo .p-main{

  animation:loaderMainIn 1s ease-out forwards,loaderDraw 1s ease-out forwards,loaderFillIn .6s ease-out .7s forwards;

}

.page-loader__logo .p-left,
.page-loader__logo .p-right{

  transform-origin:50% 100%;

  opacity:0;

}

.page-loader__logo .p-left{

  transform:rotate(22deg) scale(.7);

}

.page-loader__logo .p-right{

  transform:rotate(-22deg) scale(.7);

}

.page-loader.is-playing .page-loader__logo .p-left{

  animation:loaderFanLeft .9s cubic-bezier(.2,.8,.2,1) .8s forwards,loaderDraw .9s ease-out .8s forwards,loaderFillIn .5s ease-out 1.5s forwards;

}

.page-loader.is-playing .page-loader__logo .p-right{

  animation:loaderFanRight .9s cubic-bezier(.2,.8,.2,1) .8s forwards,loaderDraw .9s ease-out .8s forwards,loaderFillIn .5s ease-out 1.5s forwards;

}

.page-loader.is-playing .page-loader__logo .p-detail{

  animation:loaderDraw .8s ease-in-out 1.7s forwards;

}

.page-loader.is-playing .page-loader__logo .p-lineL{

  animation:loaderDraw 1s ease-in-out 1.7s forwards,loaderFillIn .5s ease-out 2.5s forwards;

}

.page-loader.is-playing .page-loader__logo .p-lineR{

  animation:loaderDraw 1s ease-in-out 1.7s forwards,loaderFillIn .5s ease-out 2.5s forwards;

}

@keyframes loaderDraw{

  to{ stroke-dashoffset:0; }

}

@keyframes loaderFillIn{

  to{ fill-opacity:1; }

}

@keyframes loaderMainIn{

  to{ opacity:1; transform:scale(1); }

}

@keyframes loaderFanLeft{

  to{ opacity:1; transform:rotate(0deg) scale(1); }

}

@keyframes loaderFanRight{

  to{ opacity:1; transform:rotate(0deg) scale(1); }

}

@media (prefers-reduced-motion: reduce){

  .page-loader{

    transition:opacity .25s ease;

  }

  .page-loader__logo .p-main,
  .page-loader__logo .p-right,
  .page-loader__logo .p-left,
  .page-loader__logo .p-lineL,
  .page-loader__logo .p-lineR{

    fill-opacity:1;

    opacity:1;

    transform:none;

  }

  .page-loader__logo .draw{

    stroke-dashoffset:0;

  }

  .quote{

    font-size:2rem;

  }

  .parallax{

    background-attachment:scroll;

  }

}