@import url(spots_root.css);

/* =============================================================================
   Variables (prefer variables over raw numbers)
============================================================================= */
:root {
  /* Layout */
  --layout-pad-x: 2rem;
  --layout-w: 600px;
  --layout-h: 600px;

  /* Thumbs / items */
  --thumb-size: 60px;
  --thumb-gap: 65px;
  --thumb-margin-y: 5px;
  --thumb-hover-scale: 1.05;

  /* Hero */
  --hero-h: 300px;
  --hero-top-offset: 10px;
  --hero-radius: 30px;
  --hero-media-radius: 20px;
  --hero-content-w: 50%;
  --hero-content-pad: 25px;

  /* Corners */
  --radius-card: 20px;
  --radius-logo: 10px;
  --radius-round: 50%;

  /* Layers */
  --z-item-bg: 0;
  --z-hero-overlay: 1;
  --z-content: 2;
  --z-logo: 3;

  /* Typography (hero content) */
  --hero-title-size: 3vw;
  --hero-title-weight: 700;
  --hero-desc-size-min: 13px;
  --hero-desc-size-fluid: 1.7vw;
  --hero-desc-weight: 700;
  --hero-desc-margin-top: 10px;
  --hero-desc-margin-bottom: 20px;

  /* Opacity progression for thumbnails */
  --thumb-opacity-start: 1;
  --thumb-opacity-step: 0.05;

  /* Track positioning (used in nth-child left calc) */
  --track-vw: 95vw;
  --thumb-count: 19;
  --track-step: calc(var(--track-vw) / var(--thumb-count));

  /* Motion */
  --t-fast: 0.25s;
  --t-base: 0.35s;
  --t-slow: 0.5s;
  --t-controls: 0.3s;

  --ease-standard: ease;
  --ease-smooth: ease-in-out;

  --anim-hero: 0.45s;
  --anim-text: 0.6s;
  --anim-text-delay: 0.3s;

  /* Hero overlay */
  --hero-overlay-angle: 90deg;
  --hero-overlay-dark: rgba(0, 0, 0, 0.55);
  --hero-overlay-clear: rgba(0, 0, 0, 0);

  /* Sitios panel */
  --sitios-panel-pad: 1rem;
  --sitios-panel-maxh: 420px;

  --sitios-bar-pad: 5px;
  --sitios-chev-size: 1.25rem;
  --sitios-hint-size: 0.95rem;
  --sitios-hint-opacity: 0.85;

  /* Mini circular (closed panel preview) */
  --sitios-mini-size: 320px;
  --sitios-mini-radius: 130px;
  --sitios-mini-angle-step: 18deg;

  /* Logo placement */
  --logo-top: 20%;
  --logo-left: 10%;
  --logo-h: 60%;
  --logo-opacity: 0.9;

  /* Controls */
  --controls-h: 30px;
  --controls-btn-top-offset: 60px;
  --controls-btn-w: 50%;

  /* Focus */
  --focus-outline-w: 2px;
  --focus-outline-color: rgba(255, 255, 255, 0.85);
  --focus-outline-offset: 3px;

  /* Palette (kept from original) */
  --customWhite: #ffffff;
  --customBlack: #0b0d10;
  --customRed: #e60000;
  --customOrange: #f4b23e;
  --customBlue: #2d6a9f;
  --customGreen: #4c9a6a;
}

/* =============================================================================
   Reset
============================================================================= */
* {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
}

/* =============================================================================
   Layout base
============================================================================= */
.container {
  width: calc(100% - var(--layout-pad-x));
  height: var(--layout-h);
}

.slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

/* =============================================================================
   Items (base)
============================================================================= */
.item {
  position: absolute;
  display: block;

  width: var(--thumb-size);
  height: var(--thumb-size);
  margin: var(--thumb-margin-y) 0;

  overflow: hidden;

  border-radius: var(--radius-round);

  color: #000;
  background: var(--thumbColor);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition: all var(--t-slow) var(--ease-standard);
}

.item:hover {
  color: #000;
}

