/* ==========================================================================
   PREMIUM · Desarrollo Inmobiliario — Recorridos Virtuales 360
   Hoja de estilos de la pagina publica
   ========================================================================== */

:root{
  /* Marca */
  --petroleo:#004351;
  --petroleo-medio:#005568;
  --petroleo-hondo:#00303c;
  --petroleo-noche:#001f27;
  --oro:#c9ab72;
  --oro-suave:#e4d2ac;
  --oro-tenue:rgba(201,171,114,.32);

  /* Neutros */
  --hueso:#f7f5f1;
  --marfil:#fffefb;
  --tinta:#0f2f37;
  --tinta-suave:#5c7a83;
  --tinta-tenue:#8fa5ab;
  --linea-clara:#e6e0d5;
  --linea-oscura:rgba(255,255,255,.13);
  --texto-inverso:rgba(255,255,255,.74);

  /* Sistema */
  --ancho:1200px;
  --radio:4px;
  --radio-suave:10px;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,system-ui,sans-serif;
  --transicion:.45s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--petroleo-hondo);
  color:#fff;
  font-family:var(--sans);
  font-weight:300;
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;margin:0;letter-spacing:.005em}
p{margin:0}

.contenedor{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 clamp(22px,4.5vw,56px)}

/* Eyebrow / antetitulo -------------------------------------------------- */
.antetitulo{
  font-size:.7rem;
  font-weight:400;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--oro);
  display:flex;
  align-items:center;
  gap:14px;
}
.antetitulo::before{
  content:"";width:34px;height:1px;background:var(--oro-tenue);flex:none;
}
.antetitulo.centrado{justify-content:center}
.antetitulo.centrado::after{content:"";width:34px;height:1px;background:var(--oro-tenue);flex:none}

/* Barra superior --------------------------------------------------------- */
.barra{
  position:sticky;top:0;z-index:60;
  background:rgba(0,31,39,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--linea-oscura);
  transition:background .3s ease;
}
.barra .contenedor{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px}
.barra .logotipo img{height:38px;width:auto}
.barra nav{display:flex;align-items:center;gap:34px}
.barra nav a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--texto-inverso);position:relative;padding:6px 0;transition:color .3s
}
.barra nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--oro);transition:right var(--transicion)
}
.barra nav a:hover{color:#fff}
.barra nav a:hover::after{right:0}

/* Portada ---------------------------------------------------------------- */
.portada{
  position:relative;
  min-height:clamp(560px,84vh,860px);
  display:grid;
  place-items:center;
  text-align:center;
  padding:clamp(72px,10vw,120px) 0;
  overflow:hidden;
  background:
    radial-gradient(1100px 620px at 50% 0%,rgba(201,171,114,.13),transparent 62%),
    linear-gradient(178deg,var(--petroleo) 0%,var(--petroleo-hondo) 58%,var(--petroleo-noche) 100%);
}
/* Monograma de fondo, muy tenue */
.portada .marca-fondo{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);
  width:min(660px,108vw);opacity:.05;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 25%,transparent 92%);
  mask-image:radial-gradient(closest-side,#000 25%,transparent 92%);
}
.portada .contenido{position:relative;z-index:1;max-width:760px;margin:0 auto}
.portada .logo{height:clamp(112px,15vw,178px);width:auto;margin:0 auto clamp(30px,4.5vw,46px)}
.portada h1{
  font-size:clamp(2.35rem,6vw,4.15rem);
  margin-top:22px;
  letter-spacing:-.005em;
}
.portada h1 em{font-style:italic;color:var(--oro-suave)}
.portada .entrada{
  max-width:560px;margin:26px auto 0;
  color:var(--texto-inverso);
  font-size:clamp(1rem,1.35vw,1.1rem);
}
/* Filete con rombo */
.filete{display:flex;align-items:center;justify-content:center;gap:12px;margin:38px auto 0}
.filete span{display:block;width:clamp(48px,9vw,92px);height:1px;background:linear-gradient(90deg,transparent,var(--oro-tenue))}
.filete span:last-child{background:linear-gradient(90deg,var(--oro-tenue),transparent)}
.filete i{display:block;width:6px;height:6px;background:var(--oro);transform:rotate(45deg)}

