/* =========================================================
   🧱 Proyectos — Grid + tarjetas glass (sin botón)
   - Toda la tarjeta es clic (enlace invisible de cobertura)
   - Fondo transparente (usa el background global del sitio)
========================================================= */

/* ===== Variables base (puedes moverlas a tu CSS global) */
:root{
  --brand:       #0a0a0a;                    /* Negro principal */
  --gold:        #E3B341;                    /* Dorado cálido principal */
  --gold-700:    #B08A26;                    /* Dorado oscuro */
  --text:        #F3F3F3;                    /* Blanco grisáceo (sin azul) */
  --muted:       rgb(0, 0, 0);      /* Gris claro para texto atenuado */
  --bg:          #000000;                    /* Fondo negro absoluto */

  --glass-bg:    rgba(255,255,255,.05);      /* Gris translúcido (sin azul) */
  --glass-stroke:rgba(255,255,255,.12);      /* Borde suave */
  --shadow-1:    0 10px 30px rgba(0,0,0,.55);/* Sombra más intensa */
  --shadow-2:    0 20px 50px rgba(0,0,0,.65);/* Sombra extendida */
}

/* ===== Página */
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,Arial}
.gs-main{padding-bottom:60px}

/* ===== Sección */
.proyectos-section{
  background: transparent;                 /* pedido: transparente */
  padding: clamp(16px, 3vw, 28px) 0;
}
.proyectos-container{
  width: min(1200px, 92%);
  margin: 0 auto;
}
.proyectos-header{
  text-align: center;
  margin-bottom: clamp(14px, 2vw, 18px);
}
.proyectos-title{
  margin: 0 0 6px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: clamp(1.25rem, 3.2vw, 1.9rem);
}
.proyectos-sub{
  margin: 0;
  color: var(--muted);
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
}

/* ===== Grid */
.proyectos-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.4vw, 18px);
  margin: 10px 0 0;
}
@media (min-width: 640px){
  .proyectos-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1024px){
  .proyectos-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ===== Tarjeta */
.proyecto-card{
  position: relative;
  display: grid;
  grid-template-rows: 180px auto;          /* 👈 sin footer (ya no hay botón) */
  background: var(--glass-bg);
  border: 1px solid var(--glass-stroke);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  isolation: isolate;
}
.proyecto-card:where(:hover,:focus-within){
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: rgba(255,255,255,.25);
}

/* Imagen */
.proyecto-media{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
}
.proyecto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform .35s ease, filter .35s ease;
}
.proyecto-card:hover .proyecto-img{
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.02);
}

/* Contenido */
.proyecto-body{
  padding: 14px 14px 16px;
  display: grid;
  gap: 6px;
}
.proyecto-titulo{
  margin: 0;
  font-size: clamp(1.02rem, 2.6vw, 1.15rem);
  color: var(--text);
  font-weight: 700;
  line-height: 1.25;
}
.proyecto-ubicacion{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* Enlace de cobertura (toda la tarjeta clic) */
.proyecto-link-mask{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Estado vacío / mensajes */
.proyectos-empty{
  margin: 16px auto 0;
  padding: 18px;
  width: min(720px, 94%);
  text-align: center;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.22);
  color: var(--muted);
  background: rgba(255,255,255,.04);
}

/* ====================== SCROLL FIX — Proyectos ====================== */


/* 2) Si tu fondo global bloquea el scroll, libéralo */
body.fondo-principal{
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: auto !important;
}

/* 3) Asegura que el contenido principal no “congele” la página */
.gs-main,
.proyectos-section{
  height: auto !important;       /* evita 100vh aquí */
  overflow: visible !important;
}

/* 4) Evita que header/footer fijos capturen la pantalla completa */
#header-placeholder,
#footer-placeholder{
  position: static !important;   /* por si alguno quedó fixed */
}

/* 5) Scrollbar estético (WebKit/Chromium) */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
*::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.25);
  border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.35); }


/* ===== Ajustes layout: mismo aire izquierda/derecha y animaciones de ingreso */
.proyectos-section{ padding: clamp(16px,3vw,28px) 0; }
.proyectos-container{ width:min(1200px,92%); margin:0 auto; }

