/* Vamp — Alquimia Natural
   SOLO se carga en vamp.html (body.pagina-vamp).
   No debe enlazarse desde otras páginas del sitio. */

.pagina-vamp {
  --vamp-morado: #2a0f3d;
  --vamp-morado-suave: #3d1a58;
  --vamp-acido: #b8f000;
  --vamp-acido-hover: #c8ff1a;
  --vamp-crema: #f3eef8;
  --vamp-tinta: #f5f0fa;
  --vamp-tinta-suave: rgba(245, 240, 250, 0.78);
  --vamp-borde: rgba(184, 240, 0, 0.28);
}

/* La cabecera y el pie del sitio siguen con la marca principal.
   Solo el main de Vamp usa la estética de alquimia. */

.pagina-vamp .vamp-main {
  background: var(--vamp-morado);
  color: var(--vamp-tinta);
}

.pagina-vamp .vamp-hero {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(184, 240, 0, 0.12), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 100%, rgba(122, 60, 180, 0.35), transparent 50%),
    var(--vamp-morado);
  color: var(--vamp-tinta);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--vamp-borde);
}

.pagina-vamp .vamp-hero__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--vamp-acido);
  margin: 0 0 0.75rem;
}

.pagina-vamp .vamp-hero h1 {
  color: var(--vamp-tinta);
  margin-bottom: 0.65rem;
  font-size: clamp(1.85rem, 5vw, 2.75rem);
}

.pagina-vamp .vamp-hero__bajada {
  max-width: 36rem;
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.6;
  color: var(--vamp-tinta-suave);
  margin: 0;
}

/* Foto de presentación: debajo del texto en móvil, al lado en pantalla ancha. */
.pagina-vamp .vamp-hero__grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
}

.pagina-vamp .vamp-hero__foto {
  max-width: 20rem;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--vamp-borde);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pagina-vamp .vamp-hero__foto img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 760px) {
  .pagina-vamp .vamp-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
  }

  .pagina-vamp .vamp-hero__foto {
    max-width: none;
    justify-self: end;
  }
}

.pagina-vamp .vamp-lista {
  background: var(--vamp-morado);
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(3rem, 7vw, 5rem);
}

.pagina-vamp .vamp-aviso {
  background: rgba(184, 240, 0, 0.1);
  border: 1px solid var(--vamp-borde);
  border-left: 4px solid var(--vamp-acido);
  border-radius: var(--radio);
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.75rem;
  max-width: 44rem;
}

.pagina-vamp .vamp-aviso p {
  margin: 0;
  color: var(--vamp-tinta);
  font-size: 0.98rem;
  line-height: 1.55;
}

.pagina-vamp .vamp-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

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

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

.pagina-vamp .vamp-producto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: var(--vamp-morado-suave);
  border: 1px solid var(--vamp-borde);
  border-radius: var(--radio);
  padding: 0 1.3rem 1.4rem;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.pagina-vamp .vamp-producto__foto {
  margin: 0 -1.3rem 0;
  padding: 0;
  aspect-ratio: 1;
  background: #241036;
  overflow: hidden;
}

.pagina-vamp .vamp-producto__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La tarjeta solo se pone en fila cuando de verdad hay ancho para las tres
   cosas. Con dos columnas de rejilla, por debajo de 1200px el botón le comía
   el sitio al nombre y el texto se partía letra a letra. */
.pagina-vamp .vamp-producto .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

@media (min-width: 1200px) {
  .pagina-vamp .vamp-producto {
    grid-template-columns: 148px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: 0.55rem 1.2rem;
    padding: 0.85rem 1.15rem 0.85rem 0.85rem;
  }

  .pagina-vamp .vamp-producto__foto {
    margin: 0;
    grid-row: 1 / -1;
    width: 148px;
    height: 148px;
    aspect-ratio: 1;
    border-radius: calc(var(--radio) - 4px);
  }

  .pagina-vamp .vamp-producto .btn {
    width: auto;
    justify-self: start;
  }
}

.pagina-vamp .vamp-producto__info {
  min-width: 0;
}

.pagina-vamp .vamp-producto__nombre {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--vamp-tinta);
  letter-spacing: -0.02em;
}

