/* ==========================================================
   PALETA COQUETA · RESPONSIVE
   Reemplaza por completo el archivo responsive.css anterior.
========================================================== */

/* ----------------------------------------------------------
   LAPTOP / TABLET HORIZONTAL
---------------------------------------------------------- */
@media (max-width: 1180px) {
  .nav-links {
    gap: 11px;
  }

  .nav-link {
    padding: 8px 9px;
    font-size: 10px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(360px, .84fr);
    gap: 46px;
  }

  .gallery-card,
  .gallery-card:nth-child(odd),
  .gallery-card:nth-child(even) {
    transform: rotateY(calc((var(--i) * 45deg) + var(--carousel-angle))) translateZ(340px);
  }

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

/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */
@media (max-width: 980px) {
  .section {
    min-height: auto !important;
    padding: 82px 24px 66px !important;
  }

  .hero-grid,
  .flavor-layout,
  .builder-grid,
  .brand-story-block,
  .event-interactive,
  .community-grid,
  .contact-form-area,
  .contact-support-block {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .hero-content,
  .builder-copy,
  .brand-story-block,
  .contact-form-area .section-title {
    text-align: center;
  }

  .hero-text,
  .brand-story-block > p:not(.eyebrow),
  .contact-form-area .section-title p:last-child {
    margin-right: auto;
    margin-left: auto;
  }

  .hero-buttons,
  .live-status {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }

  .hero-visual,
  .flavor-list,
  .flavor-stage,
  .builder-form,
  .event-stage,
  .community-card,
  .contact-support-block > p {
    width: min(720px, 100%);
    margin: auto;
  }

  .hero-3d-card {
    min-height: 470px;
  }

  .brand-story-block > .eyebrow,
  .brand-story-block > h2,
  .brand-story-block > p:not(.eyebrow),
  .brand-story-block > .soft-quote,
  .brand-story-visual {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .brand-principles {
    grid-column: 1;
    grid-template-columns: 1fr;
    width: min(680px, 100%);
    margin: 4px auto 0;
  }

  .brand-principle-card {
    text-align: left;
  }

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

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

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

  .branch-card {
    width: min(840px, 100%);
    margin: auto;
  }

  .responsibility-icons {
    width: min(720px, 100%);
    margin-right: auto;
    margin-left: auto;
  }

  .gallery-3d-wrapper,
  .merch-carousel {
    height: 520px;
  }
}

/* ----------------------------------------------------------
   NAVEGACIÓN MÓVIL Y CARRUSELES TABLET
---------------------------------------------------------- */
@media (max-width: 900px) {
  body {
    padding-top: 86px;
  }

  .section-dots {
    display: none;
  }

  body > header.header {
    position: fixed !important;
    top: 0 !important;
    right: 0;
    left: 0;
    z-index: 99999 !important;
    padding: 0 12px !important;
  }

  body > header.header .navbar {
    position: relative;
    min-height: 58px;
    padding: 8px 0;
  }

  .brand.brand-logo img {
    height: 42px;
  }

  .menu-btn {
    display: grid;
    place-items: center;
  }

  .nav-links {
    position: absolute;
    top: 62px;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: min(315px, calc(100vw - 24px));
    max-height: calc(100vh - 88px);
    margin: 0;
    padding: 16px;
    overflow-y: auto;
    border: 1px solid rgba(63, 67, 93, .12);
    border-radius: 18px;
    background: rgba(255, 253, 247, .98);
    box-shadow: var(--shadow);
  }

  .nav-links.show {
    display: flex;
  }

  .nav-link {
    width: 100%;
    padding: 12px 8px;
    color: var(--ink);
    text-align: center;
    font-size: 12px;
  }

  .nav-link::after {
    right: 33%;
    left: 33%;
  }

  .floating-bow {
    opacity: .55;
  }

  #temporada > .container {
    width: min(100% - 32px, 720px);
  }

  #temporada .dual-carousel-layout {
    gap: 42px;
  }

  #temporada .carousel-block {
    padding: 28px 14px 34px;
    border-radius: 24px;
  }

  #temporada .orbit-carousel {
    min-height: 294px;
    height: auto;
    padding: 14px 0 22px;
    overflow: hidden;
  }

  #temporada .orbit-track {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    gap: 14px;
    width: max-content;
    height: auto;
    transform: none;
  }

  #temporada .orbit-card,
  #temporada .orbit-carousel--favorites .orbit-card {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 202px;
    width: 202px;
    min-height: 262px;
    margin: 0;
    border-radius: 18px;
    transform: none !important;
  }

  #temporada .orbit-card img,
  #temporada .orbit-carousel--favorites .orbit-card img {
    height: 136px;
  }

  #temporada .orbit-card h4 {
    padding: 12px 12px 4px;
    font-size: 25px;
  }

  #temporada .orbit-card p {
    padding: 0 12px 13px;
    font-size: 11px;
  }

  #temporada .orbit-pedestal {
    display: none;
  }

  .footer {
    padding-top: 62px;
  }

  .footer-holan-image {
    height: 30px;
  }
}

