/* ==========================================================================
   aloy.css — Page-specific kawaii / cozy-gaming styling for Aloy (3D prints).
   Extends tokens.css + base.css + components.css. Load LAST.
   Chunky rounded shapes, soft pastel shadows, sticker-like cards, gentle
   floating decorative SVGs. All motion honors prefers-reduced-motion.
   ========================================================================== */

/* --- Dotted / starry pastel background on the page body ------------------- */
.theme-aloy {
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 18% 14%, rgba(138, 208, 255, 0.18), transparent 42%),
    radial-gradient(circle at 82% 8%, rgba(201, 182, 255, 0.18), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255, 111, 165, 0.12), transparent 55%),
    radial-gradient(rgba(255, 111, 165, 0.10) 1.5px, transparent 1.6px);
  background-size: auto, auto, auto, 28px 28px;
  /* Por defecto scroll: background-attachment:fixed provoca trepidacion y
     repintados de pantalla completa al hacer scroll en iOS/Android. */
  background-attachment: scroll;
}

/* El efecto de profundidad solo donde no cuesta: punteros finos (escritorio). */
@media (hover: hover) and (pointer: fine) {
  .theme-aloy {
    background-attachment: fixed, fixed, fixed, scroll;
  }
}

/* Section eyebrow gets a playful look in kawaii context */
.theme-aloy .eyebrow {
  color: var(--color-secondary);
}

/* Generic "sticker" surface utility: chunky border + soft offset shadow */
.sticker {
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* .card:hover subia la sombra a --shadow-md, que es la que .sticker ya tiene:
   el hover no cambiaba nada. Aqui si sube un escalon de verdad. */
.sticker:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

/* ==========================================================================
   Decorative floating stickers (stars / hearts / controller)
   ========================================================================== */
.deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--color-pop);
  opacity: 0.85;
  filter: drop-shadow(0 6px 10px rgba(255, 111, 165, 0.22));
  will-change: transform;
}

.deco--star { color: var(--color-accent-sun); }
.deco--heart { color: var(--color-pop); }
.deco--pad { color: var(--color-accent-2); }
.deco--sparkle { color: var(--color-accent); }
.deco--cloud { color: #FFFFFF; }

@keyframes aloy-bob {
  0%, 100% { transform: translateY(0) rotate(var(--deco-rot, 0deg)); }
  50% { transform: translateY(-14px) rotate(var(--deco-rot, 0deg)); }
}

@keyframes aloy-float {
  0%, 100% { transform: translate(0, 0) rotate(var(--deco-rot, 0deg)); }
  33% { transform: translate(6px, -10px) rotate(calc(var(--deco-rot, 0deg) + 4deg)); }
  66% { transform: translate(-6px, -4px) rotate(calc(var(--deco-rot, 0deg) - 4deg)); }
}

.deco--bob { animation: aloy-bob 4.5s var(--ease) infinite; }
.deco--float { animation: aloy-float 7s ease-in-out infinite; }
.deco--slow { animation-duration: 6.5s; }
.deco--delay { animation-delay: 0.8s; }
.deco--delay-2 { animation-delay: 1.6s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 6vw, 6.5rem);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-6);
  max-width: 50rem;
  margin-inline: auto;
  text-align: center;
}

.hero__badge {
  justify-self: center;
}

.hero__title {
  font-size: var(--text-hero);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--color-primary);
  margin: 0;
}

.hero__title-spark {
  display: inline-block;
  font-size: 0.5em;
  vertical-align: super;
  color: var(--color-accent-sun);
}

/* Antes era un <p> aparte; ahora vive dentro del <h1> para que el titular
   contenga "Impresiones 3D". Mismos valores, para que se vea igual. */
.hero__title-sub {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: normal;
  color: var(--color-secondary);
}

