/* ==========================================================================
   Ingenti AI — one-pager  ·  build v3
   Galería expandible de las seis soluciones especializadas.

   Se lee como UNA pieza, no como seis tarjetas: un solo contenedor con borde
   y radio, la retícula de puntos de marca cruzando las seis sin cortes y los
   paneles separados sólo por una línea de un píxel. Las seis soluciones son
   una misma familia; lo que el visitante compara es una contra otra, no cada
   una contra el fondo de la página.

   El panel al que se apunta crece y suelta su descripción; los demás se
   encogen hasta quedarse con el icono y el nombre. El estado NO lo pone
   :hover sino dos clases de scripts/gallery.js — .is-engaged en la lista y
   .is-active en el panel — porque el mismo juego de reglas tiene que servir
   para el ratón, para el teclado y para desengancharse allí donde no hay
   puntero al que responder: pantalla estrecha o pantalla táctil (sección 5).
   ========================================================================== */

/* ---------- 1. La pieza -------------------------------------------------- */
.sgallery {
  display: flex;
  margin-top: clamp(32px, 5vh, 52px);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  /* Mismo fondo que las tarjetas de casos de éxito (.cbento__cell): azul
     profundo en degradado, en vez de la retícula de puntos que tenía antes.
     Los puntos competían con los seis iconos y ensuciaban la lectura; el
     degradado da fondo sin ruido y hermana esta sección con la de resultados. */
  background: linear-gradient(160deg, #0D1826 0%, #090C13 100%);
  /* Recorta las esquinas de los paneles de los extremos; sin esto el primero
     y el último asoman por fuera del radio y vuelven a parecer tarjetas. */
  overflow: hidden;
}

/* ---------- 2. Paneles --------------------------------------------------- */
.sgallery__item {
  position: relative;
  display: flex;
  /* basis 0 y el reparto entero en manos del flex-grow: así «2 frente a 0.5»
     es exactamente la proporción que se ve, sin que el ancho del contenido
     de cada panel desvíe el cálculo. */
  flex: 1 1 0;
  /* Sin esto el contenido marca un suelo de anchura (min-width:auto) y los
     paneles encogidos se niegan a bajar de ahí: la proporción se rompe y la
     fila se desborda. El recorte lo resuelve el overflow del botón. */
  min-width: 0;
  /* Lo único que se anima es el reparto. El cliente pidió ~0.5s ease-in-out. */
  transition: flex-grow .5s ease-in-out;
}

/* Una línea de un píxel entre paneles, no un hueco: el hueco los separaría
   en seis objetos y la galería dejaría de leerse como una sola pieza. */
.sgallery__item + .sgallery__item { border-left: 1px solid var(--line); }

/* Resplandor azul del panel apuntado. Va en una capa aparte para poder
   encenderlo con opacidad: un cambio de background-image no se interpola y
   daría un salto en medio de la expansión. */
.sgallery__item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 120% at 22% 0%, rgba(23, 135, 249, .22), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
  opacity: 0;
  transition: opacity .5s ease-in-out;
  pointer-events: none;
}

/* Filo ámbar inferior: el acento de acción de la marca marcando cuál es el
   panel activo. Crece desde la izquierda, en el mismo tiempo que el reparto. */
.sgallery__item::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--grad-cta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .5s ease-in-out;
  pointer-events: none;
}

.sgallery__btn {
  position: relative;   /* por encima de las dos capas decorativas */
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  /* Todo alineado a la izquierda en los dos estados: el icono y el nombre no
     se mueven de sitio al expandir, sólo aparece contenido a su derecha. */
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  min-height: clamp(288px, 22vw, 340px);
  padding: clamp(15px, 1.4vw, 24px);
  border: 0;
  background: transparent;
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  /* Red de seguridad del min-width:0 de arriba: nada se escapa del panel
     encogido mientras la transición está a medio camino. */
  overflow: hidden;
}

/* El radio de los botones de los extremos acompaña al del contenedor, para
   que el aro de foco (que sigue el border-radius) no quede con la esquina
   cortada por el overflow de la lista. */
.sgallery__item:first-child .sgallery__btn { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.sgallery__item:last-child  .sgallery__btn { border-radius: 0 var(--r-lg) var(--r-lg) 0; }

/* El aro global lleva outline-offset positivo y la galería recorta por los
   bordes: aquí se dibuja por dentro para que el overflow no se lo coma. */
.sgallery__btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: -5px;
}

/* ---------- 3. Contenido del panel --------------------------------------- */
/* Mismo tratamiento de icono que las fichas del resto del sitio: el SVG es de
   200x200 con mucho margen interno, y el 132% recorta ese aire. */
.sgallery__ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  overflow: hidden;
  transition: border-color .5s ease-in-out;
}
.sgallery__ico svg { width: 132%; height: 132%; }