/* ----------------------------------------------------------
   VENTANAS / MODALES TABLET
---------------------------------------------------------- */
@media (max-width: 850px) {
  .flavor-story-trigger {
    top: 82px;
    left: 26px;
  }

  .flavor-story-modal,
  .responsibility-window,
  .philosophy-window {
    padding: 10px;
  }

  .flavor-story-sheet,
  .responsibility-window__box,
  .philosophy-window__box {
    max-height: calc(100vh - 20px);
    border-radius: 24px;
  }

  .flavor-story-content {
    padding: 72px 22px 32px;
  }

  .flavor-story-layout,
  .responsibility-detail {
    grid-template-columns: 1fr;
  }

  .flavor-story-presentation,
  .responsibility-detail__media {
    width: min(100%, 540px);
    margin: 0 auto;
  }

  .responsibility-window__content {
    padding: 72px 22px 34px;
  }

  .philosophy-window__points {
    grid-template-columns: 1fr;
  }

  .join-grid {
    grid-template-columns: 1fr;
    max-width: 640px;
  }
}

/* ----------------------------------------------------------
   EVENTOS Y ÚNETE
---------------------------------------------------------- */
@media (max-width: 800px) {
  #unete.join-section {
    padding: 62px 18px 56px !important;
  }

  #unete .join-grid {
    grid-template-columns: 1fr !important;
    max-width: 620px;
  }

  .event-info-window__content {
    padding: 72px 22px 30px;
  }

  .event-detail-layout {
    grid-template-columns: 1fr;
  }

  .event-detail-gallery {
    width: min(100%, 520px);
    margin: 0 auto;
  }

  .event-info-window__cta {
    flex-direction: column;
    text-align: center;
  }

  .join-overlay {
    padding: 10px;
  }

  .join-overlay__sheet {
    min-height: calc(100vh - 20px);
    border-radius: 24px;
  }

  .join-overlay__content {
    padding: 28px 20px 38px;
  }

  .join-detail-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 30px 22px;
    text-align: center;
  }

  .join-detail-hero p:not(.eyebrow) {
    margin-right: auto;
    margin-left: auto;
  }

  .join-detail-hero__image {
    width: min(400px, 100%);
    min-height: 240px;
    margin: auto;
  }

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

