/* proyectos.css */
:root{
  --primary:#3E4C59;
  --primary-light:#7D8A99;
  --primary-dark:#2B3642;
  --accent:#D9822B;
  --bg:#F5F1EB;
  --text:#2F2E2E;
  --glass: rgba(245,241,235,.14);
  --glass-strong: rgba(245,241,235,.86);
  --overlay: rgba(0,0,0,.55);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ overflow-x:hidden; max-width:100%; }
body{
  font-family:'Montserrat',sans-serif;
  color:var(--text);
  background: var(--bg);
  padding-top: 112px;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background: url('images/picina bonita grande.jpg') center/cover no-repeat;
  filter: blur(6px) brightness(.62);
  z-index:-2;
}
body::after{
  content:"";
  position:fixed; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.08));
  z-index:-1;
}

/* Top bar */
#top-bar{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:.35rem 1.1rem;
  background: rgba(2,47,64,.72);
  color:#fff;
  z-index:1200;
  backdrop-filter: saturate(180%) blur(8px);
  font-size:.86rem;
  font-weight:600;
}
#top-bar a{ color:#fff; text-decoration:none; opacity:.95; }
#top-bar a:hover{ color:var(--accent); }
#top-bar .socials{ display:flex; gap:1rem; align-items:center; }
#top-bar .right{ display:flex; gap:1rem; align-items:center; }
#top-bar .contacts{ display:flex; gap:.9rem; align-items:center; }

/* Lang switch */
.lang-switch{
  display:flex; gap:.4rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  padding:.2rem; border-radius: 999px;
}
.lang-btn{
  border:0; cursor:pointer;
  background: transparent;
  color:#fff;
  font-weight:800;
  padding:.35rem .7rem;
  border-radius:999px;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.lang-btn:hover{ transform: translateY(-1px); }
.lang-btn.is-active{
  background: rgba(255,255,255,.92);
  color: #0b2230;
}

/* Nav */
.cx-nav{
  position:fixed; top:38px; left:0; right:0;
  display:flex; align-items:center; justify-content:center;
  gap: 1.3rem;
  padding: .9rem 1.2rem;
  z-index:1150;
  transition: background .25s ease, box-shadow .25s ease;
}
.cx-nav.is-scrolled{
  background: rgba(0,0,0,.36);
  backdrop-filter: saturate(180%) blur(10px);
  box-shadow: 0 2px 10px rgba(0,0,0,.2);
}
.cx-brand img{
  height:48px; width:auto; max-width:160px;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.25));
  transition: transform .25s ease;
}
.cx-brand img:hover{ transform: scale(1.03); }

.cx-menu{
  list-style:none;
  display:flex; align-items:center;
  gap: 2.2rem;
}
.cx-link{
  position:relative;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:1.06rem;
  padding:.2rem 0;
  opacity:.96;
}
.cx-link::after{
  content:"";
  position:absolute; left:0; bottom:-6px;
  height:2px; width:100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin:left;
  transition: transform .25s ease;
}
.cx-link:hover::after, .cx-link:focus::after, .cx-link.is-active::after{
  transform: scaleX(1);
}
.cx-link.is-active{ opacity:1; }

/* Dropdown */
.cx-dropdown{ position:relative; }
.cx-dropdown__btn{
  display:flex; align-items:center; gap:.45rem;
  background: transparent; border:0; cursor:pointer;
}
.cx-dropdown__btn svg{ width:18px; height:18px; }
.cx-dropdown__menu{
  position:absolute;
  top: 120%;
  left: 0;
  min-width: 230px;
  list-style:none;
  background: var(--glass-strong);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding:.55rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.cx-dropdown.is-open .cx-dropdown__menu{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.cx-dropdown__menu a{
  display:block;
  padding:.7rem .9rem;
  border-radius:10px;
  text-decoration:none;
  color: var(--primary-dark);
  font-weight:700;
}
.cx-dropdown__menu a:hover{
  background: var(--accent);
  color:#fff;
}

/* Hero */
.hero{
  position:relative;
  min-height: 62vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  padding: 6.5rem 1rem 2.5rem;
}
.hero__overlay{
  position:absolute; inset:0;
  background: radial-gradient(1200px 500px at 50% 30%, rgba(217,130,43,.18), transparent 60%),
              linear-gradient(to top, rgba(0,0,0,.74), rgba(0,0,0,.25));
}
.hero__content{ position:relative; z-index:1; max-width: 980px; }
.hero h1{
  font-size: clamp(2.05rem, 4.1vw, 3.35rem);
  font-weight: 900;
  letter-spacing: .3px;
  text-shadow: 0 10px 28px rgba(0,0,0,.35);
  animation: fadeUp .8s ease both;
}
.hero p{
  margin-top: .85rem;
  font-size: clamp(1rem, 2.15vw, 1.2rem);
  opacity:.95;
  text-shadow: 0 10px 22px rgba(0,0,0,.32);
  animation: fadeUp 1.05s ease both;
}
.hero__cta{
  display:inline-flex;
  margin-top: 1.4rem;
  padding: .85rem 1.55rem;
  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  text-decoration:none;
  font-weight: 900;
  box-shadow: 0 14px 34px rgba(217,130,43,.35);
  transform: translateZ(0);
  transition: transform .2s ease, filter .2s ease;
  animation: fadeUp 1.25s ease both;
}
.hero__cta:hover{ transform: translateY(-2px); filter: brightness(1.04); }

/* Main wrap */
.wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem 1rem 4.2rem;
}
.section-head{
  text-align:center;
  margin: 1.4rem auto 1.25rem;
  color:#fff;
}
.section-head h2{
  font-size: clamp(1.65rem, 2.4vw, 2.35rem);
  font-weight: 900;
  text-shadow: 0 10px 24px rgba(0,0,0,.34);
}
.section-head p{
  margin-top:.55rem;
  opacity:.92;
  text-shadow: 0 10px 24px rgba(0,0,0,.34);
}

/* Grid cards */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
  margin-top: 1.2rem;
}
.card{
  background: rgba(255,255,255,.90);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: pointer;
}
.card:hover{
  transform: translateY(-7px);
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.thumb{ width:100%; aspect-ratio: 4/3; overflow:hidden; }
.thumb img{
  width:100%; height:100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .35s ease;
}
.card:hover .thumb img{ transform: scale(1.06); }
.card-title{
  padding: .9rem 1rem 1.05rem;
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--primary-dark);
  text-align:center;
}

