/* ============================================================
   OMNIS — Sección de paneles (estilo Clase Azul)
   Paneles horizontales con imagen + texto; se expanden al hover.
   Minimalista, CSS puro.
   ============================================================ */
.panels{
  display:flex;width:100%;height:90vh;overflow:hidden;background:#06080b;
}
.panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;text-decoration:none;
  transition:flex-grow .8s cubic-bezier(.7,0,.2,1);
}
.panel + .panel{box-shadow:-1px 0 0 rgba(255,255,255,.08)}

@media(hover:hover){
  .panels:hover .panel{flex-grow:.72}
  .panels .panel:hover{flex-grow:2.4}
}

.panel__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.35) brightness(.6);transform:scale(1.03);
  transition:transform 1s var(--ease), filter .7s ease;
}
.panel:hover .panel__img{filter:grayscale(0) brightness(.85);transform:scale(1.08)}
.panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,11,.18),rgba(6,8,11,.55))}

.panel__label{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:20px}
.panel__label span{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(24px,2.8vw,46px);letter-spacing:.05em;color:var(--cream);
  text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.55);white-space:nowrap;
  transition:letter-spacing .7s var(--ease);
}
.panel:hover .panel__label span{letter-spacing:.12em}

@media(max-width:760px){
  .panels{flex-direction:column;height:auto}
  .panel{height:42vh}
  .panels:hover .panel,.panels .panel:hover{flex-grow:1}
}