/* Portada (encima de base.css + c.css + cv2.css + tienda.css): texto con íconos de uso
   y un escenario 3D donde los productos giran en carrusel. Móvil primero. */
.hero-giro { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: radial-gradient(120% 90% at 72% 48%, oklch(45% 0.14 258) 0%, var(--cobalto) 55%, oklch(29% 0.11 260) 100%); color: #fff; overflow: clip; }
.hero-texto { position: relative; z-index: 2; display: grid; gap: 1rem; align-content: center; justify-items: start; padding: 1.75rem 1.25rem 0; }
.hero-texto h1 { font-size: clamp(2rem, 6.4vw, 3.9rem); max-width: 17ch; }
.hero-texto p { margin: 0; max-width: 34rem; font-size: 1.05rem; color: oklch(90% 0.03 255); }

/* Usos con ícono: se entienden sin leer */
.hero-usos { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; width: 100%; max-width: 34rem; }
.hero-usos button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; gap: .35rem; width: 100%; min-height: 44px; padding: .75rem .2rem .6rem; border: 1px solid oklch(100% 0 0 / .18); border-radius: 16px; background: oklch(100% 0 0 / .1); font-size: .82rem; font-weight: 600; text-align: center; transition: background-color 160ms ease-out, transform 160ms var(--ease); }
.hero-usos button:hover { background: oklch(100% 0 0 / .18); transform: translateY(-2px); }
.hero-usos button:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
.hero-usos .icono { color: var(--acento); }
/* En el celular los dos botones van lado a lado, así el escenario entra en la primera pantalla */
.hero-texto .hero-acciones { flex-wrap: nowrap; gap: .5rem; width: 100%; }
.hero-texto .hero-acciones a { flex: 1 1 0; justify-content: center; min-width: 0; padding: 0 .75rem; font-size: .95rem; }
.icono { width: 1.9rem; height: 1.9rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Escenario 3D */
.escenario { --lado: 7.5rem; --centro: 44%; position: relative; height: 19rem; perspective: 1100px; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.escenario.arrastrando { cursor: grabbing; }
.escenario-pez { position: absolute; left: 50%; top: 44%; width: 118%; max-width: 46rem; transform: translate(-50%, -50%); color: oklch(100% 0 0 / .06); }
.escenario-piso { position: absolute; left: 50%; top: calc(var(--centro) + var(--lado) * .62); width: calc(var(--lado) * 2.6); height: calc(var(--lado) * .5); transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, oklch(18% 0.08 260 / .55), transparent); }
.anillo { list-style: none; position: absolute; inset: 0; margin: 0; padding: 0; transform-style: preserve-3d; }
/* Cada producto en su caja 3D: todas del mismo tamaño, con canto (grosor) que se ve al girar y brillo de vitrina */
.pieza3d { --ex: 0; position: absolute; left: 50%; top: var(--centro); width: var(--lado); height: calc(var(--lado) * 1.25); margin: calc(var(--lado) * -.625) 0 0 calc(var(--lado) / -2); will-change: transform, opacity; }
.caja3d { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; height: 100%; border-radius: 22px; overflow: hidden; color: var(--tinta); text-decoration: none; -webkit-tap-highlight-color: transparent;
  background: linear-gradient(165deg, oklch(99% 0.006 85) 0%, var(--crema) 55%, var(--crema-2) 100%);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .9), inset 0 -2px 0 oklch(80% 0.03 75 / .6),
    calc(var(--ex) * 1px) 9px 0 0 oklch(80% 0.035 75), calc(var(--ex) * 1px) 10px 0 1px oklch(70% 0.04 70 / .5),
    0 34px 44px -18px oklch(12% 0.06 260 / .65); }
