/*
 * COCOVE V1 — portada estática
 * Marca protagonista y 16 logos estáticos sin órbita.
 */

.cocove-v1-title-lockup,
.cocove-v1-brand-block,
.cocove-v1-title-logo {
  box-sizing: border-box;
}

.cocove-v1-title-logo,
.cocove-v1-brand-block {
  display: none;
}

@media (min-width: 769px) {
  .hero {
    padding-bottom: 72px !important;
  }

  .hero-grid {
    position: relative;
    display: block !important;
    width: 100% !important;
    margin: 46px auto 0 !important;
  }

  .hero-grid::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 48%;
    left: 50%;
    width: min(78vw, 900px);
    height: 380px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    background:
      radial-gradient(circle at 37% 45%, rgba(139, 61, 255, .18), transparent 42%),
      radial-gradient(circle at 67% 52%, rgba(255, 106, 0, .10), transparent 42%);
    filter: blur(10px);
  }

  .hero-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .hero-copy .eyebrow {
    margin: 0 auto 24px !important;
  }

  .cocove-v1-title-lockup {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(28px, 4vw, 58px);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
  }

  .cocove-v1-brand-block {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 190px;
  }

  .cocove-v1-title-logo {
    display: block;
    width: 190px;
    height: 138px;
    object-fit: contain;
    filter:
      drop-shadow(0 22px 38px rgba(67, 35, 214, .28))
      drop-shadow(0 5px 12px rgba(0, 0, 0, .24));
  }

  .cocove-v1-brand-block strong {
    margin-top: -4px;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
    letter-spacing: 4.2px;
    line-height: 1;
    text-shadow: 0 8px 25px rgba(73, 42, 205, .32);
  }

  .hero .cocove-v1-title-lockup h1 {
    margin: 0 !important;
    font-size: clamp(58px, 5.15vw, 76px) !important;
    line-height: .90 !important;
    letter-spacing: -3.4px !important;
    text-align: left !important;
  }

  .hero-copy > p {
    width: min(100%, 690px) !important;
    max-width: 690px !important;
    margin: 30px auto 0 !important;
    color: #cbd0df !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
    text-align: center !important;
  }

  .cocove-partner-hero {
    display: none !important;
  }

  .tablet-store-grid {
    position: relative !important;
    left: auto !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 22px 24px !important;
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin: 52px auto 0 !important;
    padding: 48px 34px 27px !important;
    align-items: center !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(180deg, rgba(19, 23, 48, .74), rgba(10, 13, 30, .54)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .05),
      0 26px 64px rgba(3, 4, 18, .24) !important;
    backdrop-filter: blur(10px);
  }

  .tablet-store-grid::before {
    content: "TIENDAS Y MARCAS QUE COMPARAMOS";
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(229, 231, 244, .66);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    white-space: nowrap;
  }

  .tablet-store-grid > img,
  .tablet-store-grid > .brand-wordmark {
    position: static !important;
    width: 100% !important;
    max-width: 102px !important;
    height: 36px !important;
    margin: 0 auto !important;
    padding: 2px 5px !important;
    object-fit: contain !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: .98 !important;
    transform: none !important;
    animation: none !important;
  }

  .tablet-store-grid > img {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .40)) !important;
  }

  .tablet-store-grid > img[alt="Apple"] {
    max-width: 38px !important;
    filter: brightness(0) invert(1) drop-shadow(0 4px 8px rgba(0, 0, 0, .40)) !important;
  }

  .tablet-store-grid > img[alt="Huawei"],
  .tablet-store-grid > img[alt="Xiaomi"],
  .tablet-store-grid > img[alt="LG"],
  .tablet-store-grid > img[alt="Dr. Simi"] {
    max-width: 55px !important;
  }

  .tablet-store-grid > .brand-wordmark {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
    text-shadow: 0 4px 8px rgba(0, 0, 0, .40) !important;
  }

  .tablet-store-grid > .brand-nike {
    font-style: italic;
    letter-spacing: .5px;
  }

  .tablet-store-grid > .brand-adidas {
    letter-spacing: -.5px;
  }
}

@media (min-width: 769px) and (max-width: 900px) {
  .hero {
    padding-bottom: 58px !important;
  }

  .hero-grid {
    margin-top: 36px !important;
  }

  .cocove-v1-title-lockup {
    gap: 30px;
  }

  .cocove-v1-brand-block {
    min-width: 150px;
  }

  .cocove-v1-title-logo {
    width: 154px;
    height: 112px;
  }

  .cocove-v1-brand-block strong {
    font-size: 19px;
    letter-spacing: 3.2px;
  }

  .hero .cocove-v1-title-lockup h1 {
    font-size: 55px !important;
    letter-spacing: -2.8px !important;
  }

  .hero-copy > p {
    max-width: 620px !important;
    margin-top: 25px !important;
    font-size: 15px !important;
  }

  .tablet-store-grid {
    width: min(100%, 750px) !important;
    max-width: 750px !important;
    gap: 17px 12px !important;
    margin-top: 42px !important;
    padding: 45px 20px 24px !important;
  }

  .tablet-store-grid > img,
  .tablet-store-grid > .brand-wordmark {
    max-width: 78px !important;
    height: 32px !important;
  }
}

@media (max-width: 768px) {
  .cocove-v1-title-lockup {
    display: block;
  }

  .cocove-v1-brand-block,
  .cocove-v1-title-logo {
    display: none !important;
  }
}