/* Press kit de Atom 118. Se suma a /styles.css (colores, tipografía, pie y botones). */

.hero-press {
  padding-bottom: 1.5rem;
}

.hero-press .logo {
  width: min(15rem, 62vw);
}

.logo-link {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.logo-link:focus-visible,
.pill:focus-visible,
.shot > a:focus-visible,
.asset > a:focus-visible,
.text-link:focus-visible {
  outline: 2px solid var(--yellow-dark);
  outline-offset: 3px;
}

.hero-press h1 {
  margin: 1.25rem 0 0.25rem;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.15;
}

.hero-press .tagline {
  margin-top: 0;
}

.press {
  max-width: 56rem;
}

.press section {
  margin-top: 2.75rem;
}

.press h2 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.25;
}

.press p,
.press li {
  max-width: 44rem;
}

.press p {
  margin: 0 0 0.9rem;
}

.text-link {
  color: var(--text);
  text-decoration-color: var(--yellow-dark);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

/* Botones con texto */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.25rem;
}

.section-actions {
  justify-content: flex-start;
  margin: 0 0 1.25rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.4rem 1.15rem;
  border-radius: 999px;
  background: var(--button-bg);
  color: var(--button-text);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.pill.primary {
  background: var(--primary-bg);
  color: var(--primary-text);
}

.pill .icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (hover: hover) {
  .pill:hover {
    transform: translateY(-0.12rem);
  }
}

/* Presentación: icono y descripción corta */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--card);
}

.intro img {
  flex: none;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 1.6rem;
}

.intro .lead {
  margin: 0;
  font-size: 1.15rem;
}

/* Datos: dos columnas en pantallas anchas, apilados en el móvil */
.facts {
  display: grid;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  background: var(--card);
  overflow: hidden;
}

.facts dt {
  padding: 0.8rem 1.1rem 0;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
  padding: 0.15rem 1.1rem 0.8rem;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}

.facts dd:last-of-type {
  border-bottom: 0;
}

/* Citas y descripciones */
.press blockquote {
  margin: 0 0 1.25rem;
  padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 4px solid var(--yellow-dark);
}

.press blockquote p:last-child {
  margin-bottom: 0;
}

.press blockquote .cite {
  color: var(--muted);
  font-weight: 800;
}

.features {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.features li {
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: var(--card);
}

.features strong {
  font-weight: 800;
}

/* Marcador de lo que falta por escribir: discreto, pero se ve */
.todo {
  padding: 0.05rem 0.35rem;
  border-radius: 0.35rem;
  background: rgb(245 183 0 / 18%);
  box-shadow: inset 0 -2px 0 rgb(245 183 0 / 55%);
}

/* Material */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.shot {
  margin: 0;
}

.shot > a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--card);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot figcaption {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.assets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.asset {
  margin: 0;
}

.asset > a {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--card);
}

.asset img {
  display: block;
  width: 100%;
  height: auto;
}

.asset figcaption {
  margin-top: 0.45rem;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

/* el logo es verde oscuro sobre transparente: se muestra siempre sobre fondo claro */
.asset-logo img {
  padding: 1.25rem;
  background: #f7f6ee;
}

.asset-icon > a {
  width: 10rem;
  max-width: 100%;
}

.asset-icon img {
  max-width: 10rem;
}

@media (hover: hover) {
  .shot > a,
  .asset > a {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .shot > a:hover,
  .asset > a:hover {
    box-shadow: var(--card-shadow);
    transform: translateY(-0.25rem);
  }
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.swatches li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.3rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.9rem;
}

.swatches i {
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid rgb(128 128 128 / 40%);
  border-radius: 50%;
}

.sw-void { background: #05060d; }
.sw-electron { background: #6fe7f5; }
.sw-proton { background: #ff776d; }
.sw-neutron { background: #c7b8de; }
.sw-danger { background: #ff4e57; }

.credits {
  margin: 0;
  padding-left: 1.2rem;
}

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

.faq li {
  margin-bottom: 1rem;
}

.faq strong {
  display: block;
  font-weight: 800;
}

@media (min-width: 40em) {
  .intro {
    flex-direction: row;
    text-align: left;
  }

  .intro .actions {
    justify-content: flex-start;
  }

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

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

  .asset-wide {
    grid-column: 1 / -1;
  }

  .facts {
    grid-template-columns: 11rem 1fr;
  }

  .facts dt,
  .facts dd {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--line);
  }

  .facts dt:last-of-type,
  .facts dd:last-of-type {
    border-bottom: 0;
  }
}

@media (min-width: 64em) {
  .shots {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
  }

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

@media (prefers-reduced-motion: reduce) {
  .pill,
  .shot > a,
  .asset > a {
    transition: none;
  }

  .pill:hover,
  .shot > a:hover,
  .asset > a:hover {
    transform: none;
  }
}

.press h3 {
  margin: 1.5rem 0 0.75rem;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* las rejillas de material usan todo el ancho (el límite de 44rem es para el texto) */
.press .shots li,
.press .assets li,
.press .swatches li {
  max-width: none;
}