/* ----------------------------------------------------------
   CELULAR
---------------------------------------------------------- */
@media (max-width: 700px) {
  .section {
    padding: 68px 18px 54px !important;
  }

  h1,
  h2 {
    font-size: clamp(47px, 13vw, 70px);
  }

  p {
    font-size: 14px;
  }

  .cursor-dot,
  .cursor-ring,
  .floating-scene {
    display: none;
  }

  .floating-bow {
    width: 42px !important;
    opacity: .44;
  }

  .bow-5,
  .bow-7,
  .bow-8,
  .bow-9,
  .bow-10 {
    display: none;
  }

  .hero-grid {
    gap: 34px;
  }

  .hero-content h1 {
    font-size: clamp(53px, 15vw, 76px);
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-3d-card {
    min-height: 390px;
    border-radius: 28px;
  }

  .hero-3d-card .main-image {
    top: 24px;
    right: 16px;
    width: 59%;
    height: 235px;
    padding: 7px;
    border-width: 5px;
    border-radius: 24px;
  }

  .hero-3d-card .main-image img {
    transform: scale(1.04);
  }

  .hero-3d-card .palette-click {
    top: 110px;
    bottom: auto;
    left: 20px;
    width: auto;
    height: auto;
    padding: 9px 12px;
  }

  .hero-brand-logo {
    bottom: 32px;
    left: 20px;
    width: 120px;
  }

  .hero-flavor-copy {
    right: 16px;
    bottom: 54px;
    left: auto;
    width: 58%;
  }

  .hero-flavor-copy h3 {
    font-size: 37px;
  }

  .hero-flavor-copy span {
    font-size: 11px;
  }

  .hero-photo-detail-1 {
    top: 26px;
    left: 22px;
    width: 62px;
    height: 62px;
  }

  .hero-photo-detail-2 {
    right: 17px;
    bottom: 126px;
    width: 44px;
    height: 44px;
  }

  .badge-1 {
    top: 98px;
    left: 22px;
  }

  .badge-2 {
    right: 18px;
    bottom: 18px;
  }

  .hero-flavor-buttons {
    bottom: 18px;
    left: 22px;
  }

  .flavor-layout {
    gap: 26px;
  }

  .flavor-stage {
    min-height: 390px;
  }

  .stage-glow {
    top: 48px;
    right: 18px;
    width: 150px;
    height: 210px;
  }

  .stage-image {
    top: 20px;
    right: 16px;
    width: 44%;
    height: 245px;
    padding: 6px;
    border-width: 5px;
    border-radius: 76px 76px 20px 20px;
  }

  .stage-image img {
    border-radius: 63px 63px 13px 13px;
  }

  .stage-info {
    bottom: 22px;
    left: 18px;
    width: calc(100% - 36px);
  }

  .stage-info h3 {
    padding: 8px 12px 10px;
    font-size: clamp(40px, 10vw, 58px);
  }

  .stage-info span {
    width: min(290px, 82%);
    font-size: 13px;
  }

  .flavor-story-trigger {
    top: 74px;
    left: 18px;
    max-width: 175px;
    padding: 12px 13px;
  }

  .flavor-story-trigger strong {
    font-size: 26px;
  }

  .flavor-story-trigger small {
    display: none;
  }

  #temporada .orbit-card img,
  #temporada .orbit-carousel--favorites .orbit-card img {
    height: 150px;
    padding: 10px 10px 0;
  }

  #temporada .orbit-card,
  #temporada .orbit-carousel--favorites .orbit-card {
    min-height: 276px;
  }

  .builder-orbit {
    width: min(360px, 100%);
  }

  .builder-preview {
    width: 120px;
    height: 190px;
  }

  .ingredient {
    width: 78px;
    min-height: 38px;
    font-size: 10px;
  }

  .builder-form {
    padding: 20px;
  }

  .builder-form fieldset {
    grid-template-columns: 1fr;
  }

  .carousel-block {
    padding: 20px 15px;
    border-radius: 22px;
  }

  .philosophy-grid,
  .services-row,
  .responsibility-icons {
    grid-template-columns: 1fr;
  }

  .brand-principle-card {
    grid-template-columns: 52px 1fr;
    gap: 14px;
    padding: 18px;
  }

  .brand-principle-icon {
    width: 50px;
    height: 64px;
  }

  .brand-principle-icon img {
    width: 34px;
    height: 50px;
  }

  .brand-principle-card h3 {
    font-size: 25px;
  }

  .brand-orbit-3d {
    height: 410px;
  }

  .orbit-core {
    width: 220px;
    height: 280px;
  }

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

  .event-stage {
    min-height: 355px;
  }

  .event-info {
    right: 14px;
    bottom: 14px;
    left: 14px;
    padding: 16px;
  }

  .event-info h3 {
    font-size: 41px;
  }

  #eventos .services-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .branch-card {
    grid-template-columns: 1fr;
  }

  .branch-card-right .branch-image,
  .branch-card-right .branch-content {
    order: initial;
  }

  .branch-image {
    min-height: 230px;
  }

  .branch-content {
    padding: 26px 21px;
    text-align: center;
  }

  .branch-content .btn {
    width: 100%;
  }

  .gallery-3d-wrapper,
  .merch-carousel {
    height: 500px;
    padding-top: 16px;
    padding-bottom: 100px;
  }

  .gallery-3d {
    width: 174px;
    height: 278px;
  }

  .gallery-card,
  .gallery-card:nth-child(odd),
  .gallery-card:nth-child(even) {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(285px) !important;
  }

  .gallery-card > img {
    height: 164px;
  }

  .merch-info {
    min-height: 106px;
  }

  .responsibility-icons article {
    min-height: 72px;
  }

  .community-image,
  .contact-image {
    height: 235px;
  }

  .contact-stack {
    gap: 55px;
  }

  .form {
    padding: 20px;
  }

  .faq-container {
    padding-top: 45px;
  }

  .modal-card {
    padding: 26px 20px;
  }

  .footer {
    padding-top: 54px;
  }

  .footer-logo img {
    height: 66px;
  }
}

