/* =====================
       HEADER
    ===================== */
    .gallery-root {
      padding: 3.5rem 2rem 4rem;
    }
 
    .gallery-header {
      text-align: center;
      margin-bottom: 2.5rem;
    }
 
    .gallery-header h1 {
      font-family: 'Poppins-BlackItalic', sans-serif;
      font-size: clamp(2rem, 5vw, 3.2rem);
      font-weight: 800;
      text-transform: uppercase;
      color: #000;
      letter-spacing: 0.05em;
      margin-bottom: 0.4rem;
    }
 
    .gallery-header h1 span {
      color: var(--green-vision);
    }
 
    .gallery-header p {
      font-size: 0.72rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #666;
    }
 
    /* =====================
       GRID PRINCIPAL
    ===================== */
    .gallery-grid {
      display: grid;
      gap: 6px;
      max-width: 1100px;
      margin: 0 auto;
    }
 
    /* Fila superior: 2 imágenes */
    .row-top {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
    }
 
    /* Fila media: lateral + central + lateral */
    .row-mid {
      display: grid;
      grid-template-columns: 1fr 2fr 1fr;
      gap: 6px;
    }
 
    /* Fila inferior: 4 imágenes */
    .row-bot {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 6px;
    }
 
    /* =====================
       CARDS
    ===================== */
    .gallery-item {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border-radius: 3px;
    }
 
    /* Aspect ratios por fila */
    .row-top  .gallery-item::before         { content: ''; display: block; padding-top: 52%; }
    .row-mid  .gallery-item-main::before    { content: ''; display: block; padding-top: 66%; }
    .row-mid  .gallery-item-side::before    { content: ''; display: block; padding-top: 100%; }
    .row-bot  .gallery-item::before         { content: ''; display: block; padding-top: 82%; }
 
    /* =====================
       FONDO / IMAGEN
       Reemplaza el fondo de color por:
       background-image: url('ruta/a/tu-imagen.jpg');
    ===================== */
    .gallery-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
 
    .gallery-item:hover .gallery-bg {
      transform: scale(1.07);
    }
 
    /* Colores de ejemplo — reemplaza por background-image */
    .bg-1 { background-color: #1a3020; background-image: url('../assets/template/instalaciones/proyectos/mexicorifa.webp'); }
    .bg-2 { background-color: #1a1a2e; background-image: url('../assets/template/instalaciones/proyectos/lavisiondemexico.webp'); }
    .bg-3 { background-color: #2e1a1a; background-image: url('../assets/template/instalaciones/proyectos/visionarios.webp'); }
    .bg-4 { background-color: #1a2a2a; background-image: url('../assets/template/instalaciones/proyectos/gajesdeloficio.webp'); }
    .bg-5 { background-color: #2a2a1a; background-image: url('../assets/template/instalaciones/proyectos/frasancolors.webp'); }
    .bg-6 { background-color: #1e1e2e; background-image: url('../assets/template/instalaciones/proyectos/mente.webp'); }
    .bg-7 { background-color: #2a1a2a; background-image: url('../assets/template/instalaciones/proyectos/visionenvivo.webp'); }
    .bg-8 { background-color: #1a2e2a; background-image: url('../assets/template/instalaciones/proyectos/caradetaza.webp'); }
    .bg-9 { background-color: #2e2a1a; background-image: url('../assets/template/instalaciones/proyectos/pacosantos.webp'); }
 
    /* =====================
       DEGRADADO OVERLAY
    ===================== */
    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.82) 0%,
        rgba(0, 0, 0, 0.28) 50%,
        rgba(0, 0, 0, 0.05) 100%
        );
      transition: background 0.35s ease;
    }

    .gallery-item:hover .gallery-overlay {
      background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.92) 0%,
        rgba(0, 0, 0, 0.5)  55%,
        rgba(0, 0, 0, 0.18) 100%
        );
    }
 
    /* =====================
       TEXTO
    ===================== */
    .gallery-text {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 1rem 1.1rem 0.9rem;
      transform: translateY(4px);
      transition: transform 0.35s ease;
    }
 
    .gallery-item:hover .gallery-text {
      transform: translateY(0);
    }
 
    .gallery-tag {
      display: inline-block;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #4ade80;
      margin-bottom: 0.28rem;
    }
 
    .gallery-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 1.25rem;
      font-weight: 700;
      text-transform: uppercase;
      color: #ffffff;
      line-height: 1.1;
      letter-spacing: 0.03em;
    }
 
    /* Título más grande en card principal y fila top */
    .row-mid .gallery-item-main .gallery-title { font-size: 2rem; }
    .row-top .gallery-item .gallery-title       { font-size: 1.6rem; }
 
    /* Línea animada al hover */
    .gallery-hover-line {
      width: 0;
      height: 2px;
      background: #4ade80;
      margin-top: 7px;
      border-radius: 2px;
      transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
 
    .gallery-item:hover .gallery-hover-line {
      width: 36px;
    }
 
    /* =====================
       RESPONSIVE
    ===================== */
    @media (max-width: 768px) {
      .row-top  { grid-template-columns: 1fr; }
      .row-mid  { grid-template-columns: 1fr; }
      .row-bot  { grid-template-columns: 1fr 1fr; }
 
      .row-top  .gallery-item::before      { padding-top: 56%; }
      .row-mid  .gallery-item-main::before { padding-top: 60%; }
      .row-mid  .gallery-item-side::before { padding-top: 56%; }
      .row-bot  .gallery-item::before      { padding-top: 70%; }
    }
 
    @media (max-width: 480px) {
      .gallery-root { padding: 2rem 1rem 3rem; }
      .row-bot { grid-template-columns: 1fr; }
    }


    /* ═══ TEXTO PROYECTOS ═══ */
  .proyectos-info {
    max-width:1024px; margin:0 auto;
    padding:56px 40px 80px;
  }
  .proy-section { margin-bottom:36px; }
  .proy-section-title {
    font-family:'Barlow',sans-serif; font-size:0.82rem; font-weight:700;
    letter-spacing:2px; text-transform:uppercase; color:var(--green);
    margin-bottom:10px;
  }
  .proy-section-text {
    font-size:0.92rem; line-height:1.8; color:#555;
  }