/* ============================================================================
   CARRUSEL (hero) · Pinto + Pizarro Arquitectos
   Primer bloque visible: imágenes en fundido + logo blanco centrado.
   ============================================================================ */

/* La seccion del carrusel cierra con la misma drop shadow que las demas
   (Figma: X0 Y4 - blur 4 - negro 25%). El z-index es para que la sombra se
   dibuje SOBRE la banda de PROYECTOS que viene abajo. */
#general{ margin:0; padding:0; position:relative;}

.carrusel-container{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:#14100C;
}

.carrusel{ position:relative; width:100%; height:100%; }

/* ---- Slides en fundido ---- */
.slide{
  position:absolute; inset:0;
  opacity:0; z-index:0;
  transition:opacity 1.2s ease;
}
.slide.activo{ opacity:1; z-index:1; }
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Capa oscura para que el logo/branding contraste */
.capa-oscura{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(20,16,12,.45) 0%, rgba(20,16,12,.30) 45%, rgba(20,16,12,.55) 100%);
}

/* ---- Logo blanco + branding centrado ---- */
.carrusel-brand{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:3; text-align:center; pointer-events:none; width:90%;
}
.carrusel-logo{
  width:auto; height:clamp(150px, 34vh, 320px);
  filter:drop-shadow(0 6px 20px rgba(0,0,0,.45));
}
.carrusel-tagline{
  margin:22px 0 0; color:#fff;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(13px, 1.8vw, 20px);
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* ---- Flechas ---- */
.carrusel-flecha{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:4; width:52px; height:52px; border:0; cursor:pointer;
  background:rgba(0,0,0,.28); color:#fff; border-radius:50%;
  font-size:clamp(20px,2.2vw,26px); line-height:1; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.carrusel-flecha:hover{ background:var(--naranja, #F96611); }
.carrusel-flecha.prev{ left:22px; }
.carrusel-flecha.next{ right:22px; }

/* ---- Puntos ---- */
.carrusel-puntos{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; gap:12px;
}
.carrusel-punto{
  width:12px; height:12px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.45); border:0; padding:0; transition:background .2s, transform .2s;
}
.carrusel-punto.activo{ background:#fff; transform:scale(1.25); }

/* En pantallas muy chatas (móvil horizontal) achica un poco el logo */
@media (max-height:520px){
  .carrusel-logo{ height:clamp(110px, 42vh, 200px); }
  .carrusel-tagline{ letter-spacing:.22em; }
}