/* ----------------------------------------------------------
   VENTANAS Y TARJETAS EN CELULAR
---------------------------------------------------------- */
@media (max-width: 600px) {
  .brand-principles {
    grid-template-columns: 1fr;
  }

  .brand-principle-card {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    min-height: 0;
    padding: 20px;
    border-radius: 20px;
  }

  .brand-principle-icon {
    width: 54px;
    height: 70px;
  }

  .brand-principle-icon img {
    width: 38px;
    height: 56px;
  }

  .brand-principle-card h4 {
    font-size: 30px;
  }

  .brand-principle-card p {
    font-size: 13px;
  }

  .join-card {
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 15px;
    min-height: 250px;
    padding: 24px 20px;
    border-radius: 24px;
  }

  .join-icon {
    width: 64px;
    height: 82px;
  }

  .join-icon img {
    width: 46px;
    height: 62px;
  }

  .join-copy h3 {
    font-size: 44px;
  }

  .join-copy > p:not(.eyebrow) {
    font-size: 13px;
  }

  .join-overlay__top {
    min-height: 60px;
    padding: 11px 16px;
  }

  .join-overlay__tabs {
    top: 60px;
  }

  .join-overlay__content {
    padding: 24px 15px 32px;
  }

  .join-detail-hero h2 {
    font-size: clamp(45px, 13vw, 63px);
  }

  .employment-grid,
  .franchise-trends,
  .franchise-models {
    grid-template-columns: 1fr;
  }

  .employment-card {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 14px;
  }

  .employment-card__icon {
    width: 58px;
    height: 58px;
  }

  .employment-card__icon img {
    width: 38px;
    height: 42px;
  }

  .franchise-note {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .franchise-note span {
    margin: auto;
  }

  .franchise-model__image {
    height: 180px;
  }

  .flavor-story-content {
    padding: 68px 16px 28px;
  }

  .flavor-story-copy h2 {
    font-size: clamp(53px, 15vw, 68px);
  }

  .wrapper-carousel {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 7px;
  }

  .wrapper-arrow {
    width: 36px;
    height: 36px;
  }

  .wrapper-viewport {
    border-radius: 22px;
  }

  .wrapper-slide {
    min-height: 300px;
    padding: 16px;
  }

  .wrapper-slide img {
    height: 260px;
  }

  .flavor-story-close,
  .responsibility-window__close,
  .philosophy-window__close,
  .event-info-window__close {
    top: 10px;
    margin: 10px 10px -54px auto;
  }

  .philosophy-window__visual {
    min-height: 220px;
    margin-bottom: 26px;
    border-radius: 22px;
  }

  .philosophy-window__visual video {
    height: 220px;
  }

  .philosophy-window__visual-label {
    top: 14px;
    left: 14px;
    font-size: 10px;
  }

  .philosophy-window__visual-badge {
    right: 16px;
    bottom: 16px;
    max-width: 190px;
    font-size: 34px;
  }
}

/* ----------------------------------------------------------
   CELULAR PEQUEÑO
---------------------------------------------------------- */
@media (max-width: 560px) {
  #eventos .services-row,
  .philosophy-grid {
    grid-template-columns: 1fr;
  }

  #eventos .event-service-card,
  #eventos .event-service-card img {
    min-height: 200px;
  }

  .event-info-window {
    padding: 10px;
  }

  .event-info-window__box {
    max-height: calc(100vh - 20px);
    border-radius: 24px;
  }

  .event-info-window__content {
    padding: 68px 16px 28px;
  }

  .event-info-window__content > h2 {
    font-size: clamp(49px, 13vw, 64px);
  }

  .event-info-window__lead {
    font-size: 14px;
  }

  .event-info-window__cta {
    padding: 26px 18px;
  }

  .event-info-window__cta .btn {
    width: 100%;
  }

  .event-detail-gallery {
    min-height: 250px;
    border-radius: 22px;
  }

  .event-detail-gallery--one img {
    height: 250px;
  }

  .event-detail-gallery--two {
    gap: 5px;
    padding: 5px;
  }

  .event-detail-gallery--two img {
    height: 240px;
  }

  .responsibility-window__content {
    padding: 68px 16px 28px;
  }

  .responsibility-detail__copy h2 {
    font-size: clamp(52px, 15vw, 68px);
  }

  .responsibility-detail__media {
    min-height: 260px;
    border-radius: 22px;
  }

  .responsibility-detail__media img,
  .responsibility-detail__media video {
    height: 260px;
  }

  .responsibility-detail__media--double {
    gap: 5px;
    padding: 5px;
  }

  .responsibility-detail__media--double img {
    height: 250px;
    border-radius: 16px;
  }

  .philosophy-actions {
    grid-template-columns: 1fr;
  }

  .philosophy-action-card {
    min-height: 145px;
  }

  .philosophy-window__content {
    padding: 70px 20px 30px;
  }

  .philosophy-window__content h2 {
    font-size: clamp(52px, 15vw, 68px);
  }
}