.pagina-vamp .vamp-producto__precio {
  margin: 0 0 0.25rem;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--vamp-acido);
  line-height: 1.15;
}

.pagina-vamp .vamp-producto__nota {
  margin: 0;
  font-size: 0.85rem;
}

.pagina-vamp .vamp-producto__nota a {
  color: var(--vamp-tinta-suave);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pagina-vamp .vamp-producto__nota a:hover {
  color: var(--vamp-acido);
}

.pagina-vamp .btn--vamp {
  flex-shrink: 0;
  background: var(--vamp-acido);
  color: var(--vamp-morado);
  border-color: var(--vamp-acido);
  font-weight: 800;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  font-size: 0.9rem;
}

.pagina-vamp .btn--vamp:hover {
  background: var(--vamp-acido-hover);
  border-color: var(--vamp-acido-hover);
  color: var(--vamp-morado);
}

.pagina-vamp .vamp-producto__nombre a {
  color: inherit;
  text-decoration: none;
}

.pagina-vamp .vamp-producto__nombre a:hover {
  color: var(--vamp-acido);
}

.pagina-vamp .vamp-producto__foto a {
  display: block;
  height: 100%;
}

.pagina-vamp .vamp-producto__foto a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Contraste del foco sobre fondo morado */
.pagina-vamp .vamp-main :focus-visible,
.pagina-vamp .ficha-page :focus-visible {
  outline: 3px solid var(--vamp-acido);
  outline-offset: 3px;
}

/* Fichas de producto Vamp: misma estructura que las de macetas,
   paleta contenida en body.pagina-vamp. */
.pagina-vamp .ficha-page {
  background: var(--vamp-morado);
  color: var(--vamp-tinta);
}

.pagina-vamp .migas,
.pagina-vamp .migas a {
  color: var(--vamp-tinta-suave);
}

.pagina-vamp .migas a:hover {
  color: var(--vamp-acido);
}

.pagina-vamp .migas [aria-current="page"] {
  color: var(--vamp-tinta);
}

.pagina-vamp .ficha-foto,
.pagina-vamp .galeria__principal,
.pagina-vamp .galeria__principal img,
.pagina-vamp .galeria__miniatura {
  background: #241036;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pagina-vamp .ficha-foto {
  border: 1px solid var(--vamp-borde);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.pagina-vamp .galeria__tira:has(button:only-child) {
  display: none;
}

.pagina-vamp .tabla-precios {
  min-width: 0;
}

.pagina-vamp .ficha-foto img,
.pagina-vamp .galeria__principal img {
  aspect-ratio: 1;
  object-fit: contain;
  background: #241036;
}

.pagina-vamp .ficha-compra h1 {
  color: var(--vamp-tinta);
}

.pagina-vamp .ficha-intro,
.pagina-vamp .ficha-medida,
.pagina-vamp .ficha-mayorista a {
  color: var(--vamp-tinta-suave);
}

.pagina-vamp .ficha-mayorista a:hover {
  color: var(--vamp-acido);
}

.pagina-vamp .ficha-precio {
  color: var(--vamp-acido);
}

.pagina-vamp .ficha-bloque {
  border-top-color: var(--vamp-borde);
}

.pagina-vamp .ficha-bloque h2 {
  color: var(--vamp-tinta);
}

.pagina-vamp .tabla-wrap {
  background: var(--vamp-morado-suave);
  border-color: var(--vamp-borde);
}

.pagina-vamp .tabla-precios th {
  background: rgba(184, 240, 0, 0.1);
  color: var(--vamp-acido);
}

.pagina-vamp .tabla-precios td {
  color: var(--vamp-tinta);
  border-bottom-color: var(--vamp-borde);
}

.pagina-vamp .tabla-precios tbody tr:hover td {
  background: rgba(184, 240, 0, 0.06);
}

.pagina-vamp .lista-cuidados li {
  color: var(--vamp-tinta);
}

.pagina-vamp .lista-cuidados li::before {
  background: var(--vamp-acido);
}

.pagina-vamp .galeria__miniatura:hover,
.pagina-vamp .galeria__miniatura:focus-visible {
  border-color: var(--vamp-acido);
}

.pagina-vamp .galeria__miniatura[aria-current="true"] {
  border-color: var(--vamp-acido);
}