/* Página /producto.
   Los cuatro pilares comparten estructura: cabecera a la izquierda y la
   rejilla de productos a tres columnas. Sin piezas animadas. */

.prodcab,
.prodpilar,
.prodconnect,
.prodcierre,
.prodroshi {
  padding-top: clamp(72px, 8.4vw, 120px);
  padding-bottom: clamp(72px, 8.4vw, 120px);
  padding-left: clamp(20px, 5.5vw, 80px);
  padding-right: clamp(20px, 5.5vw, 80px);
}

.prodcab__interior,
.prodpilar__interior,
.prodconnect__interior,
.prodcierre__interior,
.prodroshi__interior {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gi);
  box-sizing: border-box;
  container-type: inline-size;
}

/* ---- Cabecera ---- */

.prodcab__interior {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prodcab__titulo {
  font: 700 var(--fs-h1) / var(--lh-h1) var(--fd);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 1000px;
}

.prodcab__entrada {
  font: 400 var(--fs-cuerpo-grande)/1.5 var(--fb);
  color: var(--ink2);
  margin: 0;
  max-width: 760px;
  text-wrap: pretty;
}

.prodcab__botones {
  margin-top: 4px;
}

/* ---- Barra de anclas ---- */

.prodanclas {
  position: sticky;
  top: var(--alto-cabecera, 89px);
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.prodanclas__interior {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5.5vw, 80px);
  box-sizing: border-box;
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}

.prodanclas__interior::-webkit-scrollbar {
  display: none;
}

.prodanclas__enlace {
  flex: none;
  padding: 13px 0 11px;
  font: 500 var(--fs-pequeno) var(--fb);
  color: var(--ink3);
  border-bottom: 2px solid transparent;
  transition:
    color 0.14s,
    border-color 0.14s;
}

.prodanclas__enlace:hover,
.prodanclas__enlace[aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

/* ---- Pilares ---- */

.prodpilar + .prodpilar {
  padding-top: 0;
}

.prodpilar__interior {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5cqi, 64px);
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 5cqi, 64px);
}

.prodpilar__cabecera {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.prodpilar__icono {
  width: 48px;
  height: 48px;
  display: block;
}

.prodpilar__nombre {
  font: 700 var(--fs-h1) / 1.05 var(--fd);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

.prodpilar__frase {
  font: 400 var(--fs-cuerpo-grande)/1.5 var(--fb);
  color: var(--ink2);
  margin: 0;
  max-width: 44ch;
}


.prodpilar__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prodpilar__tarjeta {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition:
    border-color 0.14s,
    background 0.14s;
}

.prodpilar__tarjeta:hover {
  border-color: var(--line3);
  background: var(--raised, var(--card));
}

.prodpilar__titulo {
  font: 700 var(--fs-cuerpo)/1.3 var(--fd);
  color: var(--ink);
  margin: 0;
}

.prodpilar__nuevo {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 6px;
  font: 600 var(--fs-etiqueta)/1 var(--fb);
  letter-spacing: 0.04em;
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 2px 5px;
}

.prodpilar__linea {
  font: 500 var(--fs-pequeno)/1.5 var(--fb);
  color: var(--ink2);
  margin: 0;
}

/* ---- Roshi ---- */

.prodroshi__interior {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

/* La órbita: Roshi arriba, en medio, y los ocho especialistas en una fila
   abajo. Las medidas son las del diseño (un lienzo de 560 × 236 con 24 px
   de más abajo para el nombre), traducidas a porcentajes para que escale. */
.prodroshi__orbita {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  aspect-ratio: 560 / 260;
  min-width: 0;
}

.prodroshi__hilos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.prodroshi__hilos path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.3s ease;
}

.prodroshi__hilos path.es-activo {
  stroke: rgba(0, 194, 255, 0.85);
}

.prodroshi__aura {
  position: absolute;
  left: 50%;
  top: 22.03%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%);
  border-radius: 22%;
  background: url("/assets/img/roshi-aura.3d8a0675.png") center / cover no-repeat;
  z-index: 2;
}

.prodroshi__aura::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 194, 255, 0.3), rgba(0, 194, 255, 0) 68%);
  animation: prodroshiAura 3.2s ease-in-out infinite;
}

