:root {
      --bg: #06101b;
      --bg2: #0a1726;
      --card: rgba(255, 255, 255, .07);
      --card2: rgba(255, 255, 255, .11);
      --line: rgba(255, 255, 255, .12);
      --text: #f8fbff;
      --muted: #b7c5d7;
      --accent: #20d3ff;
      --accent2: #7c5cff;
      --good: #4ee29a;
      --shadow: 0 18px 60px rgba(0, 0, 0, .35);
      --radius: 24px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 10%, rgba(32, 211, 255, .16), transparent 28%),
        radial-gradient(circle at 85% 15%, rgba(124, 92, 255, .16), transparent 26%),
        linear-gradient(180deg, var(--bg), #050b13 55%, #06101b);
      line-height: 1.55;
    }

    a {
      color: inherit;
      text-decoration: none
    }

    img {
      max-width: 100%;
      display: block
    }

    button,
    input,
    textarea,
    select {
      font: inherit
    }

    .container {
      width: min(1160px, 92%);
      margin: auto
    }

    .nav {
      position: sticky;
      top: 0;
      z-index: 40;
      backdrop-filter: blur(18px);
      background: rgba(4, 11, 19, .76);
      border-bottom: 1px solid var(--line);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 74px;
      gap: 20px
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 12px
    }

    .brand img {
      width: 170px;
      max-height: 46px;
      object-fit: contain
    }

    .nav-links {
      display: flex;
      gap: 18px;
      align-items: center;
      font-size: .95rem;
      color: var(--muted)
    }

    .nav-links a:hover {
      color: #fff
    }

    .menu-btn {
      display: none;
      background: none;
      border: 0;
      color: #fff;
      font-size: 1.7rem
    }

    .btn {
      border: 0;
      border-radius: 14px;
      padding: 13px 18px;
      font-weight: 800;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: .2s transform, .2s opacity, .2s box-shadow;
    }

    .btn:hover {
      transform: translateY(-2px)
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #031018;
      box-shadow: 0 12px 35px rgba(32, 211, 255, .2)
    }

    .btn-secondary {
      background: rgba(255, 255, 255, .08);
      border: 1px solid var(--line);
      color: #fff
    }

    .btn-ghost {
      background: transparent;
      color: #fff;
      border: 1px solid var(--line)
    }

    .hero {
      padding: 90px 0 60px;
      min-height: 78vh;
      display: grid;
      align-items: center
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 48px;
      align-items: center
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      border-radius: 999px;
      border: 1px solid rgba(32, 211, 255, .35);
      background: rgba(32, 211, 255, .08);
      color: #bcefff;
      font-weight: 700;
      font-size: .88rem
    }

    h1 {
      font-size: clamp(2.7rem, 6vw, 5.6rem);
      line-height: .98;
      margin: 20px 0;
      letter-spacing: -.05em
    }

    .gradient-text {
      background: linear-gradient(90deg, #fff, #9fe9ff, #b8a8ff);
      -webkit-background-clip: text;
      color: transparent
    }

    .hero p {
      color: var(--muted);
      font-size: 1.12rem;
      max-width: 680px
    }

    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 28px
    }

    .hero-note {
      margin-top: 18px;
      color: #8ea2b7;
      font-size: .92rem
    }

    .mockup {
      position: relative;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 30px;
      background: rgba(255, 255, 255, .055);
      box-shadow: var(--shadow)
    }

    .phone {
      border-radius: 25px;
      background: linear-gradient(180deg, #121f30, #09131f);
      padding: 18px;
      min-height: 520px;
      border: 1px solid rgba(255, 255, 255, .08)
    }

    .phone-top {
      display: flex;
      justify-content: space-between;
      color: #9eb0c2;
      font-size: .8rem
    }

    .social-card {
      margin-top: 20px;
      padding: 18px;
      border-radius: 20px;
      background: rgba(255, 255, 255, .075);
      border: 1px solid var(--line)
    }

    .social-card .cover {
      height: 170px;
      border-radius: 16px;
      background: linear-gradient(135deg, #1ad6ff, #6b5cff 55%, #ff56c2);
      display: grid;
      place-items: center;
      font-size: 2rem;
      font-weight: 900
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 14px
    }

    .stat {
      background: rgba(255, 255, 255, .06);
      padding: 12px;
      border-radius: 14px;
      text-align: center
    }

    section {
      padding: 82px 0
    }

    .section-head {
      max-width: 760px;
      margin-bottom: 34px
    }

    .section-head h2 {
      font-size: clamp(2rem, 4vw, 3.3rem);
      margin: 0 0 12px;
      letter-spacing: -.035em
    }

    .section-head p {
      color: var(--muted);
      margin: 0
    }

    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px
    }

    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px
    }

    .card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 26px;
      box-shadow: var(--shadow);
      backdrop-filter: blur(14px)
    }

    .card:hover {
      background: var(--card2)
    }

    .problem-card h3,
    .price-card h3,
    .service-card h3 {
      margin-top: 0
    }

    .icon {
      font-size: 1.6rem
    }

    .price-card {
      position: relative;
      display: flex;
      flex-direction: column
    }

    .price-card.featured {
      border-color: rgba(32, 211, 255, .55);
      transform: translateY(-8px)
    }

    .badge {
      position: absolute;
      top: 16px;
      right: 16px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #06101b;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: .72rem;
      font-weight: 900
    }

    .price {
      font-size: 2.15rem;
      font-weight: 900;
      margin: 8px 0 2px
    }

    .price small {
      font-size: .9rem;
      color: var(--muted);
      font-weight: 600
    }

    ul.clean {
      list-style: none;
      padding: 0;
      margin: 20px 0 28px
    }

    ul.clean li {
      padding: 8px 0;
      color: #dbe7f5
    }

    ul.clean li:before {
      content: "✓";
      color: var(--good);
      font-weight: 900;
      margin-right: 10px
    }

    .price-card .btn {
      margin-top: auto
    }

    .comparison {
      overflow: auto;
      border: 1px solid var(--line);
      border-radius: 20px
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 720px;
      background: rgba(255, 255, 255, .04)
    }

    th,
    td {
      padding: 16px;
      border-bottom: 1px solid var(--line);
      text-align: center
    }

    th:first-child,
    td:first-child {
      text-align: left
    }

    th {
      background: rgba(255, 255, 255, .06)
    }

    .highlight-col {
      background: rgba(32, 211, 255, .08)
    }

    .steps {
      counter-reset: step;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 18px
    }

    .step {
      position: relative;
      padding: 25px 22px 22px 62px;
      border: 1px solid var(--line);
      border-radius: 20px;
      background: rgba(255, 255, 255, .05)
    }

    .step:before {
      counter-increment: step;
      content: counter(step);
      position: absolute;
      left: 18px;
      top: 18px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #06101b;
      font-weight: 900
    }

    .web-section {
      background: linear-gradient(135deg, rgba(32, 211, 255, .08), rgba(124, 92, 255, .10));
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line)
    }

    .web-card {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 30px;
      align-items: center
    }

    .form-wrap {
      background: rgba(255, 255, 255, .055);
      border: 1px solid var(--line);
      border-radius: 30px;
      padding: 26px;
      box-shadow: var(--shadow)
    }

    .progress-track {
      height: 8px;
      background: rgba(255, 255, 255, .08);
      border-radius: 999px;
      overflow: hidden;
      margin: 10px 0 24px
    }

    .progress-bar {
      height: 100%;
      width: 12.5%;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      transition: .25s
    }

    .form-step {
      display: none
    }

    .form-step.active {
      display: block
    }

    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 7px
    }

    .field.full {
      grid-column: 1/-1
    }

    label {
      font-weight: 700;
      font-size: .92rem
    }

    input,
    textarea,
    select {
      width: 100%;
      border-radius: 13px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .06);
      color: #fff;
      padding: 12px 13px;
      outline: none
    }

    input::placeholder,
    textarea::placeholder {
      color: #789
    }

    select option {
      color: #111
    }

    textarea {
      min-height: 110px;
      resize: vertical
    }

    .checks {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px
    }

    .check {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255, 255, 255, .035)
    }

    .check input {
      width: auto;
      margin-top: 3px
    }

    .form-actions {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      margin-top: 24px
    }

    .summary {
      display: grid;
      gap: 10px
    }

    .summary div {
      padding: 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, .05)
    }

    .success {
      display: none;
      text-align: center;
      padding: 32px
    }

    .success.show {
      display: block
    }

    .toast {
      position: fixed;
      right: 20px;
      bottom: 88px;
      z-index: 60;
      background: #0f2235;
      border: 1px solid var(--line);
      padding: 13px 16px;
      border-radius: 14px;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: .25s
    }

    .toast.show {
      opacity: 1;
      transform: translateY(0)
    }

    .whatsapp {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 50;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: #25d366;
      color: #07120b;
      font-size: 1.6rem;
      font-weight: 900;
      box-shadow: 0 16px 40px rgba(0, 0, 0, .35)
    }

    .backtop {
      position: fixed;
      left: 20px;
      bottom: 20px;
      z-index: 50
    }

    footer {
      padding: 50px 0 70px;
      border-top: 1px solid var(--line);
      color: var(--muted)
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 30px
    }

    .footer-grid img {
      width: 210px;
      margin-bottom: 18px
    }

    .modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      background: rgba(0, 0, 0, .72);
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px
    }

    .modal.show {
      display: flex
    }

    .modal-card {
      width: min(560px, 100%);
      background: #0b1724;
      border: 1px solid var(--line);
      border-radius: 26px;
      padding: 28px;
      box-shadow: var(--shadow);
      position: relative
    }

    .modal-close {
      position: absolute;
      right: 16px;
      top: 13px;
      border: 0;
      background: transparent;
      color: #fff;
      font-size: 1.7rem;
      cursor: pointer
    }

    .muted {
      color: var(--muted)
    }

    .tiny {
      font-size: .82rem;
      color: #8fa3b7
    }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: .55s ease
    }

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

    @media(max-width:900px) {

      .hero-grid,
      .grid-3,
      .grid-2,
      .web-card,
      .footer-grid {
        grid-template-columns: 1fr
      }

      .steps {
        grid-template-columns: 1fr 1fr
      }

      .nav-links {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 74px;
        background: #07121e;
        border-bottom: 1px solid var(--line);
        padding: 18px 4%;
        flex-direction: column;
        align-items: flex-start
      }

      .nav-links.show {
        display: flex
      }

      .menu-btn {
        display: block
      }

      .price-card.featured {
        transform: none
      }
    }

    @media(max-width:620px) {
      .hero {
        padding-top: 52px
      }

      .steps,
      .form-grid,
      .checks {
        grid-template-columns: 1fr
      }

      .brand img {
        width: 145px
      }

      .nav .btn-primary {
        display: none
      }

      .hero-actions .btn {
        width: 100%
      }

      .form-wrap {
        padding: 18px
      }

      section {
        padding: 64px 0
      }
    }

    /* ========================================
   QSS MEDIA - HERO DIGITAL DASHBOARD
======================================== */

    .phone {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background:
        radial-gradient(circle at 90% 0%,
          rgba(32, 211, 255, 0.12),
          transparent 30%),
        linear-gradient(180deg,
          #101d2c 0%,
          #08121d 100%);
      padding: 20px;
      min-height: 520px;
      border: 1px solid rgba(255, 255, 255, .1);
    }


    /* Barra superior */

    .phone-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .studio-status {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: .82rem;
      font-weight: 700;
      color: #d8e8f8;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #4ee29a;
      box-shadow: 0 0 14px #4ee29a;
    }

    .live-badge {
      font-size: .65rem;
      font-weight: 900;
      letter-spacing: .08em;
      color: #4ee29a;
    }


    /* Perfil */

    .business-profile {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 15px;
      margin-bottom: 14px;
      border-radius: 18px;
      background: rgba(255, 255, 255, .055);
      border: 1px solid rgba(255, 255, 255, .08);
    }

    .business-avatar {
      width: 46px;
      height: 46px;
      flex-shrink: 0;
      border-radius: 14px;

      display: grid;
      place-items: center;

      background: linear-gradient(135deg,
          var(--accent),
          var(--accent2));

      color: #06101b;
      font-size: .8rem;
      font-weight: 950;
    }

    .business-profile h3 {
      margin: 1px 0;
      font-size: 1rem;
    }

    .business-profile p {
      margin: 0;
      font-size: .75rem;
      color: var(--muted);
    }

    .verified {
      margin-left: auto;

      width: 25px;
      height: 25px;

      display: grid;
      place-items: center;

      border-radius: 50%;

      background: var(--accent);
      color: #06101b;

      font-weight: 950;
    }


    /* Post simulado */

    .social-preview {
      overflow: hidden;
      border-radius: 21px;

      background: rgba(255, 255, 255, .065);

      border: 1px solid rgba(255, 255, 255, .1);

      box-shadow:
        0 15px 40px rgba(0, 0, 0, .25);
    }

    .preview-header {
      display: flex;
      align-items: center;
      padding: 13px;
      gap: 10px;
    }

    .mini-avatar {
      width: 36px;
      height: 36px;

      display: grid;
      place-items: center;

      border-radius: 50%;

      background: linear-gradient(135deg,
          var(--accent),
          var(--accent2));

      color: #06101b;
      font-weight: 950;
    }

    .preview-header strong {
      display: block;
      font-size: .82rem;
    }

    .preview-header span {
      display: block;
      font-size: .66rem;
      color: var(--muted);
    }

    .preview-menu {
      margin-left: auto;
    }


    /* Creativo */

    .preview-content {
      position: relative;
      min-height: 190px;

      padding: 25px;

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

      background:
        radial-gradient(circle at 90% 15%,
          rgba(255, 255, 255, .16),
          transparent 25%),
        linear-gradient(135deg,
          #14ccec,
          #4f63ff 55%,
          #8c50ff);
    }

    .preview-content::after {
      content: "";

      position: absolute;
      width: 170px;
      height: 170px;

      right: -65px;
      bottom: -80px;

      border-radius: 50%;

      border: 25px solid rgba(255, 255, 255, .08);
    }

    .preview-label {
      font-size: .62rem;
      letter-spacing: .14em;
      font-weight: 900;
      opacity: .85;
    }

    .preview-content h3 {
      margin: 8px 0;
      font-size: 1.75rem;
      line-height: 1.05;
      letter-spacing: -.04em;
    }

    .preview-content h3 span {
      color: #07111f;
    }

    .preview-content p {
      margin: 3px 0 15px;
      font-size: .75rem;
    }

    .preview-content button {
      width: fit-content;

      padding: 8px 13px;

      border: 0;
      border-radius: 9px;

      background: #fff;

      color: #07111f;

      font-size: .72rem;
      font-weight: 900;
    }


    /* Interacción */

    .preview-engagement {
      display: flex;
      justify-content: space-between;

      padding: 10px 13px;

      font-size: .68rem;

      color: var(--muted);
    }


    /* Dashboard */

    .dashboard-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      margin: 19px 2px 11px;
    }

    .dashboard-title strong {
      display: block;
      font-size: .83rem;
    }

    .growth {
      padding: 5px 9px;

      border-radius: 999px;

      background: rgba(78, 226, 154, .1);

      color: #4ee29a;

      font-size: .7rem;
      font-weight: 900;
    }


    /* Estadísticas */

    .stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
    }

    .stat {
      padding: 12px 7px;

      text-align: center;

      border-radius: 15px;

      background: rgba(255, 255, 255, .05);

      border: 1px solid rgba(255, 255, 255, .06);
    }

    .stat-icon {
      margin-bottom: 5px;
      color: var(--accent);
    }

    .stat strong {
      display: block;
      font-size: 1.15rem;
    }


    /* Plataformas */

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

      gap: 8px;

      margin: 16px 0;

      font-size: .65rem;

      color: #8fa5bb;
    }

    .platform-line {
      width: 3px;
      height: 3px;

      border-radius: 50%;

      background: var(--accent);
    }


    /* Tarjeta QSS */

    .agency-card {
      display: flex;
      align-items: center;
      gap: 12px;

      margin-top: 0 !important;

      padding: 13px !important;
    }

    .agency-card strong {
      display: block;
      font-size: .78rem;
    }

    .agency-icon {
      width: 39px;
      height: 39px;

      display: grid;
      place-items: center;

      flex-shrink: 0;

      border-radius: 12px;

      background: linear-gradient(135deg,
          var(--accent),
          var(--accent2));

      color: #06101b;

      font-size: 1.25rem;
      font-weight: 950;
    }


    /* Animación sutil */

    .social-preview {
      animation: qssFloat 5s ease-in-out infinite;
    }

    @keyframes qssFloat {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-5px);
      }

    }


    /* ===============================
   WHATSAPP FLOTANTE QSS MEDIA
================================ */

