/* main.css - estilos principales TeslaMedBed */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #FFFFFF;
  color: #111;
}

section {
  box-sizing: border-box;
}

.btn {
  display: inline-block;
  background-color: #9C27B0;
  color: #FFFFFF;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
  background-color: #7B1FA2;
}

.float-right.btn {
  background-color: #CBB369;
  color: #4A148C;
}

.float-right.btn:hover {
  background-color: #B89B45;
}

@media (max-width: 768px) {
  .hero-layout {
    flex-direction: column;
    text-align: center;
  }
}


/* Estilos extra extraídos del HTML original */

    body { margin: 0; font-family: Arial, sans-serif; background: white; color: #333; }
    header img { width: 100%; height: auto; display: block; }
    .container { max-width: 1000px; margin: auto; padding: 20px; }
    .images-flex { display: flex;gap:6px; flex-wrap: wrap; gap: 20px; justify-content: center; }
    .images-flex img { max-width: 45%; border-radius: 10px; border: 2px solid #ccc; }
    @media (max-width: 768px) { .images-flex img { max-width: 100%; } }

    .float-left, .float-right {
      position: fixed; bottom: 20%; z-index: 999; padding: 12px 20px;
      border-radius: 40px; font-weight: bold; box-shadow: 0 0 10px rgba(0,0,0,0.3);
      text-decoration: none;
    }
    .float-left { left: 20px; background-color: #25d366; color: white; }
    .float-right { right: 20px; background-color: #ffc107; color: black; }

    footer { text-align: center; font-size: 0.9em; padding: 30px 10px; color: #666; }

    #banner-mobile { display: none; width: 100%; height: auto; }
    #banner-pc { display: none; position: fixed; top: 0; right: 0; max-width: 300px; height: auto; z-index: 999; }
    @media (max-width: 768px) { #banner-mobile { display: block; } }
    @media (min-width: 769px) { #banner-pc { display: block; } }

    /* Banner fijo superior */
    .fixed-banner { position: fixed; top: 0; left: 0; width: 100%; z-index: 999; }
    .fixed-banner img { width: 100%; height: auto; }

    @media (min-width: 768px) {
      .fixed-banner img { display: none; }
      .fixed-logo {
        position: fixed; top: 0; left: 0; width: 100%; height: auto; background-color: white;
        text-align: center; z-index: 998; padding: 10px 0;
      }
      .fixed-logo img { height: 80px; }
    }
    @media (max-width: 767px) { .fixed-logo { display: none; } }

    body { padding-top: 25vh; }

    /* Botones TeslaMedBed */
    a.btn, button.btn {
      background-color: #9C27B0; color: #CBB369; padding: 15px 30px; border-radius: 40px;
      font-weight: bold; text-decoration: none; display: inline-block;
      box-shadow: 0 0 0 rgba(0,0,0,0);
      transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
      will-change: transform, box-shadow, filter;
    }
    a.btn:hover, a.btn:focus, button.btn:hover, button.btn:focus {
      box-shadow: 0 8px 20px rgba(156,39,176,.4), 0 0 12px rgba(203,179,105,.6);
      transform: translateY(-1px); filter: brightness(1.06);
    }
    a.btn:active, a.btn.active, button.btn:active, button.btn.active {
      transform: translateY(0);
      box-shadow: 0 4px 12px rgba(156,39,176,.35), 0 0 8px rgba(203,179,105,.5);
      filter: brightness(1.02);
    }
    @media (prefers-reduced-motion: reduce) { a.btn, button.btn { transition: none; } }
    a.float-right.btn { box-shadow: 0 8px 22px rgba(0,0,0,.25); }
  


        .faq-accordion { max-width: 1000px; margin: 0 auto; }
        @keyframes violetPulse {
          0% { box-shadow: 0 0 0 rgba(156,39,176,0.0); }
          50% { box-shadow: 0 0 18px rgba(156,39,176,0.35); }
          100% { box-shadow: 0 0 0 rgba(156,39,176,0.0); }
        }
        @keyframes iconGlow {
          0% { filter: drop-shadow(0 0 0 rgba(156,39,176,0)); transform: scale(1); }
          50% { filter: drop-shadow(0 0 6px rgba(156,39,176,0.6)); transform: scale(1.06); }
          100% { filter: drop-shadow(0 0 0 rgba(156,39,176,0)); transform: scale(1); }
        }
        .faq-item.opening .faq-q,
        .faq-item.open .faq-q { animation: violetPulse 900ms ease-out 1; }
        .faq-q .icon { width:18px; height:18px; margin-left:10px; transition: transform .25s ease; }
        .faq-item.open .faq-q .icon { animation: iconGlow 1.2s ease-out 1; transform: rotate(90deg); }
        .faq-item { background:#fff; border:1px solid rgba(156,39,176,.15); border-radius:14px; margin:10px 0; overflow:hidden; }
        .faq-q { width:100%; text-align:left; background:#F8F0FF; border:none; padding:16px 18px; font-size:1.05rem; font-weight:700; color:#5A2C6C; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
        .faq-a { max-height:0; overflow:hidden; transition:max-height .36s ease, padding .18s ease; padding:0 18px; }
        .faq-a.open { padding:16px 18px; }
        .faq-a p { color:#333; line-height:1.6; margin:0 0 10px; }