/* ----------------------------------------------------------
   CARRUSELES MUY ESTRECHOS
---------------------------------------------------------- */
@media (max-width: 520px) {
  #temporada > .container {
    width: min(100% - 24px, 500px);
  }

  #temporada .section-title {
    margin-bottom: 34px;
  }

  #temporada .carousel-block {
    padding-right: 12px;
    padding-left: 12px;
  }

  #temporada .carousel-heading h3 {
    font-size: 42px;
  }

  #temporada .orbit-carousel {
    min-height: 258px;
    padding-bottom: 18px;
  }

  #temporada .orbit-track {
    gap: 12px;
  }

  #temporada .orbit-card,
  #temporada .orbit-carousel--favorites .orbit-card {
    flex-basis: 166px;
    width: 166px;
    min-height: 230px;
    border-radius: 16px;
  }

  #temporada .orbit-card img,
  #temporada .orbit-carousel--favorites .orbit-card img {
    height: 106px;
  }

  #temporada .orbit-card h4 {
    padding: 10px 10px 3px;
    font-size: 21px;
  }

  #temporada .orbit-card p {
    padding: 0 10px 10px;
    font-size: 10px;
  }

  #temporada .orbit-track--season {
    animation-duration: 28s;
  }

  #temporada .orbit-track--favorites {
    animation-duration: 25s;
  }

  #unete .join-card {
    grid-template-columns: 66px minmax(0, 1fr) !important;
    gap: 14px !important;
    min-height: 230px;
    padding: 23px 19px !important;
    border-radius: 24px;
  }

  #unete .join-icon {
    width: 60px;
    height: 76px;
  }

  #unete .join-icon img {
    width: 42px;
    height: 54px;
  }

  #unete .join-copy h3 {
    font-size: 47px;
  }

  #unete .join-copy > p:not(.eyebrow) {
    font-size: 13px;
  }
}