.whatsapp-container {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1000;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}


/* Burbuja */

.whatsapp-message {
  position: relative;

  width: 270px;
  padding: 16px 40px 16px 17px;

  background: rgba(13, 27, 42, 0.96);
  backdrop-filter: blur(15px);

  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px 18px 5px 18px;

  color: white;

  box-shadow:
    0 15px 45px rgba(0,0,0,.35);

  opacity: 0;
  transform:
    translateY(15px)
    scale(.95);

  animation:
    whatsappMessageIn .5s ease forwards 2s;
}


/* Triángulo de la burbuja */

.whatsapp-message::after {
  content: "";

  position: absolute;

  right: 18px;
  bottom: -8px;

  width: 16px;
  height: 16px;

  background: #0d1b2a;

  transform: rotate(45deg);

  border-right:
    1px solid rgba(255,255,255,.12);

  border-bottom:
    1px solid rgba(255,255,255,.12);
}


/* Encabezado */

.whatsapp-message-header {
  display: flex;
  align-items: center;
  gap: 7px;

  margin-bottom: 8px;

  font-size: .78rem;

  color: #b8c9d9;
}


/* Indicador conectado */

.online-dot {
  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #25d366;

  box-shadow:
    0 0 10px rgba(37,211,102,.8);
}


/* Texto */

