@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
@import url("engine.css");

:root {
  --wa-font-sans: 'Figtree', sans-serif;
}

:not(:defined) {
  visibility: hidden;
}

[slot="navigation-header"], [slot="navigation"] {
  border-right: 1px solid var(--wa-color-gray-10);
  max-width: 300px;
}

[slot="main-footer"] {
  background-color: #141a2a;
}

/* Espacio estructural general para el contenido */
wa-page::part(main-content) {
  padding: var(--wa-space-xl);
  overflow-x: hidden;
}

[slot="navigation-header"] img {
  max-height: 50px;
  object-fit: cover;
}

wa-button.nav-item {
  width: 100%;
}

wa-button.nav-item::part(base) {
  justify-content: flex-start;
}

wa-button.nav-item::part(label) {
  flex: 1;
  text-align: left;
}

.shortstory-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.shortstory-card {
  width: 100%;
  position: relative;
  --spacing: var(--wa-space-s);
}

.shortstory-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.shortstory-card.is-premium {
  border: 2px solid var(--wa-color-warning-50);
}

.card-media-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
}

.premium-badge {
  position: absolute;
  top: var(--wa-space-s);
  right: var(--wa-space-s);
  z-index: 2;
  box-shadow: var(--wa-shadow-l);
}

.disc-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  color: white;
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  padding: 16px;
  font-size: 2.5rem;
  backdrop-filter: blur(4px);
  z-index: 5;
}

.shortstory-title a {
    display: block;
    margin: var(--wa-space-xs) 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 40px;
}

.link-category a {
  text-decoration: none;
}

.link-category a:not(:first-child) {
  margin-left: var(--wa-space-s);
  color: var(--wa-color-yellow-80);
}

.link-category a:not(:first-child)::before {
  content: "";
  display: inline-block;
  width: var(--wa-font-size-s);
  height: var(--wa-font-size-s);
  margin-right: var(--wa-space-2xs);
  vertical-align: calc(var(--wa-space-3xs) * -1);
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.4 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  mask-position: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.4 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  -webkit-mask-position: center;
}

.text-muted {
  color: var(--wa-color-gray-60);
}

.wa-color-danger {
  color: var(--wa-color-red-60);
}

.wa-color-brand {
  color: var(--wa-color-blue-70);
}

wa-button.facebook::part(base) {
	background-color: #1877F2;
	border-color: #1877F2;
	color: #ffffff;
}
wa-button.facebook::part(base):hover {
	background-color: #166fe5;
	border-color: #166fe5;
}
wa-button.google::part(base) {
	background-color: #DB4437;
	border-color: #DB4437;
	color: #ffffff;
}
wa-button.google::part(base):hover {
	background-color: #c5392d;
	border-color: #c5392d;
}

.img-bg {
	position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  background-size: cover;
  background-position: center;
  filter: blur(25px) brightness(0.35);
  z-index: 0;
}

.img-full {
  margin-right: 0.5rem;
  border-radius: var(--wa-border-radius-l) !important;
  max-width: 600px;
}

.dlepl__theme--dark .plyr--audio .plyr__controls {
  background: rgba(16, 18, 25, 0.3) !important;
}

wa-copy-button::part(button) {
  width: var(--wa-input-height-large, 3rem);
  height: var(--wa-input-height-large, 3rem);
  font-size: 1.25rem;
  border: 1px solid var(--wa-input-border-color);

}

.related-carousel {
	--aspect-ratio: auto; 
	--slides-per-page: 2;
	--slide-gap: var(--wa-space-xl);
	margin: 1rem 0;
}

@media (max-width: 480px) { .related-carousel { --slides-per-page: 1; } }
@media (min-width: 768px) { .related-carousel { --slides-per-page: 3; } }
@media (min-width: 992px) { .related-carousel { --slides-per-page: 4; } }

.top-carousel {
	--aspect-ratio: auto; 
}

[slot="main-footer"] a {
	text-decoration: none;
	color: #FFF;
  font-weight: 500;
}

[slot="main-footer"] a:hover {
	text-decoration: underline;
}

.info-banner {
	padding: var(--wa-space-l);
	background: radial-gradient(circle at center, var(--wa-color-brand-fill-quiet), var(--wa-color-brand-fill-normal));
}

.wa-text-center {
  text-align: center;
}

div[id^="paypal-button-container"] {
  color-scheme: light !important;
  background: transparent !important;
}

wa-avatar {
  background-color: transparent !important;
  box-shadow: none !important;
}