/* TV PLAY V1.88 — Atención a clientes simple, sin panel lateral ni tarjetas
   de texto redundantes. Se conservan las anclas #clientes y #renovar/#acceso/
   #instalar/#soporte, las rutas anteriores y los WhatsApp preparados. */

/* La etiqueta/título mantienen su sitio y el mismo offset del menú fijo. */
#clientes.customer-simple .customer-unified-heading {
  max-width: 980px;
  margin-bottom: 30px;
}

#clientes.customer-simple .customer-unified-heading p {
  max-width: 800px;
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #bbd3e9;
}

/* Cuatro acciones claras y de una sola lectura. El enlace completo es táctil. */
#clientes.customer-simple .customer-simple-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  align-items: stretch;
  gap: 15px;
  width: 100%;
  max-width: 1120px;
  margin: 0;
}

#clientes.customer-simple .customer-simple-action {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
  min-height: 100px;
  padding: 20px 23px;
  border: 1px solid rgba(70,120,169,.56);
  border-radius: 17px;
  background: linear-gradient(145deg,#153451 0%,#0e223c 100%);
  box-shadow: inset 0 1px 0 rgba(206,239,255,.055);
  color: #f7fbff;
  text-decoration: none;
  cursor: pointer;
  scroll-margin-top: 128px;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}

#clientes.customer-simple .customer-simple-action:hover {
  border-color: rgba(83,191,246,.90);
  background: linear-gradient(145deg,#194267 0%,#112c4b 100%);
  box-shadow: 0 13px 26px rgba(0,11,30,.16), inset 0 1px 0 rgba(218,245,255,.09);
  transform: translateY(-1px);
}

#clientes.customer-simple .customer-simple-action:focus-visible {
  outline: 3px solid #70e4f5;
  outline-offset: 4px;
  border-color: #74d8f8;
}

#clientes.customer-simple .customer-simple-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border: 1px solid rgba(51,132,169,.48);
  border-radius: 13px;
  background: linear-gradient(140deg,#164563,#0e3855);
  color: #77e4f2;
}

#clientes.customer-simple .customer-simple-icon svg {
  width: 26px;
  height: 26px;
}

#clientes.customer-simple .customer-simple-title {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 750;
  letter-spacing: -.023em;
  font-size: 19px;
  line-height: 1.3;
}

#clientes.customer-simple .customer-simple-arrow {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: #7bd5f4;
  opacity: .95;
}

#clientes.customer-simple .customer-simple-action:hover .customer-simple-arrow {
  color: #c2f9ff;
}

@media (min-width: 761px) and (max-width: 1070px) {
  #clientes.customer-simple .customer-simple-actions { max-width: 100%; gap: 13px; }
  #clientes.customer-simple .customer-simple-action { padding: 17px 18px; gap: 13px; min-height: 92px; }
  #clientes.customer-simple .customer-simple-title { font-size: 17px; }
  #clientes.customer-simple .customer-simple-icon { width: 44px; height: 44px; flex-basis: 44px; }
  #clientes.customer-simple .customer-simple-icon svg { width: 23px; height: 23px; }
}

@media (max-width: 760px) {
  #clientes.customer-simple .customer-simple-actions {
    grid-template-columns: minmax(0,1fr);
    gap: 11px;
  }
  #clientes.customer-simple .customer-unified-heading { margin-bottom: 24px; }
  #clientes.customer-simple .customer-unified-heading p {
    font-size: 14.6px;
    line-height: 1.65;
  }
  #clientes.customer-simple .customer-simple-action {
    min-height: 81px;
    padding: 15px 17px;
    gap: 14px;
    border-radius: 14px;
  }
  #clientes.customer-simple .customer-simple-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    border-radius: 12px;
  }
  #clientes.customer-simple .customer-simple-icon svg { width: 23px; height: 23px; }
  #clientes.customer-simple .customer-simple-title { font-size: 17px; }
}

@media (max-width: 390px) {
  #clientes.customer-simple .customer-simple-action { padding: 13px 14px; gap: 11px; }
  #clientes.customer-simple .customer-simple-title { font-size: 16px; }
  #clientes.customer-simple .customer-simple-icon { width: 43px; height: 43px; flex-basis: 43px; }
  #clientes.customer-simple .customer-simple-arrow { width: 18px; height: 18px; flex-basis: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #clientes.customer-simple .customer-simple-action { transition: none; }
}