/* ==========================================================================
   Juana Casa — páginas de galería (proyectos.html e interiores.html)
   Requiere base.css. Navegación clara, encabezado con pestañas y banda de
   contacto final. Lo específico de cada página va en su propio archivo.
   ========================================================================== */

/* Navegación clara y fija ------------------------------------------------- */
.topnav { position: sticky; top: 0; background: rgba(250,247,240,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--beige); }
.back-link { font-size: .84rem; font-weight: 500; color: var(--forest); margin-left: auto; margin-right: 22px; transition: color .2s; display: inline-flex; align-items: center; gap: 6px; }
.back-link:hover { color: var(--ink); }
@media (max-width: 560px) { .back-link { display: none; } }

/* Encabezado con pestañas Interiores / Proyectos -------------------------- */
.page-head { padding: 64px 0 48px; text-align: center; }
.page-tabs { display: inline-flex; align-items: center; gap: 6px; background: var(--cream-2); border: 1px solid var(--beige); border-radius: 100px; padding: 5px; margin-bottom: 30px; box-shadow: inset 0 1px 2px rgba(0,0,0,.03); }
.page-tab { font-size: .84rem; font-weight: 600; color: var(--forest); padding: 9px 22px; border-radius: 100px; transition: background .3s var(--ease), color .3s, box-shadow .3s; }
.page-tab:hover { color: var(--ink); }
.page-tab.active { background: var(--forest-dark); color: var(--white); box-shadow: 0 6px 18px rgba(20,26,14,.22); }
.page-head h1 { font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; margin-bottom: 18px; }
.page-head h1 em { font-family: var(--font-accent); font-style: italic; font-weight: 500; color: var(--sage-deep); }
.page-head p { font-size: 1.05rem; font-weight: 300; color: var(--text-muted); line-height: 1.7; max-width: 660px; margin: 0 auto; }

/* Banda de contacto final ------------------------------------------------- */
#contacto { scroll-margin-top: 88px; }
.cta-band { background: var(--charcoal); color: var(--white); padding: 96px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ''; position: absolute; top: -120px; right: -100px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(143,168,118,.3) 0%, transparent 70%); }
.cta-band .container { position: relative; z-index: 1; }
.cta-band h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: 14px; }
.cta-band p { font-size: 1.05rem; color: rgba(255,255,255,.8); line-height: 1.7; max-width: 560px; margin: 0 auto 30px; }