#fw-section-header {
--color-primary: #013220;
--color-primary-rgb: 1, 50, 32;
--color-background: #dbffef;
--color-background-rgb: 219, 255, 239;
--color-on-primary: #69e2c0;
--color-on-primary-rgb: 105, 226, 192;
--color-on-background: #002028;
--color-on-background-rgb: 0, 32, 40;
--color-product-image-background: #002028;
--color-background-brightness: 242;
background-color: var(--color-background);
color: var(--color-on-background);

}






















#fw-section-custom-html-d925d3fd-95bb-47d9-a698-b5dc788c959e {

/* Fondo general */
body {
  background-color: #dffdf0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: sans-serif;
  text-align: center;
}

/* Contenedor principal centrado */
.portal-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

/* Texto superior */
.portal-text {
  font-size: 1.4rem;
  color: #043;
  font-weight: bold;
  margin: 0;
}

/* Contenedor del portal */
.portal-wrapper {
  position: relative;
  width: 300px;
}

/* Oculta el checkbox */
#toggle {
  display: none;
}

/* Botón clickeable */
.portal {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 20px;
  box-shadow: none; /* Quita el resplandor azul */
}

/* Estilo de ambas imágenes */
.portal img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 3s ease-in-out;
  border-radius: 20px;
}

/* Imagen base visible */
.img1 {
  z-index: 1;
  opacity: 1;
}

/* Imagen alternativa oculta */
.img2 {
  z-index: 2;
  opacity: 0;
}

/* Al hacer clic: cambio de visibilidad */
#toggle:checked + .portal .img2 {
  opacity: 1;
}

#toggle:checked + .portal .img1 {
  opacity: 0;
}



}