.caja3d::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, oklch(100% 0 0 / .55) 0%, oklch(100% 0 0 / 0) 38%, oklch(100% 0 0 / 0) 70%, oklch(100% 0 0 / .18) 100%); }
.caja3d-foto { position: relative; min-height: 0; }
.caja3d-foto::before { content: ""; position: absolute; left: 22%; right: 22%; bottom: 3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, oklch(30% 0.05 60 / .35), transparent); }
/* La foto va fija en su zona, apoyada abajo como sobre una repisa; --talla la achica (el pichel menos alto que la silla) */
.caja3d-foto img { position: absolute; left: 50%; bottom: 7%; width: auto; height: auto; max-width: 80%; max-height: calc(var(--talla, 1) * 84%); transform: translateX(-50%); filter: drop-shadow(0 10px 8px oklch(30% 0.05 40 / .25)); pointer-events: none; -webkit-user-drag: none; }
.caja3d-pie { display: grid; gap: .05rem; padding: .45rem .7rem .6rem; border-top: 1px solid oklch(85% 0.025 80); background: oklch(100% 0 0 / .65); text-align: center; }
.caja3d-pie b { overflow: hidden; font-size: .72rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.caja3d-pie span { font-family: var(--fuente-display); font-size: .9rem; font-weight: 700; line-height: 1.1; color: var(--cobalto); }
.caja3d:focus-visible { outline: 3px solid var(--acento); outline-offset: 4px; }

.escenario-pie { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 3; display: flex; align-items: center; justify-content: center; gap: .75rem; padding: 0 1rem; }
.escenario-flecha { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid oklch(100% 0 0 / .4); border-radius: 50%; background: oklch(100% 0 0 / .08); color: #fff; }
.escenario-flecha:hover { background: oklch(100% 0 0 / .2); }
.escenario-flecha svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.escenario-etiqueta { display: grid; place-items: center; min-width: 0; width: min(13rem, 100%); min-height: 44px; padding: .4rem 1.1rem; font-weight: 700; border-radius: 999px; background: oklch(100% 0 0 / .95); color: var(--tinta); text-align: center; text-decoration: none; box-shadow: 0 8px 24px oklch(15% 0.06 260 / .35); }

/* Colecciones por uso: cinco mosaicos iguales; cada foto en su propia caja, mismo tamaño, nada se sale */
.colecciones .coleccion { display: grid; grid-template-rows: auto auto auto; gap: .2rem; height: 100%; padding: .75rem .75rem 1rem; border-radius: calc(var(--radio) * 1.4); background: var(--cobalto); color: #fff; overflow: hidden; }
.colecciones li:nth-child(2) .coleccion { background: var(--acento); color: var(--acento-tinta); }
.colecciones li:nth-child(3) .coleccion { background: oklch(52% 0.11 150); color: #fff; }
.colecciones li:nth-child(4) .coleccion { background: var(--tinta); color: #fff; }
.colecciones li:nth-child(5) .coleccion { background: oklch(55% 0.17 15); color: #fff; }
.colecciones .coleccion-fotos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; aspect-ratio: auto; margin-bottom: .6rem; }
.colecciones .coleccion-fotos > span { display: grid; place-items: center; aspect-ratio: 1; padding: .6rem; border-radius: var(--radio); background: oklch(100% 0 0 / .9); }
.colecciones .coleccion-fotos img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 6px 6px oklch(20% 0.05 40 / .2)); }
.colecciones .coleccion-nombre { font-size: 1.35rem; }
.colecciones li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.colecciones li:last-child:nth-child(odd) .coleccion-fotos { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* misma medida de foto que los mosaicos de media columna */

/* Filtros con dibujo: ícono por uso y miniatura por familia */
.chip .icono { width: 1.25rem; height: 1.25rem; }
.chip:has(.icono) { display: inline-flex; align-items: center; gap: .4rem; padding-left: .8rem; }
.chips-familia { gap: .6rem; padding-bottom: .4rem; }
.chip-foto { flex: none; display: grid; justify-items: center; gap: .3rem; width: 6.25rem; padding: .5rem .35rem .55rem; border: 1.5px solid var(--linea); border-radius: 14px; background: #fff; font-size: .82rem; font-weight: 600; line-height: 1.15; text-align: center; color: var(--tinta); }
.chip-foto img { width: 4.25rem; height: 4.25rem; object-fit: contain; }
.chip-foto:hover { border-color: var(--cobalto); }
.chip-foto[aria-pressed="true"] { border-color: var(--cobalto); box-shadow: inset 0 0 0 1px var(--cobalto); background: oklch(95% 0.03 258); }

@media (min-width: 48rem) {
  .hero-giro { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); min-height: min(86vh, 48rem); padding-inline: max(0rem, calc((100vw - 76rem) / 2)); }
  .hero-texto { gap: 1.25rem; padding: 3rem 1rem 3.5rem 1.5rem; }
  .hero-texto .hero-acciones { flex-wrap: wrap; width: auto; }
  .hero-texto .hero-acciones a { flex: none; padding: 0 1.5rem; font-size: 1rem; }
  .escenario { --lado: 12.5rem; --centro: 46%; height: auto; min-height: 34rem; }
  .caja3d-pie { padding: .6rem .9rem .75rem; }
  .caja3d-pie b { font-size: .88rem; }
  .caja3d-pie span { font-size: 1.15rem; }
  .escenario-pie { bottom: 2rem; }
  .colecciones { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .colecciones li:last-child:nth-child(odd) { grid-column: auto; }
  .colecciones li:last-child:nth-child(odd) .coleccion-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chips-familia { flex-wrap: wrap; overflow: visible; }
}
@media (min-width: 72rem) { .escenario { --lado: 14rem; } }