.hero__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: center;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 2px dashed var(--color-pop);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.hero__note svg {
  flex: none;
  color: var(--color-pop);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.hero__cta .btn {
  min-width: 14rem;
}

/* Hero decoration anchors (absolute within .hero) */
.hero .deco--1 { top: 8%; left: 6%; width: 58px; height: 58px; --deco-rot: -8deg; }
.hero .deco--2 { top: 14%; right: 9%; width: 70px; height: 70px; --deco-rot: 10deg; }
.hero .deco--3 { bottom: 16%; left: 12%; width: 64px; height: 64px; --deco-rot: 6deg; }
.hero .deco--4 { bottom: 10%; right: 8%; width: 52px; height: 52px; --deco-rot: -6deg; }
.hero .deco--5 { top: 46%; left: 2%; width: 40px; height: 40px; --deco-rot: 14deg; }
.hero .deco--6 { top: 40%; right: 3%; width: 44px; height: 44px; --deco-rot: -12deg; }

@media (max-width: 640px) {
  .hero .deco--3,
  .hero .deco--5,
  .hero .deco--6 { display: none; }
  .hero .deco--1 { width: 42px; height: 42px; }
  .hero .deco--2 { width: 48px; height: 48px; }
  .hero__cta .btn { min-width: 0; flex: 1 1 auto; }
}

/* ==========================================================================
   Section heading block
   ========================================================================== */
.section-head {
  max-width: 44rem;
  margin: 0 auto var(--space-7);
  text-align: center;
}

.section-head__title {
  font-size: var(--text-2xl);
}

.section-head__text {
  margin-top: var(--space-3);
  color: var(--color-muted);
  font-size: var(--text-lg);
}

/* ==========================================================================
   Gallery — filter bar + masonry grid
   ========================================================================== */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-7);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.filter-btn:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.filter-btn.is-active {
  color: var(--color-cta-ink);
  background-color: var(--color-cta);
  border-color: var(--color-cta);
  box-shadow: var(--shadow-sm);
}

/* Masonry via CSS columns (graceful, no JS needed) */
.gallery {
  columns: 1;
  column-gap: var(--space-5);
}

@media (min-width: 560px) {
  .gallery { columns: 2; }
}

@media (min-width: 960px) {
  .gallery { columns: 3; }
}

.gallery__item {
  break-inside: avoid;
  margin-bottom: var(--space-5);
  transition:
    opacity var(--dur-slow) var(--ease),
    transform var(--dur-slow) var(--ease);
}

/* Filtered-out tiles: fade + remove from flow */
.gallery__item[hidden] {
  display: none;
}

.gallery__item.is-filtering {
  opacity: 0;
  transform: scale(0.96);
}

/* The tile itself is a button (sticker card) */
.tile {
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  overflow: hidden;
  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.tile:hover,
.tile:focus-visible {
  transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.tile__media {
  position: relative;
  display: block;
}

.tile__media svg,
.tile__media img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hover overlay (name + category) */
.tile__overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-3);
  color: #FFFFFF;
  background: linear-gradient(
    to top,
    rgba(58, 37, 64, 0.78),
    rgba(58, 37, 64, 0)
  );
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.tile:hover .tile__overlay,
.tile:focus-visible .tile__overlay {
  opacity: 1;
  transform: translateY(0);
}

.tile__name {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  font-size: var(--text-base);
  line-height: 1.2;
}

.tile__cat {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.22);
  white-space: nowrap;
}

/* Caption strip below media (always visible, helps no-hover/touch) */
.tile__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.tile__caption-name {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
}

.tile__caption-cat {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-secondary);
}

/* ==========================================================================
   3D viewer card
   ========================================================================== */
/* Dos visores lado a lado en pantallas anchas, apilados en movil. */
.viewer-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  max-width: 62rem;
  margin-inline: auto;
}