.item::before {
  content: "";
  position: absolute;
  inset: 0;

  opacity: 0;

  background-image: var(--bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  z-index: var(--z-item-bg);
}

/* Thumbs use --pic */
.item:not(.is-mainPic) {
  cursor: pointer;
  background-image: var(--pic);
}

.item:not(.is-mainPic):hover {
  border-radius: var(--radius-card);
  scale: var(--thumb-hover-scale);
}

/* =============================================================================
   Hero (mainPic)
============================================================================= */
.item.is-mainPic {
  top: calc(var(--thumb-size) + var(--hero-top-offset));
  left: 0;

  width: 100%;
  height: var(--hero-h);

  border-radius: var(--hero-radius);
  background-color: transparent;
}

.item.is-mainPic::before {
  opacity: 1;
  border-radius: var(--hero-media-radius);
}

.item.is-mainPic.anim::before {
  animation: animate var(--anim-hero) var(--ease-standard) forwards;
}

.item.is-mainPic::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    var(--hero-overlay-angle),
    var(--hero-overlay-dark),
    var(--hero-overlay-clear)
  );

  z-index: var(--z-hero-overlay);
}

/* Logo visibility */
.item:not(.is-mainPic) .logo {
  display: none;
  z-index: var(--z-logo);
}

.item.is-mainPic .logo img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}

/* =============================================================================
   Content (hero text)
============================================================================= */
.item .content {
  position: absolute;
  left: 50%;
  z-index: var(--z-content);

  display: none;

  width: var(--hero-content-w);
  height: 100%;

  text-align: center;
  font-family: system-ui;
}

.item.is-mainPic .content {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  padding: var(--hero-content-pad);

  background-color: rgba(255, 255, 255, 0.88);
}

.content .name {
  font-size: min(var(--hero-title-size), 30px);
  font-weight: var(--hero-desc-weight);
  text-transform: uppercase;

  opacity: 0;

  animation: animate var(--anim-text) var(--ease-smooth) 1 forwards;
}

.content .des {
  margin: var(--hero-desc-margin-top) 0 var(--hero-desc-margin-bottom);

  font-size: max(var(--hero-desc-size-fluid), var(--hero-desc-size-min));
  font-style: italic;
  font-weight: var(--hero-desc-weight);

  opacity: 0;

  animation: animate var(--anim-text) var(--ease-smooth) var(--anim-text-delay) 1
    forwards;
}