.whatsapp-message > span {
  display: block;

  margin-bottom: 3px;

  font-size: .9rem;
  font-weight: 800;
}


.whatsapp-message p {
  margin: 0;

  font-size: .82rem;
  line-height: 1.4;

  color: #d7e2ed;
}


.whatsapp-message small {
  display: block;

  margin-top: 7px;

  color: #25d366;

  font-size: .72rem;
  font-weight: 800;
}


/* Botón cerrar */

.whatsapp-close {
  position: absolute;

  right: 10px;
  top: 8px;

  border: 0;
  background: transparent;

  color: #8fa2b4;

  font-size: 18px;

  cursor: pointer;
}


.whatsapp-close:hover {
  color: white;
}


/* Botón WhatsApp */

.whatsapp {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;

  width: 62px;
  height: 62px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background: #25d366;

  box-shadow:
    0 10px 30px rgba(37,211,102,.35);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}


.whatsapp img {
  width: 35px;
  height: 35px;

  object-fit: contain;
}


.whatsapp:hover {
  transform:
    translateY(-4px)
    scale(1.05);

  box-shadow:
    0 15px 40px rgba(37,211,102,.5);
}


/* Pulso alrededor del botón */

.whatsapp::before {
  content: "";

  position: absolute;

  inset: -5px;

  border-radius: 50%;

  border:
    2px solid rgba(37,211,102,.5);

  animation:
    whatsappPulse 2s infinite;
}