/* ----------------------------------------------------------
   CELULAR MUY PEQUEÑO
---------------------------------------------------------- */
@media (max-width: 430px) {
  .section {
    padding: 62px 13px 48px !important;
  }

  .brand.brand-logo img {
    height: 38px;
  }

  .hero-content h1 {
    font-size: clamp(46px, 15vw, 60px);
  }

  .hero-3d-card {
    min-height: 340px;
  }

  .hero-3d-card .main-image {
    top: 20px;
    right: 15px;
    height: 150px;
  }

  .hero-flavor-copy {
    right: 16px;
    bottom: 21px;
    width: 58%;
  }

  .hero-flavor-copy h3 {
    font-size: 37px;
  }

  .hero-photo-detail-1 {
    width: 45px;
    height: 45px;
  }

  .hero-photo-detail-2 {
    display: none;
  }

  .badge-1 {
    top: 77px;
    left: 15px;
  }

  .badge-2 {
    right: 13px;
    bottom: 13px;
  }

  .hero-flavor-buttons {
    bottom: 13px;
    left: 17px;
  }

  .flavor-item {
    min-height: 56px;
    padding: 8px;
  }

  .flavor-item > span {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .flavor-item h3 {
    font-size: 12px;
  }

  .flavor-item p {
    font-size: 9px;
  }

  .flavor-stage {
    min-height: 340px;
  }

  .stage-image {
    top: 18px;
    right: 14px;
    width: 46%;
    height: 205px;
  }

  .stage-info h3 {
    font-size: 40px;
  }

  .flavor-story-trigger {
    top: 64px;
    left: 14px;
    max-width: 155px;
  }

  .event-menu {
    grid-template-columns: 1fr;
  }

  .gallery-3d-wrapper,
  .merch-carousel {
    height: 450px;
  }

  .gallery-3d {
    width: 154px;
    height: 246px;
  }

  .gallery-card,
  .gallery-card:nth-child(odd),
  .gallery-card:nth-child(even) {
    transform: rotateY(calc(var(--i) * 45deg)) translateZ(232px) !important;
  }

  .gallery-card > img {
    height: 140px;
  }

  .footer-socials {
    gap: 10px;
  }
}

/* ----------------------------------------------------------
   ACCESIBILIDAD: MENOS MOVIMIENTO
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  #temporada .orbit-track--season,
  #temporada .orbit-track--favorites {
    animation: none !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

@media (max-width: 700px) {
  .hero-3d-card,
  .hero-showcase {
    min-height: 390px;
  }

  .hero-showcase {
    padding: 20px;
  }

  .hero-showcase-bg {
    width: min(82%, 290px);
    height: 290px;
    border-width: 6px;
    border-radius: 28px;
  }

  .hero-showcase-logo {
    width: 110px;
  }

  .hero-showcase-tag {
    padding: 10px 14px;
    font-size: 12px;
  }

  .hero-showcase-tag-1 {
    top: 20px;
    left: 14px;
  }

  .hero-showcase-tag-2 {
    top: 76px;
    right: 12px;
  }

  .hero-showcase-tag-3 {
    bottom: 68px;
    left: 12px;
  }

  .hero-showcase-tag-4 {
    right: 10px;
    bottom: 16px;
  }
}