/* Efecto de ingreso */
.reveal{ opacity:0; transform:translateY(14px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .45s ease, transform .45s ease; }

/* ===== Card con forma del mock */
.proyecto-card{
  position:relative;
  display:grid;
  grid-template-rows: 220px auto;     /* imagen + contenidos */
  border-radius:22px;                  /* redondeo grande */
  background:#fff;                     /* cuerpo blanco como el mock */
  color:#111;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
  overflow:hidden;
}
@media (min-width:520px){ .proyecto-card{ grid-template-rows: 260px auto; } }
@media (min-width:1024px){ .proyecto-card{ grid-template-rows: 300px auto; } }

/* Imagen */
.proyecto-media{ position:relative; background:#000; }
.proyecto-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Burbuja “Ver en Maps” */
.proy-map{
  position:absolute; left:16px; top:14px; z-index:2;
  display:flex; align-items:center; gap:8px;
  background:#fff; color:#1a1a1a; border-radius:999px;
  padding:8px 12px; box-shadow:0 10px 18px rgba(0,0,0,.18);
  font-weight:700; font-size:.95rem;
}
.proy-map::before{
  content:""; width:14px; height:14px; border-radius:999px;
  background:#ff453a; display:inline-block; box-shadow:0 0 0 3px #ffe4e2 inset;
}

/* Pill centrado “desde XXX m²” */
.proy-pill{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:-14px; z-index:2;
  background:#fff; color:#111; border-radius:14px;
  padding:8px 14px; font-weight:700; box-shadow:0 10px 20px rgba(0,0,0,.20);
}

/* Cuerpo */
.proyecto-body{ padding:22px 18px 0; }

/* Franja roja con el nombre */
.proy-titlebar{
  margin:18px -18px 0; /* ocupar full ancho interno */
  background:#ff3b30; color:#fff; text-align:center;
  font-weight:800; font-size: clamp(1.05rem,2.7vw,1.3rem);
  padding:12px 10px; border-radius:10px;
}

/* Footer con precio + CTA */
.proy-footer{
  display:grid; grid-template-columns:1fr 1fr; gap:0; margin:0 -18px 0;
  border-top:1px solid rgba(0,0,0,.06); overflow:hidden; border-radius:0 0 22px 22px;
}
.proy-price{
  background:#fff; color:#333; padding:14px 16px;
  display:grid; align-content:center; text-align:center;
}
.proy-price small{ display:block; font-size:.88rem; opacity:.8; }
.proy-price strong{ display:block; font-size:1.35rem; color:#e40000; line-height:1.1; }

.proy-cta{
  background:#ff3b30; color:#fff; font-weight:900; letter-spacing:.2px;
  display:flex; align-items:center; justify-content:center;
  padding:14px 16px; text-decoration:none;
}
.proy-cta:where(:hover,:focus){ filter:brightness(1.06); }

/* Enlace de cobertura (toda la tarjeta clic) */
.proyecto-link-mask{ position:absolute; inset:0; z-index:1; }


/* =========================================================
   🧭 Centrado general y márgenes laterales equilibrados
========================================================= */

/* Centra el título y subtítulo */
.proyectos-header {
  text-align: center;
  margin: 0 auto clamp(18px, 2.5vw, 32px);
  max-width: 900px;               /* ancho amable en pantallas grandes */
}

/* Centra la grilla y da aire lateral */
.proyectos-container {
  width: min(1200px, 92%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Ajusta el grid para mantener centrado y aire */
.proyectos-grid {
  display: grid;
  justify-content: center;        /* centra horizontalmente el grid */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2.6vw, 24px);
  width: 100%;
  padding: 0 clamp(12px, 3vw, 28px); /* aire lateral visual */
  box-sizing: border-box;
}

/* Las tarjetas glass se mantienen alineadas y centradas */
.proyecto-card {
  margin: 0 auto;
  width: 100%;
  max-width: 390px;               /* tamaño visual tipo mock */
  justify-self: center;
}

/* En pantallas grandes permite que varias tarjetas se centren armoniosamente */
@media (min-width: 768px) {
  .proyectos-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }
}

/* =========================================================
   🧭 Centrado global con aire lateral tipo header
   - Usa un padding-inline responsivo (hasta 180px en desktop)
   - Mantiene el grid y tarjetas centradas
========================================================= */

/* 1) Variable de padding lateral escalable */
:root { --page-pad: 16px; }                     /* móvil base */
@media (min-width: 640px){  :root{ --page-pad: 24px; } }   /* sm */
@media (min-width: 768px){  :root{ --page-pad: 40px; } }   /* md */
@media (min-width: 1024px){ :root{ --page-pad: 80px; } }   /* lg (tablet horizontal / laptop) */
@media (min-width: 1280px){ :root{ --page-pad: 140px; } }  /* xl */
@media (min-width: 1536px){ :root{ --page-pad: 180px; } }  /* 2xl = header 180px */

/* 2) Contenedor de la sección con padding lateral como el header */
.proyectos-section{
  padding: clamp(20px, 3vw, 36px) 0;
}
.proyectos-container{
  width: 100%;
  max-width: 1920px;                 /* ancho techo cómodo */
  margin: 0 auto;
  padding-inline: var(--page-pad);   /* 👈 aire lateral responsivo */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 3) Título/subtítulo centrados con ancho amable */
.proyectos-header{
  max-width: 980px;
  margin: 0 auto clamp(18px, 2.5vw, 32px);
  text-align: center;
}

/* 4) Grid centrado y con límite de ancho para verse “contenido” en desktop */
.proyectos-grid{
  width: 100%;
  max-width: 1400px;                 /* evita que las tarjetas se abran demasiado */
  margin: 0 auto;
  padding: 0;                        /* el aire lo da el container */
  display: grid;
  justify-content: center;
  gap: clamp(16px, 2.6vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* 5) Tarjetas: centradas y con tope de ancho */
.proyecto-card{
  width: 100%;
  max-width: 390px;                  /* tamaño visual del mock */
  margin: 0 auto;
  justify-self: center;
}

/* 6) Mensaje vacío centrado con mismo aire lateral */
.proyectos-empty{
  width: 100%;
  max-width: 980px;
  margin: clamp(16px, 2vw, 24px) auto 0;
  padding-inline: 0;                 /* ya hereda el aire del container */
}

/* =========================================================
   🧱 Separación
========================================================= */

.proyectos-section {
  position: relative;
  /* 👇 Espacio superior fluido pero más natural */
  margin-top: clamp(40px, 8vw, 72px) !important;
  padding-top: clamp(32px, 4vw, 56px);

  /* 👇 Degradado más suave (sin corte ni sombra fuerte) */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.40) 0%,      /* sombra suave del hero */
    rgba(255, 255, 255, 0.90) 28%, /* transición difusa */
    #ffffff 85%                  /* fondo blanco puro */
  );

  /* 👇 Quita líneas y sombras duras */
  border-top: none !important;
  box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.12) inset;

  z-index: 1;
}

/* Compensación exacta del header fijo al navegar con ancla */
#proyectos {
  scroll-margin-top: 84px;
}