/* =============================================================================
   Thumbnails positioning (2..20)
============================================================================= */
.slide .item:nth-child(2)  { left: max(calc(0.2 * var(--track-step)),  calc(0.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 0  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(3)  { left: max(calc(1.2 * var(--track-step)),  calc(1.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 1  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(4)  { left: max(calc(2.2 * var(--track-step)),  calc(2.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 2  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(5)  { left: max(calc(3.2 * var(--track-step)),  calc(3.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 3  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(6)  { left: max(calc(4.2 * var(--track-step)),  calc(4.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 4  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(7)  { left: max(calc(5.2 * var(--track-step)),  calc(5.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 5  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(8)  { left: max(calc(6.2 * var(--track-step)),  calc(6.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 6  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(9)  { left: max(calc(7.2 * var(--track-step)),  calc(7.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 7  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(10) { left: max(calc(8.2 * var(--track-step)),  calc(8.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 8  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(11) { left: max(calc(9.2 * var(--track-step)),  calc(9.2 * var(--thumb-gap)));  opacity: calc(var(--thumb-opacity-start) - 9  * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(12) { left: max(calc(10.2 * var(--track-step)), calc(10.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 10 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(13) { left: max(calc(11.2 * var(--track-step)), calc(11.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 11 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(14) { left: max(calc(12.2 * var(--track-step)), calc(12.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 12 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(15) { left: max(calc(13.2 * var(--track-step)), calc(13.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 13 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(16) { left: max(calc(14.2 * var(--track-step)), calc(14.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 14 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(17) { left: max(calc(15.2 * var(--track-step)), calc(15.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 15 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(18) { left: max(calc(16.2 * var(--track-step)), calc(16.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 16 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(19) { left: max(calc(17.2 * var(--track-step)), calc(17.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 17 * var(--thumb-opacity-step));  filter: grayscale(0); }
.slide .item:nth-child(20) { left: max(calc(18.2 * var(--track-step)), calc(18.2 * var(--thumb-gap))); opacity: calc(var(--thumb-opacity-start) - 18 * var(--thumb-opacity-step));  filter: grayscale(0); }

.slide .item:nth-child(2):hover,
.slide .item:nth-child(3):hover,
.slide .item:nth-child(4):hover,
.slide .item:nth-child(5):hover,
.slide .item:nth-child(6):hover,
.slide .item:nth-child(7):hover,
.slide .item:nth-child(8):hover,
.slide .item:nth-child(9):hover,
.slide .item:nth-child(10):hover,
.slide .item:nth-child(11):hover,
.slide .item:nth-child(12):hover,
.slide .item:nth-child(13):hover,
.slide .item:nth-child(14):hover,
.slide .item:nth-child(15):hover,
.slide .item:nth-child(16):hover,
.slide .item:nth-child(17):hover,
.slide .item:nth-child(18):hover,
.slide .item:nth-child(19):hover,
.slide .item:nth-child(20):hover {
  filter: none;
}

/* Grid state */
.container.sitiosGrid .slide .item {
  opacity: 1;
}

/* =============================================================================
   Logo
============================================================================= */
.logo {
  position: absolute;
  top: var(--logo-top);
  left: var(--logo-left);
  z-index: var(--z-logo);

  width: auto;
  height: var(--logo-h);

  opacity: var(--logo-opacity);

  border-radius: var(--radius-logo);
}

/* =============================================================================
   Controls
============================================================================= */
#desplazSpots {
  display: flex;
  width: 100%;
  height: var(--controls-h);
}

#desplazSpots + div {
  background: var(--customRed);
}

#desplazSpots + div img:hover {
  background-color: var(--customBlack);
}

#buttonCarrusel {
  top: calc(var(--layout-h) + var(--controls-btn-top-offset));

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 100%;

  background: var(--customRed);
  border: none;
}

#buttonCarrusel button {
  width: var(--controls-btn-w);

  cursor: pointer;

  background: var(--customRed);
  border: none;

  transition: var(--t-controls);
}

#buttonCarrusel button:hover {
  transform: scale(1);
  background-color: #111;
  color: #eee;
  border: none;
}

#buttonCarrusel button:active {
  transform: scale(1);
  border: none;
}

/* =============================================================================
   Sitios: toggle + panel
============================================================================= */
.sitiosToggle {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;

  white-space: nowrap;

  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

.sitiosBar {
  display: flex;
  width: 100%;

  background: var(--customBlack);
  color: #fff;

  cursor: pointer;
  user-select: none;
}

.sitiosBar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: var(--sitios-bar-pad);

  font-family: var(--familyTexGen);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;

  background: var(--customRed);
}

.sitiosBar__hint {
  font-size: var(--sitios-hint-size);
  opacity: var(--sitios-hint-opacity);
}

.sitiosBar__chev {
  margin-left: auto;
  font-size: var(--sitios-chev-size);
  transition: transform var(--t-fast) var(--ease-standard);
}

.sitiosPanel {
  width: 100%;
  padding: var(--sitios-panel-pad);

  overflow: hidden;

  max-height: var(--sitios-panel-maxh);
  opacity: 1;

  background-color: var(--customWhite);

  transition: max-height var(--t-base) var(--ease-standard),
    opacity var(--t-fast) var(--ease-standard);
}

/* Closed */
.sitiosToggle:not(:checked) + .sitiosBar + .sitiosPanel {
  max-height: 0;
  opacity: 0;
}

.sitiosToggle:not(:checked) + .sitiosBar .sitiosBar__chev {
  transform: rotate(-90deg);
}

.sitiosToggle:focus + .sitiosBar {
  outline: var(--focus-outline-w) solid var(--focus-outline-color);
  outline-offset: var(--focus-outline-offset);
}

/* Closed (special #sitiosPanel) */
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel {
  display: none;

  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel #buttonCarruselSpots {
  display: none;
}

/* Mini circular view when closed (kept as in your original logic) */
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots {
  position: relative;

  width: var(--sitios-mini-size);
  height: var(--sitios-mini-size);
  margin: 0 auto;

  overflow: visible;

  --r: var(--sitios-mini-radius);
}

.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item {
  top: 50%;
  left: 50%;

  width: var(--thumb-size);
  height: var(--thumb-size);
  margin: 0;

  opacity: 1;

  border-radius: var(--radius-round);

  transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r))
    rotate(calc(var(--a) * -1));
}

.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item.is-mainPic {
  width: var(--thumb-size);
  height: var(--thumb-size);

  border-radius: var(--radius-round);

  background-color: var(--thumbColor);
}

.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item .content {
  display: none !important;
}

.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item.is-mainPic::after {
  display: none;
}

.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item::before {
  opacity: 0;
}

/* Circular distribution (1..20) using step var */
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(1)  { --a: calc(0  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(2)  { --a: calc(1  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(3)  { --a: calc(2  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(4)  { --a: calc(3  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(5)  { --a: calc(4  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(6)  { --a: calc(5  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(7)  { --a: calc(6  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(8)  { --a: calc(7  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(9)  { --a: calc(8  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(10) { --a: calc(9  * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(11) { --a: calc(10 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(12) { --a: calc(11 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(13) { --a: calc(12 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(14) { --a: calc(13 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(15) { --a: calc(14 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(16) { --a: calc(15 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(17) { --a: calc(16 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(18) { --a: calc(17 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(19) { --a: calc(18 * var(--sitios-mini-angle-step)); }
.sitiosToggle:not(:checked) + .sitiosBar + #sitiosPanel .slideSpots .item:nth-child(20) { --a: calc(19 * var(--sitios-mini-angle-step)); }

/* =============================================================================
   Feature flags
============================================================================= */
@supports (corner-shape: squircle) {
  .item,
  .logo {
    corner-shape: squircle;
    border-radius: var(--radius-round);
  }
}

@supports (appearance: base-select) {
  .spotsThumbs,
  .spotsThumbs::picker(select) {
    appearance: base-select;
  }

  .spotsThumbs {
    width: 72px;
    height: 48px;
    padding: 0;

    cursor: pointer;

    background: #aa0101;
    border-radius: 12px;

    box-sizing: border-box;
  }

  .spotsThumbs > button.spotsThumbs__btn {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;

    width: 100%;
    height: 100%;
    padding: 0;

    background: transparent;
    border: 0;

    box-sizing: border-box;
  }

  .spotsThumbs selectedcontent.spotsThumbs__selected {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .spotsThumbs::picker-icon {
    display: none;
  }

  .spotsThumbs__chev {
    width: 10px;
    height: 10px;
    margin: 6px;

    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid rgba(255, 255, 255, 0.8);

    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }

  .spotsThumbs:open .spotsThumbs__chev {
    transform: rotate(-135deg);
  }

  .spotsThumbs__flag {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
  }

  .spotsThumbs::picker(select) {
    width: 72px;
    min-width: 68px;
    max-width: 72px;
    padding: 6px;

    overflow: auto;
    scrollbar-gutter: stable;

    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
  }

  .spotsThumbs option {
    display: grid;
    place-items: center;

    width: 100%;
    height: 40px;
    padding: 0;

    box-sizing: border-box;

    color: #fff;

    border-radius: 10px;
  }

  .spotsThumbs option img {
    border-radius: 6px;
  }

  .spotsThumbs option::checkmark {
    content: "";
  }

  .spotsThumbs::picker(select) .spotsThumbs__flag {
    width: 34px;
    height: 34px;

    object-fit: cover;

    border-radius: 6px;
  }
}

.spotsThumbs:focus-visible {
  outline-offset: 0;
}

/* =============================================================================
   Animations
============================================================================= */
@keyframes animate {
  from {
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }
  to {
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}

@keyframes animatePrev {
  from {
    left: 0%;
    opacity: 0;
    transform: translate(0, 100px);
    filter: blur(33px);
  }
  to {
    left: -20%;
    opacity: 1;
    transform: translate(0);
    filter: blur(0);
  }
}