.senal-scroll{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.42)
}
.senal-scroll::after{
  content:"";width:1px;height:42px;
  background:linear-gradient(180deg,var(--oro-tenue),transparent);
  animation:latido 2.6s ease-in-out infinite
}
@keyframes latido{0%,100%{opacity:.35;transform:scaleY(.65)}50%{opacity:1;transform:scaleY(1)}}

/* Secciones -------------------------------------------------------------- */
.seccion{padding:clamp(66px,9vw,116px) 0}
.seccion.claro{background:var(--hueso);color:var(--tinta)}
.seccion.claro .antetitulo{color:#a98c52}
.seccion.claro .antetitulo::before,.seccion.claro .antetitulo::after{background:rgba(169,140,82,.4)}

.cabeza-seccion{
  display:grid;gap:18px;
  max-width:720px;margin-bottom:clamp(42px,6vw,68px);
}
.cabeza-seccion h2{font-size:clamp(1.95rem,4.1vw,3rem);color:var(--petroleo)}
.cabeza-seccion .nota{color:var(--tinta-suave);font-size:1rem;max-width:600px}

/* Rejilla de proyectos --------------------------------------------------- */
.rejilla{
  display:grid;gap:clamp(24px,3vw,38px);
  grid-template-columns:repeat(auto-fill,minmax(316px,1fr));
}

.proyecto{
  position:relative;
  background:var(--marfil);
  border-radius:var(--radio-suave);
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 1px 2px rgba(15,47,55,.06),0 14px 34px -24px rgba(15,47,55,.3);
  transition:transform var(--transicion),box-shadow var(--transicion);
}
.proyecto::after{
  content:"";position:absolute;inset:0;border-radius:var(--radio-suave);
  border:1px solid var(--oro-tenue);opacity:0;pointer-events:none;
  transition:opacity var(--transicion)
}
.proyecto:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(15,47,55,.07),0 30px 54px -26px rgba(15,47,55,.42)}
.proyecto:hover::after{opacity:1}

.proyecto .lienzo{
  position:relative;display:block;
  aspect-ratio:3/2;overflow:hidden;
  background:var(--petroleo-hondo);
}
.proyecto .lienzo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.proyecto:hover .lienzo img{transform:scale(1.055)}
.proyecto .lienzo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,31,39,.42) 0%,rgba(0,31,39,0) 34%,rgba(0,31,39,.06) 62%,rgba(0,31,39,.62) 100%);
}
.proyecto .lienzo .respaldo{
  width:100%;height:100%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--petroleo) 0%,var(--petroleo-noche) 100%)
}
.proyecto .lienzo .respaldo img{width:34%;height:auto;object-fit:contain;opacity:.5;transition:none}
.proyecto:hover .lienzo .respaldo img{transform:none}

.sello{
  position:absolute;z-index:2;left:22px;bottom:22px;
  display:inline-flex;align-items:center;gap:8px;
  font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 8px rgba(0,20,26,.6)
}
.sello svg{width:14px;height:14px;color:var(--oro-suave)}
.numero{
  position:absolute;z-index:2;right:20px;top:16px;
  font-family:var(--serif);font-size:1.5rem;font-style:italic;
  color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,20,26,.55)
}

.proyecto .texto{padding:clamp(22px,2.4vw,30px);display:flex;flex-direction:column;flex:1;gap:11px}
.proyecto h3{font-size:clamp(1.5rem,2.1vw,1.85rem);color:var(--petroleo)}
.proyecto .lugar{
  display:flex;align-items:center;gap:7px;
  font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--tinta-tenue)
}
.proyecto .lugar svg{width:12px;height:12px;flex:none;color:var(--oro)}
.proyecto .resena{color:var(--tinta-suave);font-size:.96rem;margin-top:2px}
.proyecto .pie-tarjeta{
  margin-top:auto;padding-top:22px;
  border-top:1px solid var(--linea-clara);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap
}

