/* ============================================================
   INDEX.CSS — Logo circular arriba + grilla 2x2 de secciones.
   Cada tarjeta es una imagen ya diseñada (con su propio título
   y forma incluidos), así que acá solo nos encargamos de que
   llene bien su celda de la grilla y de la interacción al hover.
   ============================================================ */

   .hero{position:relative; z-index:1; padding:44px 5vw 30px; text-align:center;}
   .hero-eyebrow{font-size:.75rem; letter-spacing:.25em; text-transform:uppercase; color:var(--teal); margin-bottom:14px;}
   .hero h1{font-size:clamp(1.8rem,4vw,3rem); line-height:1.15; max-width:820px; margin:0 auto 14px;}
   .hero h1 em{font-style:normal; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
   .hero p{color:var(--ink-dim); max-width:560px; margin:0 auto; font-size:1rem;}
   .hero-text{margin-top:36px;}
   
   /* ===== Contenedor del logo + grilla ===== */
   .quad-wrap{
     position:relative;
     max-width:1200px;
     margin:0 auto;
   }
   
   /* Círculo del logo, superpuesto arriba de la grilla */
   .quad-logo{
     position:relative;
     z-index:5;
     width:50%;
     max-width:300px;
     aspect-ratio:1/1;
     margin:0 auto -10%;
     border-radius:50%;
     display:flex; align-items:center; justify-content:center;
     background:radial-gradient(circle at 40% 35%, rgba(79,184,201,.18), rgba(4,7,10,.4) 70%);
     border:1px solid var(--line);
     box-shadow:0 0 40px rgba(127,224,168,.18), inset 0 0 30px rgba(79,184,201,.12);
   }
   .quad-logo img{
     width:80%; height:auto;
     filter:
       drop-shadow(0 0 8px rgba(127,224,168,.55))
       drop-shadow(0 0 18px rgba(79,184,201,.4));
       margin-left: 1em;
   }
   
   /* ===== Grilla 2x2 ===== */
   .quad-grid{
     position:relative;
     z-index:1;
     display:grid;
     grid-template-columns:1fr 1fr;
     gap:14px;
   }
   
   /* Cada tarjeta es un link que solo contiene la imagen.
      aspect-ratio mantiene las 4 celdas parejas aunque las
      imágenes originales no midan exactamente lo mismo. */
   .quad-card{
     position:relative;
     display:block;
     aspect-ratio:3/2;
     border-radius:20px;
     overflow:hidden;
     /* background-color:var(--panel); se ve un instante mientras carga la imagen */
     background-color:#00000000; 
     transition:transform .25s, box-shadow .25s;
   }
   .quad-card:hover{
     transform:translateY(-4px); 
     /* box-shadow:0 10px 30px rgba(79,184,201,.22); */
   }
   
   .quad-bg{
     display:block;
     width:100%;
     height:100%;
     object-fit:cover;   /* llena la tarjeta sin deformar la imagen */
     object-position:center;
   }
   .quad-tr{
     margin: .4em .6em 0 0;
   }
   .quad-bl{
     margin-left: .7em;
   }
   
   
   /* ============================================================
   RESPONSIVE — index.css
   La grilla 2x2 se mantiene SIEMPRE (nunca pasa a 1 columna).
   Solo se van achicando proporciones a medida que la pantalla
   se angosta: logo, separación entre tarjetas y bordes.
   ============================================================ */

/* ---- Notebook chica / tablet grande (ej: iPad landscape, 1024px) ---- */
@media (max-width:1024px){
  .quad-wrap{max-width:820px;}
  .quad-logo{max-width:240px;}
}

/* ---- Tablet en vertical (ej: iPad portrait, 768px) ---- */
@media (max-width:768px){
  .hero{padding:36px 5vw 24px;}
  .quad-wrap{max-width:600px;}
  .quad-logo{max-width:190px; margin-bottom:-11%;}
  .quad-grid{gap:10px;}
  .hero-text{margin-top:28px;}
}

/* ---- Celular grande (ej: 640px) ---- */
@media (max-width:640px){
  .hero h1{
    font-size: 1.5em;
  }
  .hero-eyebrow{
    font-size: .6em;
  }

  .quad-wrap{max-width:460px;}
  .quad-logo{width:130px; max-width:none; margin-bottom:-12%;}
  .quad-logo img{margin-left:2;}
  .quad-grid{gap:7px;}
  .quad-card{border-radius:12px;}
  .quad-tr{margin:0 .3em 0 0;}
  .quad-bl{ margin-left: .5em;}

  .hero-text{margin-top:20px;}
  .hero-text p{
    font-size: .7em;
  }

}

/* ---- Celular chico (ej: iPhone SE, 400px) ---- */
@media (max-width:400px){
  .hero{padding:26px 4vw 18px;}
  .quad-wrap{max-width:400px;}
  .quad-logo{width:110px; margin-bottom:-15%;}
  .quad-grid{gap:5px;}
  .quad-card{border-radius:9px;}
  .quad-tr{margin:3px .2em 0 0;}
  .quad-bl{ margin-left: .25em;}
}

/* ---- Celular muy chico (ej: 340px) ---- */
@media (max-width:340px){
  .quad-wrap{max-width:330px;}
  .quad-logo{width:100px;}
  .quad-grid{gap:4px;}
}