/* CTA */
.cta-row{
  display:flex;
  justify-content:center;
  margin-top: 2.2rem;
}
.btn-contacto{
  display:inline-flex;
  padding: .85rem 1.7rem;
  border-radius: 999px;
  background: var(--accent);
  color:#fff;
  font-weight: 900;
  text-decoration:none;
  box-shadow: 0 14px 34px rgba(217,130,43,.35);
  transition: transform .2s ease, filter .2s ease;
}
.btn-contacto:hover{ transform: translateY(-2px); filter: brightness(1.04); }

/* Lightbox */
.lightbox{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.88);
  z-index: 2000;
  padding: 1.2rem;
}
.lightbox.is-open{ display:flex; }
.lightbox__figure{
  width:min(1100px, 100%);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: .9rem;
  backdrop-filter: blur(10px);
}
.lightbox__figure img{
  width:100%;
  height:auto;
  max-height: 76vh;
  object-fit: contain;
  border-radius: 14px;
  display:block;
}
.lightbox__figure figcaption{
  color:#fff;
  text-align:center;
  font-weight: 800;
  margin-top: .75rem;
  opacity:.95;
}
.lightbox__close{
  position:absolute;
  top: 14px; right: 14px;
  width: 46px; height:46px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  font-size: 28px;
  line-height: 1;
  cursor:pointer;
  transition: transform .2s ease, background .2s ease;
}
.lightbox__close:hover{ transform: scale(1.05); background: rgba(255,255,255,.16); }

/* WhatsApp */
#whatsapp-float{
  position:fixed;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  background:#25D366;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
  z-index: 2100;
  transition: transform .2s ease, filter .2s ease;
}
#whatsapp-float:hover{ transform: translateY(-2px); filter: brightness(1.02); }

/* Hamburger + mobile menu */
.hamburger{
  display:none;
  position:fixed;
  top: 60px;
  left: 12px;
  z-index: 1300;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  cursor:pointer;
}
.hamburger span{
  display:block;
  width: 22px; height: 2px;
  background:#fff;
  margin: 6px auto;
  border-radius: 2px;
}

@media (max-width: 920px){
  #top-bar{ flex-direction:column; gap:.45rem; text-align:center; }
  #top-bar .right{ width:100%; justify-content:center; flex-wrap:wrap; }

  .hamburger{ display:block; }
  .cx-nav{ justify-content:space-between; padding: .85rem 1rem; }
  .cx-menu{
    position: fixed;
    top: 0;
    left: -110%;
    width: 78%;
    height: 100vh;
    flex-direction: column;
    align-items:flex-start;
    gap: 1.2rem;
    padding: 5.5rem 1.25rem 1.25rem;
    background: rgba(0,0,0,.92);
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;
    transition: left .25s ease;
    z-index: 1250;
  }
  .cx-menu[data-open="true"]{ left: 0; }
  .cx-link{ font-size: 1.12rem; }
  .cx-link::after{ display:none; }

  .cx-dropdown__menu{
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display:none;
    width: 100%;
    background: rgba(255,255,255,.92);
    margin-top: .55rem;
  }
  .cx-dropdown.is-open .cx-dropdown__menu{ display:block; }
}

/* Animations */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform: translateY(0); }
}