/* home.css — limpiado y responsive */

/* ========== VARIABLES ========== */
:root{
  --bg-overlay: rgba(0,0,0,0.35);
  --bg-overlay-mobile: rgba(255,255,255,0.98);
  --accent: #ff8c66;
  --text-on-dark: #ffffff;
  --text-on-light: #111111;
  --max-width: 1200px;
  --gap: 40px;
  --bp-md: 900px;
  --bp-sm: 750px;
}

/* Reset (ligero) */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:#f8f8f8;
  color:var(--text-on-light);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Intro overlay */
.intro-overlay{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#000;
  color:#fff;
  z-index:2000;
  transition: transform .9s ease, opacity .6s ease;
}
.intro-overlay .intro-logo{
  font-weight:700;
  letter-spacing:4px;
  font-size:1.25rem;
}

/* MENU (header) */
.project-header{
  position:fixed;
  left:0; top:0; width:100%;
  padding:18px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--bg-overlay);
  backdrop-filter: blur(10px);
  z-index:1200;
}

.menu-logo{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:2px;
}

.menu-links{
  display:flex;
  gap:22px;
}

.menu-links a{
  color:#fff;
  text-decoration:none;
  font-size:0.95rem;
  letter-spacing:1px;
  transition:color .25s ease;
}
.menu-links a:hover{ color:var(--accent); }

/* ===== HAMBURGUESA ===== */
.hamburger{
  display:none;
  width:34px;
  height:24px;
  background:transparent;
  border:none;
  cursor:pointer;
}
.hamburger span{
  display:block;
  width:100%;
  height:3px;
  background:#fff;
  margin:5px 0;
  transition:.3s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.hamburger[aria-expanded="true"] span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* ===== MENÚ MÓVIL COMO OVERLAY ===== */
@media (max-width: 750px){

  .hamburger{ display:block; }

  .menu-links {
        display: none;
        position: absolute;
        top: 70px;
        right: 0;
        width: 100%;
        flex-direction: column;
        background: rgba(0,0,0,0.9);
        text-align: center;
        padding: 20px 0;
    }

  .menu-links.open{ display:flex; }

  .menu-links a{
    font-size:1.4rem;
    color:#fff;
    width:100%;
    text-align:center;
    padding:12px 0;
  }
}


/* ===== HOME GALLERY ===== */
.home-gallery{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:120px 40px 80px; /* espacio para header */
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:var(--gap);
}

/* ajustar columnas con auto-fit para mantener responsive */
@media (max-width: 1100px){
  .home-gallery{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .home-gallery{ grid-template-columns: 1fr; padding:110px 18px 60px; gap:20px; }
}

/* proyecto como enlace con background */
.home-project{
  display:block;
  width:100%;
  aspect-ratio: 16/9;
  background-size:cover;
  background-position:center;
  border-radius:12px;
  overflow:hidden;
  transition: transform .35s ease, opacity .35s ease;
  text-decoration:none;
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}
.home-project:hover,
.home-project:focus{ opacity:0.85; transform: translateY(-6px); outline:none; }

/* aspecto en móvil más vertical si lo necesitas */
@media (max-width: 600px){
  .home-project{ aspect-ratio: 4/5; border-radius:10px; }
}

/* QUOTE */
.project-quote{
  padding:80px 20px;
  text-align:center;
  display:flex;
  justify-content:center;
  align-items:center;
}
.project-quote h2{ font-weight:600; margin:0; font-size:1.75rem; }

/* ANIMACIONES FADE-UP */
.fade-up{ opacity:0; transform: translateY(40px); transition: transform .8s cubic-bezier(.2,.9,.2,1), opacity .6s ease; }
.fade-up.visible{ opacity:1; transform: translateY(0); }

/* STUDIO y CONTACT se centran y estilizan */
.studio-section, .contact-section{
  padding:80px 20px;
  max-width:800px;
  margin:40px auto;
  text-align:center;
  background:#fff;
  color:var(--text-on-light);
  border-radius:8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.04);
}
.studio-section h2, .contact-section h2{ font-size:1.9rem; margin-bottom:12px; }
.studio-section p{ font-size:1.05rem; line-height:1.6; color:#333; }

.contact-section form{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:18px;
}
.contact-section input, .contact-section textarea{
  padding:10px 12px;
  font-size:1rem;
  border:1px solid #ddd;
  border-radius:6px;
  resize:vertical;
}
.contact-section button{
  padding:12px 18px;
  font-size:1rem;
  border:none;
  cursor:pointer;
  background:#111;
  color:#fff;
  border-radius:6px;
}
.contact-section button:hover{ background:var(--accent); }

/* FOOTER */
.project-footer{
  padding:60px 20px;
  text-align:center;
  color:#666;
}

/* focus-visible para accesibilidad */
:focus{ outline: none; }
:focus-visible{ outline: 3px solid rgba(255,140,102,0.25); outline-offset:3px; }

/* utilidad para ocultar la intro cuando se elimina por JS (fallback) */
.intro-overlay.hidden{ transform: translateY(-110%); opacity:0; pointer-events:none; }

/* Hover preview: cambiar a segunda imagen al pasar el mouse */
.hover-preview {
  background-size: cover;
  background-position: center;
  transition: background-image .25s ease;
}