/* ============================================================================
   PROYECTOS · banda de encabezado + tarjetas Privados / Públicos
   Va entre el carrusel y el mapa.
   ============================================================================ */

:root{
  /* Cuánto hace zoom la imagen al pasar el mouse (la tarjeta no cambia de tamaño).
     1.06 = 6%.  Súbelo o bájalo aquí y afecta a las dos tarjetas.             */
  --zoom-tarjeta:1.06;
}

/* ---------------------------------------------------------------------------
   1) BANDA DE ENCABEZADO (reutilizable: .banda-intro)
      Se usa en "PROYECTOS" y en "DONDE HEMOS TRABAJADO".
   Ancho de la ventana. Alto de referencia: 290px en una ventana de 1920x1080
   -> 290 / 1080 = 26.85vh (así escala con cualquier ventana).
   --------------------------------------------------------------------------- */
.banda-intro{
  width:100%;
  height:26.85vh;
  min-height:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:0 20px;
  background:#fff;
  /* SIN drop shadow: la sombra de la seccion no va bajo el titulo, va al
     FINAL de la seccion completa (en Proyectos, despues de las tarjetas). */
  position:relative;
}

.banda-intro-titulo{
  margin:0;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.1em;            /* separación del 10% entre letras */
  font-size:clamp(26px, 3.2vw, 54px);
  color:#14100C;
  line-height:1.1;
}

.banda-intro-subtitulo{
  margin:12px 0 0;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-weight:400;
  letter-spacing:normal;          /* sin separación */
  font-size:clamp(15px, 1.25vw, 21px);
  color:#868686;
}

/* ---------------------------------------------------------------------------
   2) TARJETAS
   Las dos tarjetas + su separación ocupan exactamente el tamaño de la ventana
   (en 1920x1080 -> 1920x1080, con 10px de separación entre ambas).
   --------------------------------------------------------------------------- */
#tarjetas-proyectos{
  width:100%;
  height:100vh;
  display:flex;
  gap:5px;                 /* division mas fina entre Publicos y Privados */
  overflow:hidden;   /* el crecimiento del hover no genera scroll */
  /* Drop shadow de la seccion PROYECTOS (Figma: X0 Y4 - blur 4 - negro 25%).
     Va aqui, al cierre de la seccion, no bajo el titulo. El z-index es para
     que la sombra se dibuje SOBRE la banda que viene abajo. */
  position:relative;
}

.tarjeta{
  position:relative;
  flex:1 1 0;         /* cada una = (100% - 10px) / 2 */
  display:block;
  overflow:hidden;    /* recorta el zoom: la imagen crece SOLO dentro de la tarjeta */
  text-decoration:none;
  /* La tarjeta conserva su tamaño: no se escala. */
}

/* La imagen es la que hace zoom, dentro de los límites de la tarjeta */
.tarjeta img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1);
  transition:transform 1300ms ease-in-out;
  will-change:transform;
}

/* Capa oscura: 25% en reposo */
.tarjeta-capa{
  position:absolute; inset:0;
  background:#000;
  opacity:.25;
  transition:opacity 1300ms ease-in-out;
  z-index:2;
}

/* Texto centrado: oculto en reposo */
.tarjeta-texto{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  z-index:3;
  color:#fff;
  font-family:'Segoe UI', system-ui, sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:clamp(26px, 3.2vw, 54px);
  white-space:nowrap;
  opacity:0;
  transition:opacity 1300ms ease-in-out;
  pointer-events:none;
}

/* --- Estado hover: la imagen hace zoom, la capa sube a 65% y aparece el texto.
       El tamaño de la tarjeta NO cambia.
       --zoom-tarjeta se ajusta en un solo lugar (ver :root abajo).            --- */
.tarjeta:hover img,
.tarjeta:focus-visible img{
  transform:scale(var(--zoom-tarjeta));
}

.tarjeta:hover .tarjeta-capa,
.tarjeta:focus-visible .tarjeta-capa{ opacity:.65; }

.tarjeta:hover .tarjeta-texto,
.tarjeta:focus-visible .tarjeta-texto{ opacity:1; }

/* ---------------------------------------------------------------------------
   3) VERTICAL (alto > ancho): Privados arriba, Públicos abajo
   --------------------------------------------------------------------------- */
@media (orientation:portrait){
  #tarjetas-proyectos{ flex-direction:column; }
}

/* ---------------------------------------------------------------------------
   PANTALLAS TACTILES
   Mismo criterio que en las tarjetas de proyecto: sin mouse no hay hover, asi
   que "Privado" y "Publico" van siempre a la vista. La capa oscura queda a
   .45, mas clara que el .65 del hover pero suficiente para leer el texto.
   --------------------------------------------------------------------------- */
@media (hover: none){
  .tarjeta-texto,
  .tarjeta:hover .tarjeta-texto{ opacity:1; }
  .tarjeta-capa,
  .tarjeta:hover .tarjeta-capa{ opacity:.45; }
  .tarjeta:hover img,
  .tarjeta:focus-visible img{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .tarjeta img, .tarjeta-capa, .tarjeta-texto{ transition:none; }
}