/* Enlaces y botones ------------------------------------------------------ */
.enlace-flecha{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--petroleo);position:relative;padding-bottom:5px
}
.enlace-flecha svg{width:17px;height:8px;transition:transform var(--transicion)}
.enlace-flecha::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--petroleo);transform-origin:left;transition:transform var(--transicion)
}
.enlace-flecha:hover svg{transform:translateX(6px)}
.enlace-flecha:hover::after{background:var(--oro);transform:scaleX(1)}
.enlace-flecha.tenue{color:var(--tinta-suave)}
.enlace-flecha.tenue::after{background:var(--linea-clara)}
.enlace-flecha.tenue svg{width:14px;height:14px}

.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:400;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 30px;border:1px solid transparent;border-radius:var(--radio);
  cursor:pointer;transition:background .3s,color .3s,border-color .3s;white-space:nowrap
}
.boton svg{width:15px;height:15px}
.boton-oro{background:var(--petroleo);color:#fff}
.boton-oro:hover{background:var(--petroleo-medio)}
.boton-linea{border-color:var(--linea-clara);color:var(--petroleo)}
.boton-linea:hover{border-color:var(--oro);color:#8a6d2f}

/* Estado vacio ----------------------------------------------------------- */
.sin-datos{
  border:1px solid var(--linea-clara);border-radius:var(--radio-suave);
  background:var(--marfil);padding:clamp(48px,7vw,80px) 28px;text-align:center
}
.sin-datos h3{font-size:1.7rem;color:var(--petroleo);margin-bottom:10px}
.sin-datos p{color:var(--tinta-suave);max-width:420px;margin:0 auto}

/* Franja de cierre ------------------------------------------------------- */
.franja{
  background:linear-gradient(140deg,var(--petroleo) 0%,var(--petroleo-hondo) 100%);
  padding:clamp(56px,7vw,86px) 0;text-align:center;position:relative;overflow:hidden
}
.franja::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(680px 320px at 50% 120%,rgba(201,171,114,.16),transparent 70%)
}
.franja .contenedor{position:relative}
.franja h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-bottom:14px}
.franja p{color:var(--texto-inverso);max-width:520px;margin:0 auto 30px}
.franja .acciones{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.boton-claro{border-color:var(--linea-oscura);color:#fff}
.boton-claro:hover{border-color:var(--oro);color:var(--oro-suave)}
.boton-solido-oro{background:var(--oro);color:#22190a}
.boton-solido-oro:hover{background:var(--oro-suave)}

/* Pie -------------------------------------------------------------------- */
.pie{background:var(--petroleo-noche);padding:clamp(52px,7vw,80px) 0 28px}
.pie .columnas{
  display:grid;gap:clamp(30px,5vw,58px);
  grid-template-columns:1.1fr .9fr .9fr;align-items:start
}
.pie .logo-pie{height:112px;width:auto}
.pie h4{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--oro);margin:0 0 18px;font-weight:400
}
.pie ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.pie li,.pie a{color:var(--texto-inverso);font-size:.95rem}
.pie a{transition:color .3s}
.pie a:hover{color:var(--oro-suave)}
.pie .legal{
  margin-top:clamp(38px,5vw,56px);padding-top:22px;
  border-top:1px solid var(--linea-oscura);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:.78rem;letter-spacing:.04em;color:rgba(255,255,255,.4)
}

/* Aparicion al hacer scroll --------------------------------------------- */
.aparece{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform .9s cubic-bezier(.22,.61,.36,1)}
.aparece.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .aparece{opacity:1;transform:none;transition:none}
  .senal-scroll::after{animation:none}
  html{scroll-behavior:auto}
}

/* Responsivo ------------------------------------------------------------- */
@media (max-width:900px){
  .pie .columnas{grid-template-columns:1fr 1fr}
  .pie .columnas > :first-child{grid-column:1/-1}
}
@media (max-width:620px){
  body{font-size:15.5px}
  .barra .contenedor{min-height:66px}
  .barra .logotipo img{height:32px}
  .barra nav{gap:20px}
  .barra nav .oculto-movil{display:none}
  .rejilla{grid-template-columns:1fr}
  .pie .columnas{grid-template-columns:1fr}
  .pie .logo-pie{height:92px}
  .proyecto .pie-tarjeta{flex-direction:column;align-items:flex-start;gap:16px}
}