/* =========================================================
   🔧 FIX DURO — imagen uniforme + pill sobre la foto
   (sobreescribe cualquier regla anterior)
========================================================= */

/* Altura estándar de la foto */
:root{ --card-media-h: 300px; }
@media (max-width: 1023.98px){ :root{ --card-media-h: 260px; }}

/* La tarjeta usa SIEMPRE: [media fijo] + [contenido] */
.proyectos-grid .proyecto-card{
  grid-template-rows: var(--card-media-h) auto !important;
}

/* El contenedor de la imagen es relativo y NO recorta overlays */
.proyectos-grid .proyecto-card .proyecto-media{
  position: relative !important;
  height: var(--card-media-h) !important;
  overflow: visible !important;              /* deja salir al pill */
  border-radius: 22px 22px 0 0 !important;
}

/* La imagen rellena 100% del contenedor fijo */
.proyectos-grid .proyecto-card .proyecto-img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
}

/* Pill “desde XX m²” SOBRE la foto, centrado abajo */
.proyectos-grid .proyecto-card .proy-pill{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 14px !important;                   /* 👈 dentro de la imagen */
  z-index: 4 !important;

  background: rgba(255,255,255,.96) !important;
  color: #111 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  padding: 10px 18px !important;
  font-size: clamp(.95rem,2vw,1rem) !important;
  font-weight: 700 !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 16px rgba(0,0,0,.18) !important;
}

/* Título pegado a la imagen (rojo sobre blanco) */
.proyectos-grid .proyecto-card .proyecto-body{
  padding: 0 18px 0 !important;
  gap: 10px !important;
}
.proyectos-grid .proyecto-card .proy-titlebar{
  margin-top: 0 !important;
  background: #fff !important;
  color: #ff3b30 !important;
  font-weight: 900 !important;
  text-align: center !important;
  font-size: clamp(1.25rem,2.8vw,1.55rem) !important;
  padding: 16px 14px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 0 0 12px 12px !important;
}

