/* NOVOWIT - Capacidades (stack interactivo)
   Archivo: assets/css/capacidades-stack.css
   Todas las cabeceras usan azul misión-crítica.
*/

@import url("https://fonts.bunny.net/css?family=kodchasan:200,400,600");

/* ===== CONTENEDOR PRINCIPAL ===== */
.cap-stack {
  /* Distancia vertical entre cartas apiladas */
  --_offset-steps: 6rem;
  /* Escala y opacidad de cartas del fondo */
  --_scale-steps: 25;
  --_opacity-steps: 15;

  /* Tiempos de transición */
  --_ani-duration: 300ms;
  --_ani-delay: 200ms;

  /* Color único cabecera (azul comunicaciones / misión crítica) */
  --cap-header-clr: rgba(0,150,255,0.32);

  /* Derivados */
  --_offset-steps-two: calc(var(--_offset-steps) * -1);
  --_offset-steps-three: calc(var(--_offset-steps) * -2);

  --scale-steps-two: calc(1 - var(--_scale-steps) * 0.01);
  --scale-steps-three: calc(1 - var(--_scale-steps) * 0.02);

  --opacity-steps-two: calc(1 - var(--_opacity-steps) * 0.02);
  --opacity-steps-three: calc(1 - var(--_opacity-steps) * 0.04);

  @media (min-width:600px){
    --_offset-steps: 4rem;
    --_offset-steps-two: calc(var(--_offset-steps) * -1);
    --_offset-steps-three: calc(var(--_offset-steps) * -2);
  }

  display: grid;
  grid-template-areas: "stack";
  position: relative;
  isolation: isolate;

  /* más ancha y bajada para que no se pegue con "Soluciones" */
  width: min(calc(100% - 2rem), 50rem);
  margin: 4rem auto 0;

  font-family: "Kodchasan", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Inter", sans-serif;
  color: #fff;
  line-height: 1.5;
}

/* ===== CARTAS ===== */
.cap-stack article {
  --_bg-alpha: .32;
  --_border-radius: 10px;
  --_bg-dot-offset: 20px;

  position: relative;
  background-color: rgba(11,17,26,0.92); /* panel oscuro coherente con la web */
  border-radius: var(--_border-radius);
  border: 1px solid rgba(255,255,255,.07);
  box-shadow:
    0 40px 80px rgba(0,0,0,.9),
    0 16px 32px rgba(0,0,0,.8),
    0 2px 4px rgba(0,0,0,.8);

  grid-area: stack;
  transition: 500ms ease-in-out;

  translate: 0 var(--_offset);
  order: var(--_order);
  z-index: var(--_order);
  scale: var(--_scale);
  opacity: var(--_opacity);

  color: #fff;
  overflow: visible;
  isolation: isolate;
}

/* halo punteado detrás de cada carta */
.cap-stack article::before,
.cap-stack article::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  z-index: -1;
}

.cap-stack article::before {
  inset: calc(var(--_bg-dot-offset) * -1);
  background-image:
    radial-gradient(
      rgba(0,150,255,var(--_bg-alpha,1)) 1px,
      transparent 0px
    );
  background-repeat: repeat;
  background-size: 5px 5px;
  background-position: center;
  border-radius: calc(var(--_border-radius) + var(--_bg-dot-offset));
  filter:
    drop-shadow(0 20px 40px rgba(0,255,194,.25))
    drop-shadow(0 10px 20px rgba(0,0,0,.8));
}

.cap-stack article::after {
  inset: 0;
  background-color: rgba(11,17,26,0.92);
}

/* ===== ORDEN, ESCALA Y OPACIDAD POR TARJETA ===== */
/* Tarjeta 1 */
.cap-stack article:nth-of-type(1){
  --_order:   var(--_1-order);
  --_scale:   var(--_1-scale);
  --_opacity: var(--_1-opacity);
  --_offset:  var(--_1-offset);
  --_pointer-event: var(--_1-pointer-event);
  --_pointer-cursor: var(--_1-pointer-cursor);
}
/* Tarjeta 2 */
.cap-stack article:nth-of-type(2){
  --_order:   var(--_2-order);
  --_scale:   var(--_2-scale);
  --_opacity: var(--_2-opacity);
  --_offset:  var(--_2-offset);
  --_pointer-event: var(--_2-pointer-event);
  --_pointer-cursor: var(--_2-pointer-cursor);
}
/* Tarjeta 3 */
.cap-stack article:nth-of-type(3){
  --_order:   var(--_3-order);
  --_scale:   var(--_3-scale);
  --_opacity: var(--_3-opacity);
  --_offset:  var(--_3-offset);
  --_pointer-event: var(--_3-pointer-event);
  --_pointer-cursor: var(--_3-pointer-cursor);
}

/* ===== QUÉ TARJETA ESTÁ DELANTE (radios) ===== */

