/* ==========================================================================
   Juana Casa — proyectos.html
   Requiere base.css y galerias.css.
   ========================================================================== */

.page-head p.page-stats { font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--sage-deep); margin: 18px auto 0; }

/* Grilla de proyectos: 2 columnas parejas, fachadas grandes --------------- */
.proyectos-sec { padding: 16px 0 108px; }
.proyectos-sec .container { max-width: 1320px; }
.proyectos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; }
.proyecto-card { position: relative; aspect-ratio: 3/2; border-radius: 24px; overflow: hidden; box-shadow: 0 16px 44px rgba(20,22,15,.18); background: var(--charcoal-2); transition: transform .5s var(--ease); }
.proyecto-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(20,22,15,.3); }
.proy-foto { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.proy-foto:focus-visible { outline-offset: -4px; }
.proyecto-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.proyecto-card:hover img { transform: scale(1.05); }
.proyecto-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,0) 36%, rgba(0,0,0,.84) 100%); pointer-events: none; }
.proy-badge-m2 { position: absolute; top: 20px; right: 20px; z-index: 2; background: var(--sage-light); color: var(--forest-dark); font-size: .8rem; font-weight: 700; padding: 8px 16px; border-radius: 100px; box-shadow: 0 4px 14px rgba(0,0,0,.18); pointer-events: none; }
.proy-info { position: absolute; left: 28px; right: 28px; bottom: 24px; z-index: 2; color: var(--white); pointer-events: none; }
.proy-info h2 { font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; margin-bottom: 6px; text-shadow: 0 2px 14px rgba(0,0,0,.35); }
.proy-loc { display: block; font-size: .86rem; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.78); }
.proyecto-card:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 18px); }
@media (max-width: 860px) {
  .proyectos-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .proyecto-card:last-child:nth-child(odd) { width: 100%; }
}

/* Botón "Tour 360°" de cada tarjeta --------------------------------------- */
.tour-btn { position: absolute; right: 20px; bottom: 20px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.4); color: var(--white); font-family: inherit; font-size: .84rem; font-weight: 600; padding: 11px 20px 11px 15px; border-radius: 100px; transition: background .3s var(--ease), transform .3s var(--ease), border-color .3s, color .3s; cursor: pointer; }
.tour-btn:hover { background: var(--sage-light); color: var(--forest-dark); border-color: transparent; transform: translateY(-2px); }
.tour-btn svg { flex-shrink: 0; transition: transform .4s var(--ease); }
.tour-btn:hover svg { transform: rotate(180deg); }
.tour-btn.soon { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.62); cursor: default; }
.tour-btn.soon svg { opacity: .7; }
.tour-btn.soon:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.62); transform: none; }
.tour-btn.soon:hover svg { transform: none; }

/* Modal de foto: muestra la fachada completa, sin recorte ----------------- */
#photoModal .modal-content { width: auto; max-height: 88vh; }
#photoModal img { display: block; max-width: 100%; max-height: 88vh; width: auto; height: auto; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.photo-modal-tour-btn { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; display: inline-flex; align-items: center; gap: 9px; background: var(--sage-light); color: var(--forest-dark); font-family: inherit; font-size: .9rem; font-weight: 600; padding: 13px 24px 13px 18px; border-radius: 100px; border: none; box-shadow: 0 12px 32px rgba(0,0,0,.4); cursor: pointer; transition: background .3s var(--ease), transform .3s var(--ease); }
.photo-modal-tour-btn:hover { background: var(--sage-glow); transform: translateX(-50%) translateY(-2px); }
@media (max-width: 768px) { .photo-modal-tour-btn { font-size: .82rem; padding: 11px 20px 11px 15px; bottom: 14px; } }

/* Modal del tour 360° (iframe de Kuula) ----------------------------------- */
#tourModal .modal-content { max-width: 1200px; }
#tourModal iframe { width: 100%; height: 100%; border: 0; display: block; }