/* Mantén el glass blanco del “Ver en Maps” */
.proyectos-grid .proyecto-card .proy-map{
  position: absolute !important;
  left: 14px !important;
  top: 14px !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(255,255,255,.95) !important;
  color: #000 !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-weight: 700 !important;
  pointer-events: none !important;           /* informativo */
  backdrop-filter: saturate(1.1) blur(6px) !important;
  -webkit-backdrop-filter: saturate(1.1) blur(6px) !important;
}
.proyectos-grid .proyecto-card .proy-map::before{
  content: "" !important;
  width: 12px !important; height: 12px !important;
  border-radius: 50% !important;
  background: #ff3b30 !important;
  box-shadow: 0 0 0 3px #ffe4e2 inset !important;
}


/* =========================================================
   📐 Compactar columnas: 3 / 2 / 1 con hueco uniforme
   - La tarjeta llena su celda (sin max-width ni márgenes)
   - El único espacio es el gap (igual en filas y columnas)
========================================================= */

.proyectos-grid{
  display: grid;
  justify-items: stretch;         /* las celdas se estiran */
  align-items: start;
  gap: clamp(18px, 2vw, 24px) !important;   /* mismo espacio filas/columnas */
}

/* 💻 PC: 3 columnas */
@media (min-width:1024px){
  .proyectos-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* 📱 Tablet: 2 columnas */
@media (min-width:600px) and (max-width:1023px){
  .proyectos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* 📞 Móvil: 1 columna */
@media (max-width:599px){
  .proyectos-grid{
    grid-template-columns: 1fr !important;
  }
}

/* 🧱 La tarjeta ocupa toda su celda; quitamos topes y márgenes */
.proyecto-card{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;           /* evita “aire” extra dentro del grid */
}


/* =========================================================
   🧱 Espacio lateral fijo y centrado (tipo header)
   - Márgenes fijos a izquierda y derecha
   - Adaptable por tamaño de pantalla
========================================================= */

.proyectos-section {
  padding-left: 180px !important;
  padding-right: 180px !important;
}

/* 💻 PC mediano (pantallas normales) */
@media (max-width: 1439px) {
  .proyectos-section {
    padding-left: 120px !important;
    padding-right: 120px !important;
  }
}

/* 🖥️ PC grande (monitores anchos 1600px+) */
@media (min-width: 1600px) {
  .proyectos-section {
    padding-left: 220px !important;
    padding-right: 220px !important;
  }
}

/* 📱 Tablets */
@media (max-width: 1023px) {
  .proyectos-section {
    padding-left: 60px !important;
    padding-right: 60px !important;
  }
}

/* 📞 Celulares */
@media (max-width: 599px) {
  .proyectos-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* =========================================================
   🧱 Proyectos — más aire arriba y abajo
========================================================= */
.proyectos-section{
  /* separación respecto al header */
  margin-top: clamp(60px, 9vw, 90px) !important;

  /* aire interno arriba y abajo */
  padding-top:  clamp(40px, 5vw, 64px) !important;
  padding-bottom: clamp(48px, 6vw, 90px) !important;
}

/* título/subtítulo un poco más separados del grid */
.proyectos-header{
  margin-bottom: clamp(24px, 3vw, 36px) !important;
}


/* =========================================================
   🎯 Título rojo + dirección centrada
========================================================= */

/* cuerpo de la card: un poco de padding arriba */
.proyectos-grid .proyecto-card .proyecto-body{
  padding: 18px 18px 0 !important;
  gap: 8px !important;
}

/* Nombre del proyecto (rojo, grande, centrado) */
.proyectos-grid .proyecto-card .proy-titlebar{
  margin: 6px 0 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;

  color: #ff3b30 !important;
  font-weight: 900 !important;
  text-align: center !important;
  font-size: clamp(1.25rem, 2.8vw, 1.6rem) !important;
}

/* Dirección debajo del nombre */
.proyectos-grid .proyecto-card .proyecto-ubicacion{
  margin: 0 0 14px !important;
  font-size: .96rem !important;
  color: #555 !important;
  text-align: center !important;
}

/* Burbuja "Ver en Maps" clicable por encima del overlay */
.proyectos-grid .proyecto-card .proy-map{
  pointer-events: auto !important;
  z-index: 8 !important;   /* por encima de .proyecto-link-mask */
}