.sgallery__body {
  display: flex;
  flex-direction: column;
  /* flex-start y no stretch: el nombre en vertical tiene que medir lo que
     mide su texto. Estirado, el giro de 180° lo descolocaría hacia un lado. */
  align-items: flex-start;
  gap: 10px;
  /* Pegado al borde inferior: es el punto fijo de la composición, lo que no
     se mueve cuando el panel crece. */
  margin-top: auto;
  min-width: 0;
  max-width: 100%;
}

/* EL NOMBRE SIEMPRE LEGIBLE.
   En reposo un panel mide ~205px y encogido baja de 140px: un nombre en
   horizontal como «V.Insurance» acabaría recortado a media palabra o con
   puntos suspensivos. La solución es girarlo: en vertical el nombre consume
   ~20px de ancho, así que entra completo por estrecho que quede el panel, y
   el alto del panel (300px+) le sobra.
   vertical-rl + rotate(180deg) y no sideways-lr, que sólo entiende Firefox;
   la combinación deja el texto leyéndose de abajo arriba, como el lomo de un
   libro. Los seis empiezan así, también en reposo: de este modo sólo cambia
   de orientación el panel que se expande, uno a la vez, en vez de voltearse
   cinco de golpe en cada movimiento del ratón. */
.sgallery__n {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 500;
  font-size: 1.125rem;
  letter-spacing: -.3px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}

/* El acceso al detalle sólo existe en el panel expandido: display:none y no
   opacidad, porque un rótulo suelto en un panel de 140px estiraría el alto de
   la fila entera aunque estuviese invisible. Aquí display:none no le quita
   nada a nadie: el span lleva aria-hidden en el HTML, nunca estuvo en el árbol
   de accesibilidad, y quien escucha ya sabe que el botón abre algo porque el
   botón declara aria-haspopup="dialog". */
.sgallery__go { display: none; }

/* LA DESCRIPCIÓN NO SE APAGA, SE ESCONDE.
   El nombre accesible de estos botones se calcula a partir de su contenido, y
   display:none saca el texto del árbol de accesibilidad: con la fila expandible
   en marcha, quien usa ratón leía «V.Hotels + la frase» y quien usa lector de
   pantalla oía «V.Hotels» a secas. En la pila estrecha, donde la descripción
   está a la vista, sí la oía — o sea que el escritorio anunciaba menos que el
   móvil, que es justo al revés de lo razonable.
   Se saca del flujo y se recorta a 1px en vez de apagarla. Resuelve lo mismo
   que resolvía el display:none —al ser absoluta no puede empujar el alto de la
   fila desde un panel encogido, que era el motivo de la decisión original— y
   además deja el texto contando para el nombre de los seis botones.
   clip-path y no clip: hace el mismo recorte con la sintaxis viva, y ninguno
   de los dos oculta el nodo para el lector, al contrario que visibility. */
