/* ==============================================
   PROYECTOS RELACIONADOS — CSS
   Usa --page-margin de estilos.css: clamp(20px, 6vw, 120px)
   hero-title-overlay y page-title vienen de estilos.css
   ============================================== */

/* ── Contenedor con márgenes estándar ── */
.proy-container {
  width: 100%;
  max-width: min(1440px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left:  var(--page-margin, clamp(20px, 6vw, 120px));
  padding-right: var(--page-margin, clamp(20px, 6vw, 120px));
  box-sizing: border-box;
}

/* ==============================================
   HERO
   ============================================== */
.proyectos-hero {
  height: 100vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  overflow: hidden;
  padding-bottom: clamp(40px, 8vw, 160px);
  padding-left: var(--page-margin, clamp(20px, 6vw, 120px));
}

.proyectos-hero .hero-background {
  position: absolute;
  inset: 0;
  background-image: url('/assets/Imagenes de alta resolucion/proyectos-portada.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.proyectos-hero .hero-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* ==============================================
   SECCIÓN DE PROYECTOS
   overflow-x:hidden contiene el zigzag translateX
   sin alterar los desplazamientos originales
   ============================================== */
.proyectos-content {
  background: #F5F5F5;
  padding: clamp(60px, 8vw, 120px) 0 clamp(80px, 10vw, 160px);
  overflow-x: hidden;
}

/* ==============================================
   TARJETAS — layout en zigzag fiel al original
   card-left:  translateX(-8%) + esquina sup-izq cuadrada + sombra derecha
   card-right: translateX(+8%) + esquina sup-der cuadrada + sombra izquierda
   ============================================== */
.proyecto-card {
  padding: clamp(20px, 2.5vw, 48px) clamp(20px, 3.5vw, 56px);
  border-radius: clamp(20px, 3vw, 40px);
  margin-bottom: clamp(36px, 5vw, 72px);
  border: 4px solid #142139;
  position: relative;
  box-sizing: border-box;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  padding-bottom: clamp(44px, 5vw, 72px);
}

.proyecto-card:last-child { margin-bottom: 0; }

/* Desplazamiento izquierdo — esquina sup-izq cuadrada — sombra a la derecha */
.card-left {
  border-top-left-radius: 0;
  transform: translateX(-8%);
  box-shadow: 8px 8px 0 #142139;
}

/* Desplazamiento derecho — esquina sup-der cuadrada — sombra a la izquierda */
.card-right {
  border-top-right-radius: 0;
  transform: translateX(8%);
  box-shadow: -8px 8px 0 #142139;
}

/* Hover: levanta la card y agranda la sombra */
.proyecto-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 20px 20px 0 #092C44 !important;
}

.proyecto-card:active {
  transform: translateY(4px) !important;
  box-shadow: 10px 10px 0 #092C44 !important;
}

/* Colores */
.verde-card  { background: #84BC44; }
.naranja-card { background: #F7AD3E; }

/* ==============================================
   TEXTO DEL PROYECTO
   ============================================== */
.proyecto-text {
  display: block;
  font-family: 'Switzer', sans-serif;
  font-size: clamp(15px, 2vw, 40px);
  font-weight: 600;
  color: #142139;
  line-height: 1.25;
  text-align: right;
  text-decoration: none !important;
}

.proyecto-text:hover { text-decoration: none !important; color: #142139; }

/* ==============================================
   BOTÓN DE FLECHA — absoluto, esquina inf-der
   Fiel al original: sale 16px abajo y 24px a la derecha
   ============================================== */
.proyecto-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #F8AF40;
  color: #092C44;
  font-size: clamp(16px, 2.2vw, 48px);
  padding: clamp(4px, 0.5vw, 10px) clamp(12px, 1.6vw, 32px);
  border: 2px solid #092C44;
  border-radius: clamp(10px, 1.2vw, 16px);
  text-decoration: none;
  box-shadow: 8px 8px 0 #092C44;
  position: absolute;
  bottom: clamp(-14px, -1.2vw, -16px);
  right: clamp(-16px, -1.6vw, -24px);
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 20;
}

.proyecto-btn:hover {
  background: #e69e36;
  transform: translateY(-2px);
  box-shadow: 7px 7px 0 #092C44;
  color: #092C44;
  text-decoration: none;
  border: 2px solid #092C44;
}

/* ==============================================
   RESPONSIVE — en móvil, eliminar el zigzag para
   evitar desbordamiento lateral, pero mantener
   la estética (colores, sombras, bordes, botón)
   ============================================== */
@media (max-width: 767.98px) {
  .card-left,
  .card-right {
    transform: none !important;
    border-top-right-radius: 40px;
    border-bottom-left-radius: 40px;
    border-top-left-radius: 0px;
    box-shadow: 6px 6px 0 #142139;
  }

  .proyecto-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 10px 10px 0 #092C44 !important;
  }

  .proyecto-text {
    text-align: center;
  }

  .proyecto-btn {
    bottom: -12px;
    right: -12px;
  }
}