/* Animaciones */

@keyframes whatsappMessageIn {

  from {
    opacity: 0;

    transform:
      translateY(15px)
      scale(.95);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}


@keyframes whatsappPulse {

  0% {
    transform: scale(.9);
    opacity: .8;
  }

  70% {
    transform: scale(1.25);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }

}


/* Celular */

@media (max-width: 600px) {

  .whatsapp-container {
    right: 15px;
    bottom: 15px;
  }

  .whatsapp-message {
    width: 235px;
  }

  .whatsapp {
    width: 56px;
    height: 56px;
  }

  .whatsapp img {
    width: 31px;
    height: 31px;
  }

}


/* ========================================
   QSS MEDIA - FORMULARIO COMPACTO
======================================== */
.step-title{font-size:1.45rem;margin:0 0 18px}
.question{margin-top:20px}
.question-title{display:block;font-weight:800;margin-bottom:10px}
.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.option-card{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:15px;
  border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.04);
  cursor:pointer;transition:.2s ease
}
.option-card:hover{transform:translateY(-2px);border-color:rgba(32,211,255,.35);background:rgba(255,255,255,.07)}
.option-card input{position:absolute;opacity:0;pointer-events:none}
.option-card:has(input:checked){border-color:var(--accent);background:rgba(32,211,255,.10)}
.option-card:has(input:checked)::after{
  content:"✓";position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;background:var(--accent);color:#06101b;font-weight:900
}
.conditional{display:none;margin-top:14px}
.conditional.show{display:block}
.social-row{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.social-name{font-weight:900;padding-top:8px}
.mini-options{display:flex;gap:8px;flex-wrap:wrap}
.mini-choice{
  position:relative;padding:9px 11px;border:1px solid var(--line);border-radius:11px;
  background:rgba(255,255,255,.035);cursor:pointer
}
.mini-choice input{position:absolute;opacity:0;pointer-events:none}
.mini-choice:has(input:checked){border-color:var(--accent);background:rgba(32,211,255,.10)}
.platform-link{display:none;margin-top:10px}
.platform-link.show{display:block}
.file-drop{
  padding:20px;border:1px dashed rgba(32,211,255,.4);border-radius:16px;
  text-align:center;background:rgba(32,211,255,.035)
}
.summary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.summary-card{padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.04)}
.summary-card strong{display:block;color:#9eeeff;font-size:.78rem;margin-bottom:4px}
@media(max-width:850px){
  .option-grid{grid-template-columns:repeat(2,1fr)}
  .social-row{grid-template-columns:1fr}
  .social-name{padding-top:0}
}
@media(max-width:560px){
  .option-grid,.summary-grid{grid-template-columns:1fr}
}


/* Fallback visual: si JavaScript falla, el contenido no queda invisible */
.no-js .reveal,
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
}