@media (min-width: 860px) {
  .viewer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.viewer-grid .viewer-card {
  max-width: none;
}

/* En pareja los visores pueden ser mas bajos sin perder gracia. */
@media (min-width: 860px) {
  .viewer-grid model-viewer {
    height: 360px;
  }
}

.viewer-card {
  max-width: 52rem;
  margin-inline: auto;
  padding: var(--space-5);
  background:
    linear-gradient(135deg, rgba(255, 143, 186, 0.12), rgba(201, 182, 255, 0.12)),
    var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.viewer-card__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #FFFFFF, var(--color-bg));
  border: 2px solid var(--color-border);
}

/* display:block es deliberado: <model-viewer> es un elemento desconocido hasta
   que el CDN lo registra, y sin esto seria inline (altura 0) y la pagina daria
   un salto de ~420px al definirse. Asi el hueco queda reservado desde el
   primer pintado. La altura ya NO va inline en el HTML, para que el ajuste
   movil de mas abajo pueda aplicarse. */
.viewer-card model-viewer {
  display: block;
  width: 100%;
  height: 420px;
  background-color: transparent;
  --poster-color: transparent;
}

.viewer-card__fallback {
  margin: 0;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-muted);
  background-color: var(--color-bg);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.viewer-card__caption {
  margin-top: var(--space-4);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  color: var(--color-secondary);
}

@media (max-width: 560px) {
  .viewer-card model-viewer { height: 320px; }
}

/* ==========================================================================
   Materials cards
   ========================================================================== */
.material-card {
  position: relative;
  align-items: flex-start;
  border-width: 2px;
}

.material-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

.material-card--pla .material-card__icon {
  background: linear-gradient(135deg, var(--color-accent-mint), var(--color-accent));
}
.material-card--petg .material-card__icon {
  background: linear-gradient(135deg, var(--color-accent-2), var(--color-pop));
}
.material-card--resina .material-card__icon {
  background: linear-gradient(135deg, var(--color-accent-sun), var(--color-pop));
}

.material-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.7rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-secondary);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Steps (Como encargar)
   ========================================================================== */
.step-card {
  position: relative;
  align-items: flex-start;
  border-width: 2px;
  padding-top: var(--space-7);
}

.step-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: var(--space-5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--color-cta-ink);
  background-color: var(--color-primary);
  border: 3px solid var(--color-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.step-card__icon {
  color: var(--color-secondary);
}

/* ==========================================================================
   Contacto
   ========================================================================== */
.contact-card {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
  align-items: center;
  padding: var(--space-8);
  border-width: 3px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 143, 186, 0.14), transparent 60%),
    var(--color-surface);
}

.contact-card .btn-whatsapp {
  background-color: var(--color-whatsapp);
  color: var(--color-cta-ink);
  border-color: var(--color-whatsapp);
}

.contact-card .btn-whatsapp:hover {
  filter: brightness(1.05);
  box-shadow: var(--shadow-md);
}

.contact-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  justify-content: center;
  margin-top: var(--space-5);
}

.contact-list__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.contact-list__item svg {
  color: var(--color-primary);
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background-color: rgba(58, 37, 64, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox__dialog {
  position: relative;
  width: min(46rem, 100%);
  max-height: 90vh;
  overflow: auto;
  background-color: var(--color-surface);
  border: 3px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transform: scale(0.94);
  transition: transform var(--dur) var(--ease);
}

.lightbox.is-open .lightbox__dialog {
  transform: scale(1);
}

.lightbox__media {
  background: radial-gradient(circle at 50% 30%, #FFFFFF, var(--color-bg));
}

.lightbox__media svg,
.lightbox__media img {
  display: block;
  width: 100%;
  height: auto;
}

.lightbox__body {
  padding: var(--space-5) var(--space-6) var(--space-6);
}

.lightbox__title {
  font-size: var(--text-xl);
  color: var(--color-primary);
}

.lightbox__cat {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-cta);
}

.lightbox__caption {
  margin-top: var(--space-3);
  color: var(--color-muted);
}

.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-primary);
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.lightbox__close:hover {
  background-color: var(--color-border);
  transform: scale(1.06);
}

/* Lock body scroll while lightbox open */
body.is-locked {
  overflow: hidden;
}

/* ==========================================================================
   Reduced motion: disable bobbing/floating + lightbox scaling
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .deco--bob,
  .deco--float {
    animation: none !important;
  }

  .tile:hover,
  .tile:focus-visible {
    transform: none;
  }

  .lightbox__dialog {
    transform: none;
  }

  .gallery__item.is-filtering {
    transition: none;
  }
}