@keyframes prodroshiAura {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* El punto que recorre el hilo del especialista encendido. */
.prodroshi__punto {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  z-index: 3;
  pointer-events: none;
}

.prodroshi__nodos {
  list-style: none;
  margin: 0;
  padding: 0;
}

.prodroshi__nodo {
  position: absolute;
  left: calc((var(--i) + 0.5) / var(--n, 8) * 100%);
  top: 88.14%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

/* Los muñecos vienen con su fondo blanco: sobre la banda oscura el
   círculo también es blanco y lleva un anillo, para que ese blanco se vea
   a propósito y no como un parche. */
.prodroshi__cara {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: block;
  background: #fff var(--cara, none) 50% 30% / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: box-shadow 0.3s ease;
}

.prodroshi__nodo.es-activo .prodroshi__cara {
  box-shadow: 0 0 0 2px var(--accent);
}

.prodroshi__nombre {
  position: absolute;
  top: 62px;
  font: 400 var(--fs-etiqueta)/1 var(--fb);
  color: var(--ink2);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.prodroshi__nodo.es-activo .prodroshi__nombre {
  opacity: 1;
  transform: none;
}

.prodroshi__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.prodroshi__titulo {
  font: 700 var(--fs-h1) / 1.08 var(--fd);
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.prodroshi__entrada {
  font: 400 var(--fs-cuerpo)/1.55 var(--fb);
  color: #b6bcc6;
  margin: 0;
  max-width: 560px;
}

.prodroshi__enlace {
  margin-top: 4px;
}

/* Por debajo de 1100 px la órbita se pone encima del texto y los
   especialistas pasan a dos filas de cuatro. */
@media (max-width: 1099px) {
  .prodroshi__interior {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .prodroshi__orbita {
    max-width: 360px;
    /* Crece con las filas que haga falta, dejando sitio para el nombre que
       aparece debajo del especialista encendido. */
    aspect-ratio: 340 / calc(240 + var(--filas, 2) * 86);
  }

  .prodroshi__aura {
    top: 15.76%;
  }

  /* Los especialistas ocupan la mitad de abajo, repartidos en su rejilla. */
  .prodroshi__nodo {
    left: calc((var(--c) + 0.5) / var(--f, 4) * 100%);
    top: calc(45% + (var(--r) + 0.5) / var(--filas, 2) * 50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prodroshi__aura::before {
    animation: none;
  }
}

/* ---- Connect ---- */

.prodconnect__interior {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prodconnect__logo {
  height: 24px;
  width: auto;
  display: block;
  align-self: flex-start;
}

.prodconnect__titulo {
  font: 700 var(--fs-h1) / 1.08 var(--fd);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 100%;
}

.prodconnect__puntos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

.prodconnect__punto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.prodconnect__icono {
  color: var(--ink);
  display: block;
}

.prodconnect__punto-titulo {
  font: 600 var(--fs-h4)/1.3 var(--fb);
  color: var(--ink);
  margin: 0;
}

.prodconnect__punto-texto {
  font: 400 var(--fs-cuerpo)/1.55 var(--fb);
  color: var(--ink2);
  margin: 0;
}

.prodconnect__nota {
  font: 400 var(--fs-etiqueta)/1.4 var(--fb);
  color: var(--ink3);
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

/* ---- Cierre ---- */

.prodcierre__interior {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.prodcierre__titulo {
  font: 700 var(--fs-h1) / 1.1 var(--fd);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  max-width: 640px;
}

/* ---- De tablet en adelante ---- */

@media (min-width: 768px) {
  .prodpilar__interior {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }

  .prodpilar__rejilla {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .prodconnect__puntos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 48px;
  }
}

@media (max-width: 767px) {
  /* Igual que en el resto de la web: el contenido empieza dentro del raíl. */
  .prodcab__interior,
  .prodanclas__interior,
  .prodpilar__interior,
  .prodroshi__interior,
  .prodconnect__interior,
  .prodcierre__interior {
    padding-left: calc(var(--rail-x) + var(--gi));
    padding-right: calc(var(--rail-x) + var(--gi));
  }
}

@media (max-width: 767px) {
  .prodanclas {
    top: var(--alto-cabecera, 65px);
  }

  .prodpilar__rejilla {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .prodpilar__rejilla {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Los fondos modernos. El atajo `background` de arriba deja puesto el color,
   el encuadre y el recorte; aquí solo se cambia la imagen por la versión en
   AVIF o WebP. Va dentro de @supports porque image-set() es reciente: donde
   no se entienda, se queda la de arriba, que ya viene al tamaño correcto. */
@supports (background-image: image-set(url("a.webp") type("image/webp"))) {
  .prodroshi__cara {
    background-image: var(--cara-set, var(--cara, none));
  }
}