.sgallery__d {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* La descripción vuelve al flujo en los dos sitios donde se lee con los ojos:
   el panel expandido y la página sin JS. El tercero —la pila de la sección 5—
   tiene que repetirlo dentro de su @media, porque allí hay que ganarle en
   especificidad a la variante .is-active de aquí arriba. */
.sgallery__item.is-active .sgallery__d,
html:not(.js) .sgallery__d {
  position: static;
  align-self: stretch;
  width: auto;
  height: auto;
  max-width: 34ch;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

.sgallery__go {
  align-items: center;
  gap: 8px;
  font-family: var(--font-label);
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--amber);
}
/* Punta de flecha dibujada con bordes: no depende de ninguna fuente de
   iconos ni de un glifo que el traductor pudiera tocar. */
.sgallery__go::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* ---------- 4. Estado: el panel apuntado -------------------------------- */
/* .is-engaged = hay un panel al mando; los otros cinco ceden sitio. */
.sgallery.is-engaged .sgallery__item { flex-grow: .5; }
.sgallery .sgallery__item.is-active  { flex-grow: 2; }

.sgallery__item.is-active::before { opacity: 1; }
.sgallery__item.is-active::after  { transform: scaleX(1); }
.sgallery__item.is-active .sgallery__ico { border-color: rgba(23, 135, 249, .5); }

/* El nombre vuelve a la horizontal en el panel expandido. El giro no se
   interpola, pero el pivote es la esquina inferior izquierda en los dos
   estados, así que se lee como un volteo y no como un salto. */
.sgallery__item.is-active .sgallery__n {
  writing-mode: horizontal-tb;
  transform: none;
  animation: sgal-in .45s cubic-bezier(.2, .8, .2, 1) both;
}

/* La descripción no necesita nada aquí: ya es display:block siempre y vuelve
   al flujo con la regla de la sección 3. Esto es sólo para el «Ver detalle». */
.sgallery__item.is-active .sgallery__go { display: inline-flex; }

/* Entran con 120ms de retraso: a esa altura el panel ya tiene casi todo su
   ancho y el texto no se ve reflowar desde dos palabras por línea. */
.sgallery__item.is-active .sgallery__d,
.sgallery__item.is-active .sgallery__go {
  animation: sgal-in .45s cubic-bezier(.2, .8, .2, 1) .12s both;
}

/* El fotograma final es el estado estático del elemento: si el navegador
   recorta la animación (movimiento reducido), el contenido queda bien igual. */
@keyframes sgal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Sin JS nadie pone .is-active: en vez de dejar seis paneles mudos, se
   muestran los seis con su descripción, como una lista. */
html:not(.js) .sgallery__n { writing-mode: horizontal-tb; transform: none; }
html:not(.js) .sgallery__go { display: inline-flex; }

/* ---------- 5. Sin puntero o sin ancho: pila vertical -------------------- */
/* La fila expandible es una interacción de hover: el panel se abre al apuntarlo
   y se cierra al apuntar otro. Donde no hay con qué apuntar, no hay galería.
   Por eso la condición NO puede ser sólo el ancho. Un iPhone 15 Pro Max de
   lado mide 932px y un iPad apaisado 1024px: con el corte puesto únicamente en
   899px esos dos se quedaban con la fila, el dedo no dispara hover, y las seis
   descripciones y los seis «Ver detalle» no aparecían jamás. Seis columnas de
   290px con un icono arriba y el nombre de lado, sin una sola pista de que
   fueran pulsables.
   Se añaden hover:none y pointer:coarse, que describen el puntero PRINCIPAL:
   un portátil con pantalla táctil sigue diciendo hover:hover porque su puntero
   principal es el ratón, así que conserva la fila. Los dos y no sólo uno
   porque hay navegadores táctiles que mienten en hover.
   La condición es la negación exacta de la de gallery.js: si se toca una, hay
   que tocar la otra, o quedaría JS enganchado sobre la pila (o al revés).
   Los selectores repiten la variante .is-active a propósito: si un
   redimensionado deja una clase colgada un instante, el layout de aquí sigue
   mandando. */
@media (max-width: 899px), (hover: none), (pointer: coarse) {
  .sgallery { flex-direction: column; }

  .sgallery .sgallery__item,
  .sgallery.is-engaged .sgallery__item,
  .sgallery .sgallery__item.is-active {
    flex: 0 0 auto;
    transition: none;
  }

  .sgallery__item + .sgallery__item {
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /* El filo ámbar y el resplandor son señal de «panel elegido»: en la pila no
     hay nada elegido, sobran los dos. */
  .sgallery__item::before,
  .sgallery__item::after { content: none; }

  .sgallery .sgallery__btn,
  .sgallery .sgallery__item.is-active .sgallery__btn {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    min-height: 0;
    padding: 20px;
  }
  .sgallery__item:first-child .sgallery__btn { border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .sgallery__item:last-child  .sgallery__btn { border-radius: 0 0 var(--r-lg) var(--r-lg); }

  .sgallery__ico { width: 44px; height: 44px; }

  .sgallery .sgallery__body { margin-top: 0; }

  /* En la pila el panel es ancho: el nombre vuelve a la horizontal y el giro
     vertical no tiene ya ningún problema que resolver. */
  .sgallery .sgallery__n,
  .sgallery .sgallery__item.is-active .sgallery__n {
    writing-mode: horizontal-tb;
    transform: none;
    animation: none;
  }

  /* Aquí la descripción se lee, así que se deshace el recorte de 1px de la
     sección 3 y vuelve al flujo. Va entera porque el panel ocupa todo el
     ancho: sin el tope de 34ch y sin nowrap, que allí sólo servía para que la
     frase escondida no empujara nada. */
  .sgallery .sgallery__d,
  .sgallery .sgallery__item.is-active .sgallery__d {
    position: static;
    /* Repetido aquí para que los seis queden iguales: si un redimensionado
       deja un .is-active colgado, ese panel no puede alinearse distinto. */
    align-self: stretch;
    width: auto;
    height: auto;
    max-width: none;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    animation: none;
  }
  .sgallery .sgallery__go,
  .sgallery .sgallery__item.is-active .sgallery__go {
    display: inline-flex;
    animation: none;
  }
}

/* ---------- 6. Movimiento reducido --------------------------------------- */
/* El reparto cambia igual —el panel enfocado muestra su descripción— pero sin
   nada que se deslice: ni interpolación del flex, ni filo que crezca, ni
   entrada del texto. */
@media (prefers-reduced-motion: reduce) {
  .sgallery__item,
  .sgallery__item::before,
  .sgallery__item::after,
  .sgallery__ico { transition: none; }

  .sgallery__item.is-active .sgallery__n,
  .sgallery__item.is-active .sgallery__d,
  .sgallery__item.is-active .sgallery__go { animation: none; }
}