/* Menú móvil (fallback sin JS) con buen contraste */
  #mobile-menu-toggle{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
  .mobile-menu-close{display:none}
  #mobile-menu-toggle:checked + label .mobile-menu-open{display:none}
  #mobile-menu-toggle:checked + label .mobile-menu-close{display:inline-flex}

  /* Hero: mejorar legibilidad del título sobre imagen */
  #hero-heading{
    text-shadow:
      0 2px 10px rgba(0,0,0,.55),
      0 10px 28px rgba(0,0,0,.35);
    -webkit-text-stroke: 0.6px rgba(0,0,0,.18);
  }
  /* Sombra suave solo para "Las Mejores Llantas" */
  #hero-heading .hero-title-no-shadow{
    text-shadow:
      0 2px 10px rgba(0,0,0,.35) !important;
    -webkit-text-stroke:0 !important;
  }

  /* Hero: fondo tipo “pastilla” (como tu captura) */
  .hero-pill{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.55rem 1.05rem;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    border:1px solid rgba(255,255,255,.22);
    box-shadow:0 18px 44px rgba(0,0,0,.28);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }
  .hero-pill.hero-pill--title{
    padding:.45rem 1.05rem;
    border-radius:999px;
  }
  @media (max-width:640px){
    .hero-pill{padding:.5rem .9rem}
  }

  nav.mobile-nav{display:none}
  #mobile-menu-toggle:checked + label + nav.mobile-nav{display:block}

  /* Botón sandwich: solo responsive (mobile) */
  @media (max-width:767px){
    label[for="mobile-menu-toggle"]{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:44px;
      height:44px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.22);
      background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
      box-shadow:0 10px 22px rgba(0,0,0,.18);
      backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
      transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    }
    label[for="mobile-menu-toggle"]:hover{
      transform:translateY(-1px);
      box-shadow:0 14px 28px rgba(0,0,0,.22);
      border-color:rgba(255,255,255,.32);
    }
    label[for="mobile-menu-toggle"]:active{
      transform:translateY(0);
      box-shadow:0 8px 18px rgba(0,0,0,.16);
    }
    label[for="mobile-menu-toggle"] svg{
      width:22px;
      height:22px;
      stroke-width:2.4;
    }
  }
  @media (min-width:768px){
    label[for="mobile-menu-toggle"]{display:none!important}
  }

  /* Mobile: reducir logo del header 20% */
  @media (max-width:767px){
    header a[href="#inicio"] img{
      height:41.6px !important;
      width:auto !important;
    }
  }

  /* Dropdown bajo el header */
  header > div{position:relative}
  nav.mobile-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:1000;
    background:#0b5aa4;
    color:#fff;
    border-bottom-left-radius:14px;
    border-bottom-right-radius:14px;
    box-shadow:0 16px 40px rgba(0,0,0,.28);
  }
  nav.mobile-nav ul{padding:10px 10px 14px}
  nav.mobile-nav a{color:#fff !important;text-decoration:none}
  nav.mobile-nav li a{
    display:block;
    padding:12px 12px;
    border-radius:10px;
    font-weight:700;
    letter-spacing:.2px;
  }
  nav.mobile-nav li a:hover{background:rgba(255,255,255,.14)}

  /* CTA estilo botón */
  nav.mobile-nav a[data-slot="button"]{
    background:#f97316 !important;
    color:#fff !important;
    justify-content:center;
    border-radius:12px;
    padding:12px 14px;
    box-shadow:0 10px 22px rgba(0,0,0,.18);
  }


  header a[href^="https://wa.me/51967787227"][data-slot="button"]{font-weight:700!important}



  /* Desktop: CTA header estilo WhatsApp */
  @media (min-width:768px){
    header a[href="https://wa.me/51967787227?text=Hola,%20quiero%20cotizar%20llantas"][data-slot="button"]{
      background:#16a34a !important;
      color:#fff !important;
      font-weight:700!important;
    }
    header a[href="https://wa.me/51967787227?text=Hola,%20quiero%20cotizar%20llantas"][data-slot="button"]:hover{
      background:#15803d !important;
    }
  }

  /* Mobile: ocultar CTA del header para no tapar el logo */
  @media (max-width:767px){
    header a[href="https://wa.me/51967787227?text=Hola,%20quiero%20cotizar%20llantas"][data-slot="button"]{
      display:none !important;
    }
  }


  /* Catálogo: CTA WhatsApp verde — centrado vertical, ancho en móvil, compacto en desktop */
  #catalogo a[data-slot="button"].bg-green-600,
  #marcas-tendencia a[data-slot="button"].bg-green-600{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    height:auto!important;
    min-height:2.75rem;
    box-sizing:border-box;
    line-height:1.35;
    white-space:normal;
    font-weight:700!important;
  }
  @media (max-width:639px){
    #catalogo a[data-slot="button"].bg-green-600,
    #marcas-tendencia a[data-slot="button"].bg-green-600{width:100%!important;max-width:100%!important}
  }
  @media (min-width:640px){
    #catalogo a[data-slot="button"].bg-green-600,
    #marcas-tendencia a[data-slot="button"].bg-green-600{width:max-content!important;max-width:min(100%,48rem)!important}
  }

  /* Hero CTA responsive */
  @media (max-width:420px){
    #inicio > div .flex.flex-col.sm\:flex-row{
      align-items:stretch !important;
    }
    #inicio > div .flex.flex-col.sm\:flex-row a[data-slot="button"]{
      width:100% !important;
      max-width:100% !important;
      height:auto !important;
      padding:12px 16px !important;
      font-size:16px !important;
      line-height:1.2 !important;
      white-space:normal !important;
      text-align:center !important;
      justify-content:center !important;
      flex-direction:column !important;
      gap:6px !important;
    }
    #inicio > div .flex.flex-col.sm\:flex-row a[data-slot="button"] svg{
      margin:0 !important;
      display:block !important;
    }
  }