/* 1 delante */
.cap-stack:has(input:nth-child(1):checked){
  --_1-order: 3;
  --_1-scale: 1;
  --_1-opacity: 1;
  --_1-offset: 0;
  --_1-pointer-event: auto;
  --_1-pointer-cursor: pointer;

  --_2-order: 2;
  --_2-scale: var(--scale-steps-two);
  --_2-opacity: var(--opacity-steps-two);
  --_2-offset: var(--_offset-steps-two);

  --_3-order: 1;
  --_3-scale: var(--scale-steps-three);
  --_3-opacity: var(--opacity-steps-three);
  --_3-offset: var(--_offset-steps-three);
}

/* 2 delante */
.cap-stack:has(input:nth-child(2):checked){
  --_2-order: 3;
  --_2-scale: 1;
  --_2-opacity: 1;
  --_2-offset: 0;
  --_2-pointer-event: auto;
  --_2-pointer-cursor: pointer;

  --_3-order: 2;
  --_3-scale: var(--scale-steps-two);
  --_3-opacity: var(--opacity-steps-two);
  --_3-offset: var(--_offset-steps-two);

  --_1-order: 1;
  --_1-scale: var(--scale-steps-three);
  --_1-opacity: var(--opacity-steps-three);
  --_1-offset: var(--_offset-steps-three);
}

/* 3 delante */
.cap-stack:has(input:nth-child(3):checked){
  --_3-order: 3;
  --_3-scale: 1;
  --_3-opacity: 1;
  --_3-offset: 0;
  --_3-pointer-event: auto;
  --_3-pointer-cursor: pointer;

  --_1-order: 2;
  --_1-scale: var(--scale-steps-two);
  --_1-opacity: var(--opacity-steps-two);
  --_1-offset: var(--_offset-steps-two);

  --_2-order: 1;
  --_2-scale: var(--scale-steps-three);
  --_2-opacity: var(--opacity-steps-three);
  --_2-offset: var(--_offset-steps-three);
}

/* Accesibilidad teclado: si haces tab a un radio, la flecha de esa carta rota */
.cap-stack:has(input:nth-child(1):focus-visible) article:nth-of-type(1) label,
.cap-stack:has(input:nth-child(2):focus-visible) article:nth-of-type(2) label,
.cap-stack:has(input:nth-child(3):focus-visible) article:nth-of-type(3) label {
  rotate: 90deg;
}

/* ===== CABECERA DE CADA CARTA (todas azules) ===== */
.cap-stack article > header {
  padding: .7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  background-color: var(--cap-header-clr);
  border-radius: var(--_border-radius) var(--_border-radius) 0 0;
  transition: background-color var(--_ani-duration) ease-in-out;
  position: relative;
  z-index: 1;

  box-shadow:
    0 16px 32px rgba(0,0,0,.85),
    0 2px 4px rgba(0,0,0,.9);

  color:#fff;
}

.cap-stack article > header > h2 {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: #fff;

  opacity: var(--_opacity,0);
  transition:
    translate var(--_ani-duration) ease-in-out,
    opacity   var(--_ani-duration) ease-in-out;
  transition-delay: var(--_delay-h2,0);

  max-width: 80%;
}

/* Flecha grande ("X" grande) para pasar a la siguiente */
.cap-stack article > header > label {
  padding: 0;
  color: #fff;
  font-size: 2rem; /* grande */
  font-weight: 600;
  line-height: 1;
  cursor: var(--_pointer-cursor, default);
  pointer-events: var(--_pointer-event, none);
  transition: rotate 300ms ease-in-out;
  user-select: none;
  text-shadow:
    0 4px 8px rgba(0,0,0,.8),
    0 0 8px rgba(255,255,255,.4);
}
.cap-stack article > header > label:hover {
  rotate: 90deg;
}

/* ===== CONTENIDO DE CADA CARTA ===== */
.cap-stack article > div {
  position: relative;
  padding: 2rem 2rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr;
  place-items: start;
  gap: 2rem;
  z-index: 1;
}

@media (min-width:600px){
  .cap-stack article > div {
    grid-template-columns: 1fr 2fr;
  }
}

/* Imagen ligeramente más alta */
.cap-stack article img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow:
    0 24px 48px rgba(0,0,0,.9),
    0 4px 12px rgba(0,0,0,.8),
    0 0 20px rgba(0,255,194,.25);
  opacity: var(--_opacity,0);
  transition: opacity var(--_ani-duration) ease-in-out;
}

/* Texto sin scroll interno */
.cap-stack article .poem {
  width: 100%;
  height: auto;
  max-height: none;
  overflow: visible;
}

.cap-stack article p {
  margin: 0 0 1rem 0;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  opacity: var(--_opacity,0);
  transition: opacity var(--_ani-duration) ease-in-out;
  transition-delay: 500ms;
}

/* ===== Radios ocultos ===== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}