/* Catálogo Creativas.me - estilos */

body {
      min-height: 100vh;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }
    
    /* VISTA DARK */
    .dark body {
      background: linear-gradient(135deg, #1c2352 0%, #2a3673 50%, #141836 100%);
      color: #ffffff;
    }
    
    /* VISTA LIGHT */
    .light body {
      background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 50%, #fef2f2 100%);
      color: #1e293b;
    }

    .wa-bg-pattern {
      background-color: #0b141a;
      background-image: radial-gradient(#1f2c34 1px, transparent 1px);
      background-size: 14px 14px;
    }
    .sidebar-transition {
      transition: transform 0.3s ease-in-out;
    }


    /* =========================================================
       AJUSTES FINALES DE INTERFAZ
       LIGHT: paleta clara inspirada en m.creativas.me
       DARK: se conserva el diseño original.
       ========================================================= */

    /* MODO LIGHT */
    .light body {
      background: #ffffff;
      color: #333333;
    }

    .light .border-slate-800 {
      border-color: #d8d0c8 !important;
    }

    .dark .border-slate-800 {
      border-color: #1e293b !important;
    }

    .light .border-slate-200 {
      border-color: #e8e1db !important;
    }

    .light .bg-white,
    .light .bg-white\/90,
    .light .bg-white\/95,
    .light .bg-white\/80 {
      background-color: #ffffff !important;
    }

    .light .bg-slate-100 {
      background-color: #f6f3f1 !important;
    }

    .light .hover\:bg-slate-200:hover,
    .light .hover\:bg-slate-100:hover {
      background-color: #f0ebe7 !important;
    }

    .light .text-slate-900 { color: #303030 !important; }
    .light .text-slate-800 { color: #3e3a37 !important;
    cursor: pointer;}
    .light .text-slate-600 { color: #77716d !important; }
    .light .text-slate-500 { color: #908983 !important; }
   

    /* Color coral/terracota principal del modo claro */
    .light .text-amber-500,
    .light .text-amber-600 {
      color: #c96f52 !important;
    }

    .light .bg-amber-400 {
      background-color: #c96f52 !important;
    }

    .light .main-cat-btn.bg-amber-400 {
      background-color: #c96f52 !important;
      color: #ffffff !important;
    }

    .light h1.bg-gradient-to-r {
      background-image: linear-gradient(90deg, #bf664b, #d7835f, #bf664b) !important;
    }

    .light #sidebarNav {
      background: #ffffff !important;
      border-color: #e8e1db !important;
    }

    .light .lg\:hidden.fixed.top-0 {
      background: rgba(255,255,255,.94) !important;
      border-color: #e8e1db !important;
    }

    .light #searchInput {
      background: #ffffff !important;
      color: #3e3a37 !important;
      border-color: #ded6d0 !important;
    }

    .light #searchInput:focus {
      border-color: #c96f52 !important;
      --tw-ring-color: rgba(201,111,82,.20) !important;
    }

    .light #suggestionsBox {padding-inline-start: 0!important;
      background: #ffffff !important;
      border-color: #e8e1db !important;
    }

    .light button[onclick="toggleTheme()"] {
      background: #ffffff !important;
      border-color: #e8e1db !important;
      color: #c96f52 !important;
    }

    /* Flecha de regreso discreta y clara */
    .detail-back-btn {
      background: rgba(255,255,255,.9);
      color: #475569;
      border: 1px solid #e2e8f0;
    }

    .detail-back-btn:hover {
      background: #f8fafc;
      transform: translateX(-2px);
    }

    .dark .detail-back-btn {
      background: rgba(30,41,59,.85);
      color: #e2e8f0;
      border-color: #334155;
    }

    .dark .detail-back-btn:hover {
      background: #334155;
    }

    .light .detail-back-btn {
      background: #ffffff;
      color: #665e58;
      border-color: #ded6d0;
    }

    .light .detail-back-btn:hover {
      background: #faf7f5;
      color: #c96f52;
      border-color: #d7c9c0;
    }

    /* Imagen de detalle: ratio natural, sin forzar altura */
    #detailImage {
      width: auto !important;
      max-width: 100%;
      height: auto !important;
      max-height: none !important;
      object-fit: contain !important;
    }

    /* Portada: solo imagen y título */
    #catalogGrid > div > div:last-child .flex.flex-col.gap-2 {
      display: none !important;
    }

    #catalogGrid > div > div:last-child {
      padding-bottom: 14px !important;
    }

    /* 5 columnas desktop, 2 móvil */
    @media (min-width:1024px) {
      #catalogGrid {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width:639px) {
      #catalogGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }



    /* =========================================================
       NUEVA PALETA INFANTIL — SOLO MODO LIGHT
       Base: coral #f14749 + celeste #1ec1f6
       Complementos: amarillo, morado suave, verde y blanco.
       ========================================================= */

    .light body{
      background: #f14749 !important;
      color: #ffffff;
    }

    /* Fondo principal para conservar contraste sobre el coral */
    .light #sidebarNav{
      background: #ffffff !important;
      border-color: rgba(255,255,255,.35) !important;
    }

    /* Barra superior móvil */
    .light .lg\:hidden.fixed.top-0{
      background: #ffffff !important;
      border-color: #dff5ff !important;
    }

    /* Paneles y tarjetas */
    .light .bg-white,
    .light .bg-white\/90,
    .light .bg-white\/95,
    .light .bg-white\/80{
      background-color: #ffffff !important;
    }

    /* Título y textos sobre fondo coral */
    .light #mainCatalogView h1{
      color: #ffffff !important;
      background: none !important;
      -webkit-text-fill-color: #ffffff !important;
      text-shadow: 0 3px 0 rgba(180,40,45,.18);
    }

    .light #mainCatalogView header > p{
      color: rgba(255,255,255,.92) !important;
    }

    /* Sidebar: infantil, luminoso */
    .light #sidebarNav .text-slate-900,
    .light #sidebarNav .text-slate-800{
      color: #38405f !important;
    }

    .light #sidebarNav .text-slate-500,
    .light #sidebarNav .text-slate-600{
      color: #71809b !important;
    }

    .light #sidebarNav .border-slate-200{
      border-color: #dff0f7 !important;
    }

    /* Categorías */
    .light #sidebarCategoryList .main-cat-btn{
      background: #f5fbff !important;
      border-color: #d5effa !important;
      color: #46506a !important;
    }

    .light #sidebarCategoryList .main-cat-btn:hover{
      background: #e7f8ff !important;
      border-color: #1ec1f6 !important;
    }

    .light #sidebarCategoryList .main-cat-btn.bg-amber-400{
      background: #1ec1f6 !important;
      border-color: #1ec1f6 !important;
      color: #ffffff !important;
      box-shadow: 0 5px 14px rgba(30,193,246,.28) !important;
    }

    /* Colores de iconos */
    .light .text-amber-500,
    .light .text-amber-600{
      color: #ffb703 !important;
    }

    .light .text-sky-500,
    .light .text-sky-600{
      color: #1ec1f6 !important;
    }

    .light .text-indigo-500{
      color: #8b6df2 !important;
    }

    .light .text-pink-500{
      color: #f56fa7 !important;
    }

    .light .text-purple-500{
      color: #9b72e8 !important;
    }

    .light .text-rose-500{
      color: #f14749 !important;
    }

    /* Buscador */
    .light #searchInput{
      background: #ffffff !important;
      color: #3f4860 !important;
      border: 3px solid rgba(255,255,255,.55) !important;
      box-shadow: 0 8px 20px rgba(149,39,43,.16) !important;
    }

    .light #searchInput::placeholder{
      color: #9ca9bb !important;
    }

    .light #searchInput:focus{
      border-color: #1ec1f6 !important;
      --tw-ring-color: rgba(30,193,246,.30) !important;
    }

    .light #suggestionsBox{
      background: #ffffff !important;
      border-color: #cceefa !important;
      color: #3f4860 !important;
    }

    /* Botón de tema */
    .light button[onclick="toggleTheme()"]{
      background: #ffffff !important;
      border-color: #ffffff !important;
      color: #ffb703 !important;
      box-shadow: 0 6px 14px rgba(149,39,43,.16) !important;
    }

    /* Tarjetas de portada */
    .light #catalogGrid > div{
      background: #ffffff !important;
      border-color: #ffffff !important;
      box-shadow: 0 9px 22px rgba(148,39,43,.18) !important;
    }

    .light #catalogGrid > div:hover{
      box-shadow: 0 13px 30px rgba(148,39,43,.28) !important;
    }

    .light #catalogGrid h3{
      color: #404a66 !important;
    }

    .light #catalogGrid span{
      color: #8190a7 !important;
    }

    /* Borde slate-800 claramente diferente por modo */
    .light .border-slate-800{
      border-color: #1ec1f6 !important;
    }

    .dark .border-slate-800{
      border-color: #1e293b !important;
    }

    /* Detalle */
    .light #detailView > div{
      background: #ffffff !important;
      border-color: #d7f1fb !important;
      box-shadow: 0 10px 25px rgba(148,39,43,.18) !important;
    }

    .light #detailView h2,
    .light #detailView h3{
      color: #404a66 !important;
    }

    .light #detailView .bg-slate-100{
      background: #f1fbff !important;
    }

    .light #detailView .text-sky-600{
      color: #1aaedc !important;
    }

    /* Flecha regresar */
    .light .detail-back-btn{
      background: #ffffff !important;
      color: #ffffff !important;
      border-color: #ffffff !important;
      box-shadow: 0 5px 12px rgba(148,39,43,.18) !important;
    }

    .light .detail-back-btn{
      color: #f14749 !important;
    }

    .light .detail-back-btn:hover{
      background: #1ec1f6 !important;
      color: #ffffff !important;
      border-color: #1ec1f6 !important;
    }

    /* FAQ */
    .light section h2{
      color: #ffffff !important;
      text-shadow: 0 2px 0 rgba(180,40,45,.14);
    }

    .light section .space-y-2\.5 > div{
      background: #ffffff !important;
      border-color: #d8f0f8 !important;
    }

    .light section button{
      color: #404a66 !important;
    }

    .light section .text-slate-600{
      color: #71809b !important;
    }

    /* Footer */
    .light footer{
      border-color: rgba(255,255,255,.35) !important;
    }

    .light footer h3{
      color: #ffffff !important;
    }

    .light footer p{
      color: rgba(255,255,255,.86) !important;
    }

    .light #footerWhatsappBtn{
      background: #1ec1f6 !important;
      color: #ffffff !important;
      box-shadow: 0 8px 18px rgba(16,121,158,.25) !important;
    }

    .light #footerWhatsappBtn:hover{
      background: #12acdF !important;
    }

    /* Cargar más */
    .light #loadMoreBtn{
      background: #ffffff !important;
      color: #f14749 !important;
      border-color: #ffffff !important;
      box-shadow: 0 6px 15px rgba(148,39,43,.15) !important;
    }

    /* Header del personaje */
    .light #characterHeader{
      background: #ffffff !important;
      border-color: #ffffff !important;
      box-shadow: 0 8px 20px rgba(148,39,43,.16) !important;
    }

    .light #selectedCharacterTitle{
      color: #404a66 !important;
    }

    .light #characterHeader > div > span{
      color: #1ec1f6 !important;
    }

    /* Subcategorías */
    .light .sub-evt-btn{
      background: #f1fbff !important;
      color: #46506a !important;
      border-color: #d4eff9 !important;
    }

    /* Pequeños fondos claros */
    .light .bg-amber-400\/20{
      background-color:rgb(255 214 77) !important;
    }

    .light ::selection{
      background: #1ec1f6;
      color: #ffffff;
    }

    @media (max-width:1023px){
      .light body{
        background: #f14749 !important;
      }
    }



    /* =========================================================
       REDISEÑO PROFESIONAL DE INTERFAZ
       Inspiración visual: catálogo infantil moderno.
       Funcionalidad, IDs, eventos y JavaScript intactos.
       ========================================================= */

    /* ---------- 1. NAVEGACIÓN: SIN SIDEBAR FIJO ---------- */
    @media (min-width:1024px){
      /* El menú lateral se convierte en drawer, no queda visible */
      #sidebarNav{
        width:300px !important;
        transform:translateX(-100%) !important;
        padding:20px !important;
        border-radius:0 26px 26px 0;
      }
      #sidebarNav:not(.-translate-x-full){
        transform:translateX(0) !important;
      }

      /* El botón/header móvil pasa a ser el navbar universal */
      .lg\:hidden.fixed.top-0{
        display:flex !important;
        height:64px;
        padding:0 28px !important;
      }

      /* El botón de cierre funciona también en escritorio */
      #sidebarNav .lg\:hidden{
        display:inline-flex !important;
      }

      /* El contenido ya no reserva espacio a la izquierda */
      .lg\:ml-60{
        margin-left:0 !important;
      }

      .lg\:pt-6{
        padding-top:0 !important;
      }
    }

    /* Overlay para el drawer en cualquier pantalla */
    #mobileOverlay{
      z-index:45 !important;
      background:rgba(19,30,54,.34) !important;
      backdrop-filter:blur(3px);
    }

    #sidebarNav{
      z-index:60 !important;
      overflow-y:auto;
    }

    /* ---------- 2. LIGHT: PALETA INFANTIL MÁS ARMÓNICA ---------- */
    .light body{
      background:#b7bbd2 !important;
      color:#202a43;
    }

    /* Navbar crema */
    .light .lg\:hidden.fixed.top-0{
      background:rgba(248,245,237,.97) !important;
      border-color:rgba(32,42,67,.10) !important;
      box-shadow:0 2px 0 rgba(32,42,67,.07) !important;
    }

    .light #sidebarNav{
      background:#f8f5ed !important;
      border-color:#e7dfd3 !important;
      box-shadow:12px 0 35px rgba(20,30,55,.20) !important;
    }

    /* El main empieza debajo del navbar */
    .light #mainCatalogView{
      padding-top:64px;
      min-height:100vh;
    }

    .light .lg\:hidden.fixed.top-0 .w-9.h-9{
      background:transparent !important;
      color:#202a43 !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:12px !important;
    }

    .light .lg\:hidden.fixed.top-0 .w-9.h-9:hover{
      background:rgba(32,42,67,.06) !important;
    }

    /* Marca centrada */
    .light #brandMobileContainer,
    .light #brandDesktopContainer{
      color:#202a43 !important;
    }

    /* ---------- 3. HERO / CABECERA ---------- */
    .light #mainCatalogView header{
      max-width:none !important;
      margin:0 !important;
      padding:70px 20px 64px !important;
      background:#b7bbd2;
      position:relative;
      overflow:hidden;
    }

    .light #mainCatalogView header::before,
    .light #mainCatalogView header::after{
      content:"";
      position:absolute;
      border-radius:999px;
      pointer-events:none;
      opacity:.32;
    }

    .light #mainCatalogView header::before{
      width:330px;
      height:330px;
      background:#1ec1f6;
      filter:blur(0);
      top:-230px;
      left:-90px;
    }

    .light #mainCatalogView header::after{
      width:260px;
      height:260px;
      background:#f14749;
      bottom:-190px;
      right:-60px;
    }

    .light #mainCatalogView header > *{
      position:relative;
      z-index:2;
    }

    .light #mainCatalogView h1{
      max-width:780px;
      margin:0 auto 12px !important;
      color:#202a43 !important;
      background:none !important;
      -webkit-text-fill-color:#202a43 !important;
      font-size:clamp(2.15rem,5vw,4.9rem) !important;
      line-height:.95 !important;
      font-weight:900 !important;
      letter-spacing:-.055em !important;
      text-transform:uppercase;
      text-shadow:0 3px 0 rgba(255,255,255,.14);
    }

    .light #mainCatalogView header > p{
      max-width:620px;
      margin-left:auto !important;
      margin-right:auto !important;
      color:#36425f !important;
      font-size:14px !important;
      font-weight:700 !important;
    }

    /* Buscador muy visible */
    .light #searchInput{
      background:#f8f5ed !important;
      color:#202a43 !important;
      border:1.5px solid rgba(32,42,67,.52) !important;
      border-radius:15px !important;
      box-shadow:0 8px 0 rgba(32,42,67,.12), 0 16px 30px rgba(32,42,67,.13) !important;
      font-weight:700 !important;
    }

    .light #searchInput:focus{
      border-color:#1ec1f6 !important;
      --tw-ring-color:rgba(30,193,246,.28) !important;
    }

    .light #searchInput::placeholder{color:#6d7690 !important;}

    .light #suggestionsBox{
      background:#f8f5ed !important;
      border-color:rgba(32,42,67,.18) !important;
      border-radius:16px !important;
      box-shadow:0 18px 38px rgba(20,30,55,.20) !important;
    }

    /* Botón de tema discreto */
    .light button[onclick="toggleTheme()"]{
      color:#202a43 !important;
    }

    /* ---------- 4. CATÁLOGO COMO PANEL PRINCIPAL ---------- */
    .light #mainCatalogView main{
      max-width:1180px !important;
      margin:-22px auto 60px !important;
      padding:40px 28px 34px !important;
      background:#f8f5ed !important;
      border:1.5px solid rgba(32,42,67,.40);
      border-radius:28px;
      box-shadow:0 15px 0 rgba(32,42,67,.09), 0 30px 50px rgba(32,42,67,.16);
      position:relative;
    }

    /* 5 desktop / 2 móvil */
    .light #catalogGrid{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:28px 18px !important;
      align-items:start;
    }

    @media(min-width:640px){
      .light #catalogGrid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
      }
    }

    @media(min-width:1024px){
      .light #catalogGrid{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:34px 18px !important;
      }
    }

    /* ---------- 5. TARJETAS: IMAGEN + TÍTULO, MUY LEGIBLE ---------- */
    .light #catalogGrid > div{
      width:100%;
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      border-radius:0 !important;
      overflow:visible !important;
      transition:transform .22s ease;
    }

    .light #catalogGrid > div:hover{
      transform:translateY(-5px);
      box-shadow:none !important;
    }

    .light #catalogGrid > div > div:first-child{cursor: pointer;
      background:#e9e7e0 !important;
      border:1.5px solid rgba(32,42,67,.22) !important;
      border-radius:20px !important;
      overflow:hidden;
      box-shadow:0 6px 0 rgba(32,42,67,.09);
      aspect-ratio:4/5;
    }

    .light #catalogGrid img{filter: contrast(1.1);
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .35s ease;
    }

    .light #catalogGrid > div:hover img{
      transform:scale(1.035);
    }

    .light #catalogGrid > div > div:last-child{
      background:transparent !important;
      padding:13px 2px 0 !important;
      text-align:center !important;
    }

    .light #catalogGrid h3{
      color:#202a43 !important;
      font-size:13px !important;
      line-height:1.12 !important;
      font-weight:900 !important;
      text-transform:uppercase;
      letter-spacing:.01em !important;
      margin:0 !important;
    }

    .light #catalogGrid span{
      color:#707991 !important;
      font-size:9px !important;
      font-weight:700 !important;
    }

    /* Portada: solo imagen y título */
    .light #catalogGrid > div > div:last-child .flex.flex-col.gap-2{
      display:none !important;
    }

    /* ---------- 6. MENÚ DRAWER ---------- */
    .light #brandDesktopContainer{
      padding-bottom:16px !important;
      margin-bottom:14px !important;
      border-color:#ddd6cb !important;
    }

    .light #sidebarNav .flex.items-center.justify-between{
      border-color:#ddd6cb !important;
    }

    .light #sidebarNav .text-slate-900,
    .light #sidebarNav .text-slate-800{
      color:#202a43 !important;
    }

    .light #sidebarNav .text-slate-500,
    .light #sidebarNav .text-slate-600{
      color:#68728b !important;
    }

    .light #sidebarCategoryList .main-cat-btn{
      background:#ffffff !important;
      color:#27324d !important;
      border:1px solid #ddd8cf !important;
      border-radius:14px !important;
      box-shadow:none !important;
    }

    .light #sidebarCategoryList .main-cat-btn:hover{
      background:#e8f8ff !important;
      border-color:#1ec1f6 !important;
    }

    .light #sidebarCategoryList .main-cat-btn.bg-amber-400{
      background:#1ec1f6 !important;
      color:#ffffff !important;
      border-color:#1ec1f6 !important;
      box-shadow:0 5px 0 rgba(19,140,184,.24) !important;
    }

    /* ---------- 7. DETALLE ---------- */
    .light #detailView{
      padding-top:84px !important;
      max-width:1100px !important;
    }

    .light .detail-back-btn{
      background:#f8f5ed !important;
      color:#202a43 !important;
      border:1.5px solid rgba(32,42,67,.25) !important;
      border-radius:12px !important;
      box-shadow:0 4px 0 rgba(32,42,67,.10) !important;
    }

    .light .detail-back-btn:hover{
      background:#1ec1f6 !important;
      color:#ffffff !important;
      border-color:#1ec1f6 !important;
    }

    .light #detailView > div{
      background:#f8f5ed !important;
      border:1.5px solid rgba(32,42,67,.32) !important;
      border-radius:28px !important;
      box-shadow:0 18px 0 rgba(32,42,67,.09), 0 32px 55px rgba(32,42,67,.16) !important;
    }

    .light #detailView h2,
    .light #detailView h3{
      color:#202a43 !important;
    }

    .light #detailView .bg-slate-100{
      background:#ece9e2 !important;
      color:#5f6980 !important;
    }

    /* Imagen natural: nunca recortar ni forzar */
    #detailImage{
      width:auto !important;
      max-width:100% !important;
      height:auto !important;
      max-height:none !important;
      object-fit:contain !important;
      display:block;
      margin:auto;
    }

    .light #detailView .border-slate-800{
      border-color:#202a43 !important;
    }

    /* ---------- 8. BOTONES Y ACENTOS ---------- */
    .light #detailBadge,
    .light .bg-amber-400{
      background:#ffd64d !important;
      color:#202a43 !important;
    }

    .light #detailDemoBtn{
      background:#1ec1f6 !important;
      box-shadow:0 6px 0 rgba(14,125,166,.25) !important;
    }

    .light #detailBuyBtn{
      background:#f14749 !important;
      color:#ffffff !important;
      box-shadow:0 6px 0 rgba(167,45,48,.23) !important;
    }

    .light #characterHeader{
      background:#f8f5ed !important;
      border:1.5px solid rgba(32,42,67,.28) !important;
      box-shadow:0 10px 0 rgba(32,42,67,.08) !important;
    }

    .light #selectedCharacterTitle{
      color:#202a43 !important;
    }

    /* ---------- 9. FAQ Y FOOTER ---------- */
    .light section h2{
      color:#202a43 !important;
      text-shadow:none !important;
    }

    .light section .space-y-2\.5 > div{
      background:#f8f5ed !important;
      border-color:rgba(32,42,67,.20) !important;
    }

    .light footer{
      border-color:rgba(248,245,237,.38) !important;
    }

    .light footer h3{color:#f8f5ed !important;}
    .light footer p{color:rgba(248,245,237,.85) !important;}

    /* ---------- 10. DARK: MANTENER SU ESTILO, SOLO SIN SIDEBAR ---------- */
    .dark .lg\:hidden.fixed.top-0{
      background:rgba(15,23,42,.96) !important;
      border-color:#1e293b !important;
    }

    .dark #mainCatalogView{
      padding-top:64px;
    }

    .dark #detailView{
      padding-top:84px;
    }

    @media(max-width:1023px){
      .light #mainCatalogView header{
        padding:48px 14px 52px !important;
      }

      .light #mainCatalogView main{
        margin:-16px 10px 42px !important;
        padding:26px 14px !important;
        border-radius:22px;
      }

      .light #mainCatalogView h1{
        font-size:2.2rem !important;
      }

      .light #catalogGrid{
        gap:22px 12px !important;
      }

      .light #catalogGrid h3{
        font-size:11px !important;
      }

      .light #catalogGrid > div > div:first-child{
        border-radius:15px !important;
      }
    }



    /* =========================================================
       AJUSTE DE PORTADA
       ========================================================= */

    /* Solo se conserva el botón de tema del header.
       El botón desktop duplicado fue eliminado del HTML. */

    /* PORTADA: sin panel/fondo detrás del catálogo */
    .light #mainCatalogView main{
      background:transparent !important;
      border:0 !important;
      box-shadow:none !important;
      margin:-10px auto 60px !important;
      padding:18px 20px 34px !important;
      border-radius:0 !important;
    }

    /* En móvil, menos espacio lateral y sin caja */
    @media(max-width:1023px){
      .light #mainCatalogView main{
        margin:-6px auto 42px !important;
        padding:14px 12px 28px !important;
      }
    }

    /* Las tarjetas vuelven a tener borde como una unidad:
       imagen + título dentro de la misma tarjeta */
    .light #catalogGrid > div{
      background:#f8f5ed !important;
      border:1.5px solid rgba(32,42,67,.45) !important;
      border-radius:18px !important;
      overflow:hidden !important;
      box-shadow:0 6px 0 rgba(32,42,67,.10) !important;
      transform:none;
    }

    .light #catalogGrid > div:hover{
      transform:translateY(-4px);
      box-shadow:0 10px 0 rgba(32,42,67,.10), 0 18px 26px rgba(32,42,67,.13) !important;
    }

    /* La imagen se muestra COMPLETA, sin crop */
    .light #catalogGrid > div > div:first-child{
      background:#ffffff !important;
      border:0 !important;
      border-bottom:1.5px solid rgba(32,42,67,.18) !important;
      border-radius:0 !important;
      aspect-ratio:auto !important;
      height:245px;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      padding:8px;
      box-shadow:none !important;
    }

    .light #catalogGrid img{
      width:100% !important;
      height:100% !important;
      object-fit:contain !important;
      object-position:center !important;
      transform:none !important;
    }

    .light #catalogGrid > div:hover img{
      transform:scale(1.015) !important;
    }

    /* Título integrado dentro del borde de la tarjeta */
    .light #catalogGrid > div > div:last-child{
      min-height:58px;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      padding:10px 8px !important;
      background:#f8f5ed !important;
    }

    .light #catalogGrid h3{
      text-align:center !important;
      color:#202a43 !important;
      font-size:12px !important;
      line-height:1.15 !important;
      font-weight:900 !important;
      margin:0 !important;
    }

    /* Desktop: altura proporcional para las 5 columnas */
    @media(min-width:1024px){
      .light #catalogGrid > div > div:first-child{
        height:220px;
      }
    }

    @media(min-width:1280px){
      .light #catalogGrid > div > div:first-child{
        height:245px;
      }
    }

    @media(max-width:639px){
      .light #catalogGrid > div{
        border-radius:14px !important;
      }

      .light #catalogGrid > div > div:first-child{
        height:210px;
        padding:6px;
      }

      .light #catalogGrid > div > div:last-child{
        min-height:52px;
        padding:8px 6px !important;
      }
    }

    /* Título principal: más llamativo y con menos padding */
    .light #mainCatalogView header{
      padding:38px 20px 38px !important;
    }

    .light #mainCatalogView h1{
      max-width:900px !important;
      font-size:clamp(2.35rem,5.4vw,5.2rem) !important;
      line-height:.88 !important;
      letter-spacing:-.065em !important;
      margin-bottom:10px !important;
    }

    .light #mainCatalogView header > p{
      margin-bottom:16px !important;
    }

    @media(max-width:1023px){
      .light #mainCatalogView header{
        padding:30px 14px 30px !important;
      }

      .light #mainCatalogView h1{
        font-size:clamp(2rem,9vw,3.3rem) !important;
        line-height:.92 !important;
      }
    }

    /* La vista de detalle sí mantiene su panel/fondo */
    .light #detailView > div{
      background:#f8f5ed !important;
      border:1.5px solid rgba(32,42,67,.32) !important;
      box-shadow:0 18px 0 rgba(32,42,67,.09), 0 32px 55px rgba(32,42,67,.16) !important;
    }



    /* =========================================================
       LIGHT — ESTILO LIMPIO DE m.creativas.me
       Se elimina la propuesta infantil anterior.
       Se conserva la tipografía anterior y toda la funcionalidad.
       ========================================================= */

    /* Base limpia */
    .light body{
      background:#ffffff !important;
      color:#333333 !important;
    }

    .light #mainCatalogView{
      background:#ffffff !important;
    }

    /* Header limpio, sin formas decorativas */
    .light #mainCatalogView header{
      background:#ffffff !important;
      padding:26px 20px 22px !important;
    }

    .light #mainCatalogView header::before,
    .light #mainCatalogView header::after{
      display:none !important;
      content:none !important;
    }

    /* Recuperar tipografía anterior: no Comic Sans ni fuentes infantiles */
    .light #mainCatalogView h1,
    .light #catalogGrid h3,
    .light #sidebarNav h1,
    .light #sidebarNav h2,
    .light section h2,
    .light #detailView h2,
    .light #detailView h3{
      font-family:inherit !important;
    }

    /* Título llamativo pero profesional */
    .light #mainCatalogView h1{
      color:#222222 !important;
      background:none !important;
      -webkit-text-fill-color:#222222 !important;
      text-shadow:none !important;
      font-size:clamp(2rem,4vw,3.6rem) !important;
      line-height:1.05 !important;
      font-weight:800 !important;
      letter-spacing:-.035em !important;
      text-transform:none !important;
      margin:0 auto 6px !important;
    }

    .light #mainCatalogView header > p{
      color:#777777 !important;
      font-size:14px !important;
      font-weight:400 !important;
      margin-bottom:14px !important;
    }

    /* Navegación superior clara */
    .light .lg\:hidden.fixed.top-0{
      background:rgba(255,255,255,.97) !important;
      border-color:#eeeeee !important;
      box-shadow:0 1px 8px rgba(0,0,0,.05) !important;
    }

    .light #sidebarNav{
      background:#ffffff !important;
      border-color:#eeeeee !important;
      box-shadow:8px 0 25px rgba(0,0,0,.10) !important;
    }

    /* Buscador estilo minimalista */
    .light #searchInput{
      background:#ffffff !important;
      color:#333333 !important;
      border:1px solid #dedede !important;
      border-radius:10px !important;
      box-shadow:none !important;
    }

    .light #searchInput::placeholder{
      color:#999999 !important;
    }

    .light #searchInput:focus{
      border-color:#777777 !important;
      --tw-ring-color:rgba(0,0,0,.06) !important;
      box-shadow:0 0 0 3px rgba(0,0,0,.04) !important;
    }

    .light #suggestionsBox{
      background:#ffffff !important;
      border-color:#e5e5e5 !important;
      border-radius:10px !important;
      box-shadow:0 12px 28px rgba(0,0,0,.10) !important;
    }

    /* Main de portada: limpio y sin caja */
    .light #mainCatalogView main{
      max-width:1240px !important;
      background:transparent !important;
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      margin:0 auto 54px !important;
      padding:18px 20px 34px !important;
    }

    .light #mainCatalogView main::before{
      display:none !important;
      content:none !important;
    }

    /* Grid */
    .light #catalogGrid{
      grid-template-columns:repeat(2,minmax(0,1fr)) !important;
      gap:22px 14px !important;
    }

    @media(min-width:640px){
      .light #catalogGrid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:24px 18px !important;
      }
    }

    @media(min-width:1024px){
      .light #catalogGrid{
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:28px 18px !important;
      }
    }

    /* Tarjeta: imagen + título dentro del mismo borde */
    .light #catalogGrid > div{
      width:100% !important;
      background:#ffffff !important;
      border:1px solid #e4e4e4 !important;
      border-radius:12px !important;
      overflow:hidden !important;
      box-shadow:0 2px 8px rgba(0,0,0,.045) !important;
      transition:transform .18s ease, box-shadow .18s ease !important;
    }

    .light #catalogGrid > div:hover{
      transform:translateY(-3px) !important;
      box-shadow:0 8px 20px rgba(0,0,0,.09) !important;
    }

    /* IMAGEN: completa, ancho 100%, ratio natural, sin height */
    .light #catalogGrid > div > div:first-child{
      background:#ffffff !important;
      border:0 !important;
      border-bottom:1.5px solid rgba(32,42,67,.18) !important;
      border-radius:0 !important;
      aspect-ratio:auto !important;
      height:auto !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      padding:0px !important;
      box-shadow:none !important;
      overflow:hidden !important;
    }

    .light #catalogGrid img{
      width:100% !important;
      height:auto !important;
      max-width:100% !important;
      object-fit:contain !important;
      object-position:center !important;
      display:block !important;
      transform:none !important;
    }

    .light #catalogGrid > div:hover img{
      transform:none !important;
    }

    /* Título */
    .light #catalogGrid > div > div:last-child{
      min-height:52px !important;
      padding:10px 8px !important;
      background:#ffffff !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      text-align:center !important;
    }

    .light #catalogGrid h3{
      color:#333333 !important;
      font-size:13px !important;
      line-height:1.2 !important;
      font-weight:700 !important;
      margin:0 !important;
      text-transform:none !important;
      letter-spacing:0 !important;
    }

    /* Ocultar acciones de la portada */
    .light #catalogGrid > div > div:last-child .flex.flex-col.gap-2{
      display:none !important;
    }

    /* Menú */
    .light #sidebarNav .text-slate-900,
    .light #sidebarNav .text-slate-800{
      color:#333333 !important;
    }

    .light #sidebarNav .text-slate-500,
    .light #sidebarNav .text-slate-600{
      color:#777777 !important;
    }

    .light #sidebarNav .border-slate-200{
      border-color:#eeeeee !important;
    }

    .light #sidebarCategoryList .main-cat-btn{
      background:#ffffff !important;
      color:#444444 !important;
      border:1px solid #eeeeee !important;
      border-radius:8px !important;
      box-shadow:none !important;
    }

    .light #sidebarCategoryList .main-cat-btn:hover{
      background:#f7f7f7 !important;
      border-color:#dddddd !important;
    }

    /* Color de selección sobrio */
    .light #sidebarCategoryList .main-cat-btn.bg-amber-400{
      background:#333333 !important;
      color:#ffffff !important;
      border-color:#333333 !important;
      box-shadow:none !important;
    }

    /* Color principal de pequeños acentos */
    .light .text-amber-500,
    .light .text-amber-600{
      color:#333333 !important;
    }

    .light .bg-amber-400{
      background:#333333 !important;
      color:#ffffff !important;
    }

    .light button[onclick="toggleTheme()"]{
      background:transparent !important;
      color:#333333 !important;
      border-color:#eeeeee !important;
      box-shadow:none !important;
    }

    /* Diferenciar borde por tema */
    .light .border-slate-800{
      border-color:#e1e1e1 !important;
    }

    .dark .border-slate-800{
      border-color:#1e293b !important;
    }

    /* Detalle: fondo blanco, separado de la portada */
    .light #detailView{
      padding-top:84px !important;
    }

    .light #detailView > div{
      background:#ffffff !important;
      border:1px solid #e5e5e5 !important;
      border-radius:14px !important;
      box-shadow:0 5px 22px rgba(0,0,0,.06) !important;
    }

    .light .detail-back-btn{
      background:#ffffff !important;
      color:#333333 !important;
      border:1px solid #dedede !important;
      border-radius:9px !important;
      box-shadow:none !important;
    }

    .light .detail-back-btn:hover{
      background:#f7f7f7 !important;
      color:#111111 !important;
      border-color:#cccccc !important;
    }

    #detailImage{
      width:auto !important;
      max-width:100% !important;
      height:auto !important;
      max-height:none !important;
      object-fit:contain !important;
      display:block;
      margin:auto;
    }

    /* Botones de detalle: limpios y coherentes */
    .light #detailDemoBtn{
      background:#333333 !important;
      color:#ffffff !important;
      box-shadow:none !important;
    }

    .light #detailBuyBtn{
      background:#25d366 !important;
      color:#ffffff !important;
      box-shadow:none !important;
    }

    .light #characterHeader{
      background:#ffffff !important;
      border-color:#e5e5e5 !important;
      box-shadow:none !important;
    }

    /* FAQ */
    .light section h2{
      color:#333333 !important;
      text-shadow:none !important;
    }

    .light section .space-y-2\.5 > div{
      background:#ffffff !important;
      border-color:#e8e8e8 !important;
      border-radius:10px !important;
    }

    /* Footer claro */
    .light footer{
      background:#ffffff !important;
      border-color:#eeeeee !important;
    }

    .light footer h3{
      color:#333333 !important;
    }

    .light footer p{
      color:#777777 !important;
    }

    .light #footerWhatsappBtn{
      background:#25d366 !important;
      color:#ffffff !important;
      box-shadow:none !important;
    }

    @media(max-width:639px){
      .light #mainCatalogView header{
        padding:22px 14px 18px !important;
      }

      .light #mainCatalogView h1{
        font-size:2rem !important;
      }

      .light #mainCatalogView main{
        padding:14px 10px 28px !important;
      }

      .light #catalogGrid{
        gap:18px 10px !important;
      }

      .light #catalogGrid > div{
        border-radius:10px !important;
      }
    }



    /* =========================================================
       SECCIONES CON COLORES DIFERENTES + SEPARADORES SVG ONDEADOS
       Hero (título + buscador) / Catálogo / Sección siguiente.
       Solo modo Light. La funcionalidad no cambia.
       ========================================================= */

    /* Estructura general */
    .light #mainCatalogView{
      background:#ffffff !important;
      overflow:hidden;
    }

    /* ================= HERO: TÍTULO + BUSCADOR ================= */
    .light #mainCatalogView header{
      position:relative;
      z-index:2;
      background:#e9f7fd !important; /* celeste muy suave */
      padding:32px 20px 26px !important;
    }

    /* ================= SVG ENTRE HERO Y MAIN ================= */
    .catalog-wave{
      width:100%;
      line-height:0;
      position:relative;
      z-index:3;
      pointer-events:none;
    }

    .catalog-wave svg{
      display:block;
      width:100%;
      height:86px;
    }

    /* La onda completa tiene el color del catálogo */
    .light .catalog-wave-top{
      margin-top:-1px;
      background:#ffffff;
    }

    .light .catalog-wave-top path{
      fill:#e9f7fd;
    }

    /*
      El main empieza con blanco.
      La onda superior deja una silueta orgánica del celeste
      entrando/saliendo del catálogo.
    */
    .light #mainCatalogView main{
      position:relative;
      z-index:2;
      max-width:none !important;
      width:100%;
      background:#ffffff !important;
      margin:0 !important;
      padding:20px max(20px, calc((100vw - 1240px)/2)) 48px !important;
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
    }

    /* Contenedor visual del grid */
    .light #catalogGrid{
      max-width:1240px;
      margin:0 auto;
    }

    /* ================= ONDA INFERIOR / SIGUIENTE SECCIÓN ================= */
    .light .catalog-wave-bottom{
      background:#fff4d8; /* tercer color */
      margin-top:-1px;
    }

    .light .catalog-wave-bottom path{
      fill:#ffffff; /* silueta del catálogo */
    }

    /*
      El área que sigue al catálogo toma otro color.
      Se aplica al contenido posterior dentro de mainCatalogView.
    */
    .light .catalog-wave-bottom + *{
      position:relative;
    }

    /* Si FAQ está dentro del mismo flujo */
    .light #mainCatalogView .catalog-wave-bottom ~ section{
      background:#fff4d8 !important;
      margin:0 !important;
      padding:44px max(20px, calc((100vw - 1100px)/2)) 54px !important;
    }

    /* Footer separado y neutro */
    .light footer{
      background:#ffffff !important;
    }

    /* ================= MEJORAR TRANSICIÓN DE COLORES ================= */
    /* Hero celeste */
    .light #mainCatalogView h1{
      color:#2f3b59 !important;
      -webkit-text-fill-color:#2f3b59 !important;
    }

    .light #mainCatalogView header > p{
      color:#65718c !important;
    }

    /* Main blanco */
    .light #catalogGrid > div{
      background:#ffffff !important;
    }

    /* Sección posterior cálida */
    .light #mainCatalogView .catalog-wave-bottom ~ section h2{
      color:#3d475f !important;
    }

    /* Responsive */
    @media(max-width:639px){
      .light #mainCatalogView header{
        padding:24px 14px 18px !important;
      }

      .catalog-wave svg{
        height:52px;
      }

      .light #mainCatalogView main{
        padding:14px 10px 34px !important;
      }

      .light #mainCatalogView .catalog-wave-bottom ~ section{
        padding:30px 14px 38px !important;
      }
    }



    /* =========================================================
       REDISEÑO DE SECCIONES FULL-WIDTH + ONDAS SVG
       Light mode only — funcionalidad intacta
       ========================================================= */

    /* Quitar reglas visuales previas de ondas */
    .light .catalog-wave{
      display:none !important;
    }

    /* Cada bloque ocupa TODO el ancho de la ventana */
    .light #mainCatalogView{
      width:100% !important;
      max-width:none !important;
      margin:0 !important;
      background:transparent !important;
      overflow:hidden !important;
    }

    /* =========================================================
       SECCIÓN 1 — HERO / TÍTULO + BUSCADOR
       Color obligatorio: #1bb5f9
       ========================================================= */
    .light #mainCatalogView header{
      width:100vw !important;
      max-width:none !important;
      margin:0 calc(50% - 50vw) !important;
      padding:38px max(20px, calc((100vw - 1100px)/2)) 26px !important;
      background:#1bb5f9 !important;
      color:#ffffff !important;
      position:relative !important;
      z-index:2 !important;
    }

    .light #mainCatalogView h1{
      color:#ffffff !important;
      -webkit-text-fill-color:#ffffff !important;
      text-shadow:0 2px 0 rgba(20,47,72,.12) !important;
    }

    .light #mainCatalogView header > p{
      color:rgba(255,255,255,.92) !important;
    }

    .light #searchInput{
      background:#ffffff !important;
      border:0 !important;
      color:#334155 !important;
      box-shadow:0 8px 24px rgba(13,73,102,.18) !important;
    }

    .light #suggestionsBox{
      border:0 !important;
    }

    /* =========================================================
       ONDA 1 — #1bb5f9 → #fff6e8
       La silueta ocupa todo el ancho.
       ========================================================= */
    .section-wave{
      width:100vw !important;
      max-width:none !important;
      margin-left:calc(50% - 50vw) !important;
      line-height:0 !important;
      position:relative !important;
      z-index:3 !important;
      overflow:hidden !important;
      pointer-events:none !important;
    }

    .section-wave svg{
      display:block !important;
      width:100% !important;
      height:92px !important;
    }

    .light .section-wave-hero-catalog{
      background:#fff6e8 !important;
      margin-top:-1px !important;
    }

    .light .section-wave-hero-catalog path{
      fill:#1bb5f9 !important;
    }

    /* =========================================================
       SECCIÓN 2 — CATÁLOGO
       Color diferente: crema cálido
       ========================================================= */
    .light #mainCatalogView main{
      width:100vw !important;
      max-width:none !important;
      margin:0 calc(50% - 50vw) !important;
      padding:24px max(18px, calc((100vw - 1240px)/2)) 58px !important;
      background:#fff6e8 !important;
      border:0 !important;
      border-radius:0 !important;
      box-shadow:none !important;
      position:relative !important;
      z-index:2 !important;
    }

    .light #catalogGrid{
      max-width:1240px !important;
      margin:0 auto !important;
    }

    /* =========================================================
       ONDA 2 — CREMA → #f14749
       ========================================================= */
    .light .section-wave-catalog-faq{
      background:#f14749 !important;
      margin-top:-1px !important;
    }

    .light .section-wave-catalog-faq path{
      fill:#fff6e8 !important;
    }

    /* =========================================================
       SECCIÓN 3 — PREGUNTAS FRECUENTES
       Color obligatorio: #f14749
       Full width con contenido centrado
       ========================================================= */
    .light section.max-w-3xl{
      width:100vw !important;
      max-width:none !important;
      margin:0 calc(50% - 50vw) !important;
      padding:
        38px
        max(18px, calc((100vw - 760px)/2))
        58px !important;
      background:#f14749 !important;
      position:relative !important;
      z-index:2 !important;
    }

    .light section.max-w-3xl h2{
      color:#ffffff !important;
      -webkit-text-fill-color:#ffffff !important;
      text-shadow:none !important;
      margin-bottom:22px !important;
    }

    .light section.max-w-3xl .space-y-2\.5{
      max-width:760px !important;
      margin-left:auto !important;
      margin-right:auto !important;
    }

    .light section.max-w-3xl .space-y-2\.5 > div{
      background:#ffffff !important;
      border:0 !important;
      border-radius:12px !important;
      box-shadow:0 6px 18px rgba(108,22,26,.14) !important;
    }

    .light section.max-w-3xl button{
      color:#334155 !important;
    }

    /* =========================================================
       SECCIÓN 4 — FOOTER
       Color diferente: amarillo cálido
       Con una onda propia arriba.
       ========================================================= */
    .light footer{
      width:100vw !important;
      max-width:none !important;
      margin:0 calc(50% - 50vw) !important;
      padding:
        72px
        max(20px, calc((100vw - 1100px)/2))
        34px !important;
      background:#ffbd3c !important;
      border:0 !important;
      position:relative !important;
      overflow:visible !important;
    }

    /* Onda superior del footer usando pseudo-elemento SVG */
    .light footer::before{
      content:"" !important;
      position:absolute !important;
      left:0 !important;
      top:-72px !important;
      width:100% !important;
      height:73px !important;
      background:#ffbd3c !important;
      -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 70 C120 15 260 22 390 68 C520 114 650 100 790 42 C930-16 1060 8 1190 56 C1300 98 1380 82 1440 50 L1440 120 L0 120 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat !important;
      mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 70 C120 15 260 22 390 68 C520 114 650 100 790 42 C930-16 1060 8 1190 56 C1300 98 1380 82 1440 50 L1440 120 L0 120 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat !important;
      pointer-events:none !important;
    }

    .light footer h3,
    .light footer p,
    .light footer a{
      color:#ffffff !important;
    }

    /* =========================================================
       DETALLE — mantiene su fondo propio, no se mezcla
       ========================================================= */
    .light #detailView{
      background:#fff6e8 !important;
    }

    /* =========================================================
       RESPONSIVE
       ========================================================= */
    @media(max-width:639px){
      .light #mainCatalogView header{
        padding:28px 14px 18px !important;
      }

      .section-wave svg{
        height:52px !important;
      }

      .light #mainCatalogView main{
        padding:14px 10px 38px !important;
      }

      .light section.max-w-3xl{
        padding:30px 14px 42px !important;
      }

      .light footer{
        padding:52px 16px 28px !important;
      }

      .light footer::before{
        top:-52px !important;
        height:53px !important;
      }
    }



    /* =========================================================
       AJUSTE FULL WIDTH REAL + WAVES CORRECTOS Y UNIFORMES
       ========================================================= */

    /* El padding del BODY impedía que las secciones llegaran al borde */
    body,
    body.p-3,
    body.sm\:p-6{
      padding-left:0 !important;
      padding-right:0 !important;
    }

    @media(min-width:640px){
      body.sm\:p-6{
        padding-left:0 !important;
        padding-right:0 !important;
      }
    }

    /* Todas las secciones decorativas llegan exactamente de borde a borde */
    .section-wave,
    .light #mainCatalogView header,
    .light #mainCatalogView main,
    .light section.max-w-3xl,
    .light footer{
      width:100% !important;
      max-width:none !important;
    }

    /* =========================================================
       WAVES: COLOR CORRECTO
       Fondo del wave = color de ARRIBA.
       Path = color de ABAJO.
       Así la transición no queda invertida.
       ========================================================= */

    .section-wave{
      height:auto !important;
      min-height:0 !important;
      margin:0 !important;
      margin-left:0 !important;
      background:transparent !important;
      overflow:hidden !important;
    }

    .section-wave svg{
      width:100% !important;
      height:78px !important;
      display:block !important;
    }

    /* #1bb5f9 (arriba) → crema (abajo) */
    .light .section-wave-hero-catalog{
      background:#1bb5f9 !important;
    }

    .light .section-wave-hero-catalog path{
      fill:#fff6e8 !important;
    }

    /* Crema (arriba) → #f14749 (abajo) */
    .light .section-wave-catalog-faq{
      background:#fff6e8 !important;
    }

    .light .section-wave-catalog-faq path{
      fill:#f14749 !important;
    }

    /* #f14749 (arriba) → amarillo (abajo) */
    .light .section-wave-faq-footer{
      background:#f14749 !important;
    }

 

    /* Eliminar la antigua onda por pseudo-elemento del footer */
    .light footer::before{
      display:none !important;
      content:none !important;
    }

    /* Footer ya no necesita padding extra para compensar una onda falsa */
    .light footer{
      padding-top:34px !important;
    }

    /* Evitar cualquier margen lateral heredado */
    .light #mainCatalogView header,
    .light #mainCatalogView main,
    .light section.max-w-3xl,
    .light footer{
      margin-left:0 !important;
      margin-right:0 !important;
    }

    /* El contenido sigue centrado dentro de cada bloque full-width */
    .light #mainCatalogView header > *{
      max-width:1100px;
      margin-left:auto;
      margin-right:auto;
    }

    .light #mainCatalogView main > *{
      max-width:1240px;
      margin-left:auto;
      margin-right:auto;
    }

    .light section.max-w-3xl > *{
      max-width:760px;
      margin-left:auto;
      margin-right:auto;
    }

    /* Footer content centered */
    .light footer > *{
      max-width:1100px;
      margin-left:auto;
      margin-right:auto;
    }

    /* Más ondas, uniformes y suaves */
    @media(max-width:639px){
      .section-wave svg{
        height:54px !important;
      }

      .light footer{
        padding-top:28px !important;
      }
    }



    /* =========================================================
       AJUSTE DE PALETA + ONDAS MÁS ESTIRADAS
       ========================================================= */

    /* Onda: más ancha y relajada, manteniendo varias curvas */
    .section-wave svg{
      height:86px !important;
    }

    /* =========================================================
       SECCIÓN SUPERIOR + MENÚ + FOQUITO
       AZUL #1bb5f9
       ========================================================= */

    /* Barra superior móvil */
    .light .lg\:hidden.fixed.top-0{
      background:#1bb5f9 !important;
      border-color:#1bb5f9 !important;
      box-shadow:0 3px 14px rgba(12,111,157,.20) !important;
    }

    /* Botón menú */
    .light .lg\:hidden.fixed.top-0 button[onclick="toggleSidebar(true)"]{
      background:#ffffff !important;
      color:#1bb5f9 !important;
      border:0 !important;
    }

    /* Botón foquito */
    .light .lg\:hidden.fixed.top-0 button[onclick="toggleTheme()"]{
      background:#ffffff !important;
      color:#ffb703 !important;
      border-color:#ffffff !important;
      box-shadow:0 4px 10px rgba(12,111,157,.18) !important;
    }

    /* Hero */
    .light #mainCatalogView header{
      background:#1bb5f9 !important;
    }

    /* =========================================================
       CATÁLOGO / IMÁGENES
       ROJO CORAL OBLIGATORIO #f14749
       ========================================================= */

    .light #mainCatalogView main{
      background:#f14749 !important;
    }

    /* Mantener las tarjetas blancas para máxima visibilidad */
    .light #catalogGrid > div{
      background:#ffffff !important;
      border-color:#ffffff !important;
      box-shadow:0 9px 22px rgba(113,31,34,.22) !important;
    }

    .light #catalogGrid > div:hover{
      box-shadow:0 14px 30px rgba(113,31,34,.30) !important;
    }

    .light #catalogGrid > div > div:first-child,
    .light #catalogGrid > div > div:last-child{
      background:#ffffff !important;
    }

    /* =========================================================
       PREGUNTAS FRECUENTES
       AMARILLO CÁLIDO
       ========================================================= */

    .light section.max-w-3xl{
      background:#ffbd3c !important;
    }

    .light section.max-w-3xl h2{
      color:#26324b !important;
      -webkit-text-fill-color:#26324b !important;
    }

    .light section.max-w-3xl .space-y-2\.5 > div{
      background:#ffffff !important;
      box-shadow:0 6px 18px rgba(126,82,7,.16) !important;
    }

    /* =========================================================
       FOOTER
       VERDE MENTA
       ========================================================= */

    .light footer{
      background:#62c58b !important;
    }

    /* =========================================================
       WAVES: ORDEN CORRECTO DE COLORES
       Arriba = fondo del bloque superior
       Path = color del bloque inferior
       ========================================================= */

    /* Azul → Rojo */
    .light .section-wave-hero-catalog{
      background:#1bb5f9 !important;
    }

    .light .section-wave-hero-catalog path{
      fill:#f14749 !important;
    }

    /* Rojo → Amarillo */
    .light .section-wave-catalog-faq{
      background:#f14749 !important;
    }

    .light .section-wave-catalog-faq path{
      fill:#ffbd3c !important;
    }

    /* Amarillo → Verde */
    .light .section-wave-faq-footer{
      background:#ffbd3c !important;
    }

    .light .section-wave-faq-footer path{
      fill:#49c180  !important;
    }

    /* Sidebar/drawer también armonizado con la paleta */
    .light #sidebarNav{
      background:#1bb5f9 !important;
      border-color:#1bb5f9 !important;
    }

    .light #sidebarNav,
    .light #sidebarNav .text-slate-900,
    .light #sidebarNav .text-slate-800{
      color:#ffffff !important;
    }

    .light #sidebarNav .text-slate-500,
    .light #sidebarNav .text-slate-600{
      color:rgba(255,255,255,.80) !important;
    }

    .light #sidebarNav .border-slate-200{
      border-color:rgba(255,255,255,.24) !important;
    }

    /* Responsive */
    @media(max-width:639px){
      .section-wave svg{
        height:58px !important;
      }
    }



    /* =========================================================
       AJUSTES FINALES
       1. Buscador sobre el grid
       2. Waves sin líneas blancas entre secciones
       3. Separación y borde luminoso de los items
       4. Detalle blanco sobre fondo del main
       ========================================================= */

    /* ---------------- BUSCADOR SOBRE EL CATÁLOGO ---------------- */
    .light #mainCatalogView header{
      padding-bottom:18px !important;
    }

    .light #mainCatalogView main .catalog-search{
      position:relative !important;
      z-index:5 !important;
      margin-top:0 !important;
      margin-bottom:30px !important;
    }

    /* ---------------- WAVES: ELIMINAR LÍNEAS VACÍAS ---------------- */
    /*
      El wave se superpone ligeramente con las dos secciones vecinas.
      Esto evita las líneas blancas por redondeo de píxeles en diferentes
      resoluciones y escalas de pantalla.
    */
    .section-wave{
      position:relative !important;
      z-index:10 !important;
      display:block !important;
      line-height:0 !important;
      margin-top:-2px !important;
      margin-bottom:-2px !important;
      transform:translateZ(0) !important;
      overflow:hidden !important;
    }

    .section-wave svg{
      display:block !important;
      width:100.2% !important;
      margin-left:-0.1% !important;
      margin-bottom:-1px !important;
      vertical-align:bottom !important;
      transform:translateY(.5px) translateZ(0) !important;
      shape-rendering:auto !important;
    }

    /* La sección siguiente se monta 1px debajo de la onda */
    .light #mainCatalogView main,
    .light section.max-w-3xl,
    .light footer{
      position:relative !important;
    }

    /* ---------------- GRID: MÁS AIRE ENTRE ITEMS ---------------- */
    .light #catalogGrid{
      column-gap:28px !important;
      row-gap:32px !important;
    }

    @media(max-width:639px){
      .light #catalogGrid{
        column-gap:16px !important;
        row-gap:24px !important;
      }
    }

    /* ---------------- BORDE TIPO HALO EN CADA ITEM ---------------- */
    .light #catalogGrid > div{
      position:relative !important;
      overflow:visible !important;
      -webkit-box-shadow:0px 0px 0px 5px #fffbf954, 0 9px 22px rgba(113,31,34,.18) !important;
      box-shadow:0px 0px 0px 5px #fffbf954, 0 9px 22px rgba(113,31,34,.18) !important;
      transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease !important;
    }

    .light #catalogGrid > div:hover{
      transform:translateY(-5px) !important;
      -webkit-box-shadow:0px 0px 0px 5px #1bb5f9, 0 15px 30px rgba(113,31,34,.28) !important;
      box-shadow:0px 0px 0px 5px #1bb5f9, 0 15px 30px rgba(113,31,34,.28) !important;
    }

    /* El halo no debe recortar la imagen ni el título */
    .light #catalogGrid > div > div:first-child{
      overflow:hidden !important;
    }

    /* ---------------- VISTA DEL ITEM ---------------- */
    /*
      El fondo general al entrar al item toma el color del MAIN (rojo),
      mientras el contenido/tarjeta del detalle conserva blanco.
    */
    .light #detailView{
      background:#f14749 !important;
      width:100% !important;
      min-height:100vh !important;
      padding-top:84px !important;
      padding-bottom:60px !important;
    }

    .light #detailView > div{
      background:#ffffff !important;
    }

    /* En móvil mantener espacio correcto bajo la barra superior */
    @media(max-width:639px){
      .light #detailView{
        padding-top:72px !important;
        padding-bottom:42px !important;
      }
    }



    /* =========================================================
       NUEVO AJUSTE
       1. LIGHT adopta la ESTRUCTURA del DARK (sin copiar colores)
       2. DARK recibe secciones de colores oscuros
       3. Botón "Cargar más invitaciones" más grande y llamativo
       ========================================================= */

    /* ---------------------------------------------------------
       LIGHT: ESTRUCTURA VISUAL COMO DARK
       Mantiene su paleta actual.
       --------------------------------------------------------- */

    /* Hero más compacto y centrado como la composición dark */
    .light #mainCatalogView header{
      text-align:center !important;
    }

    /* Buscador: misma composición estructural del dark */
    .light .catalog-search{
      max-width:760px !important;
      padding:0 10px !important;
    }

    .light .catalog-search > div{
      position:relative !important;
    }

    .light #searchInput{
      width:100% !important;
      min-height:54px !important;
      padding-left:48px !important;
      padding-right:18px !important;
      border-radius:14px !important;
      font-size:14px !important;
    }

    /* Items: estructura más sólida como dark */
    .light #catalogGrid > div{
      border-radius:16px !important;
      overflow:visible !important;
      transition:
        transform .22s ease,
        box-shadow .22s ease !important;
    }

    .light #catalogGrid > div > div:first-child{
      border-radius:12px 12px 0 0 !important;
    }

    .light #catalogGrid > div > div:last-child{
      min-height:58px !important;
      padding:12px 10px !important;
      border-radius:0 0 12px 12px !important;
    }

    .light #catalogGrid h3{
      font-size:13px !important;
      line-height:1.25 !important;
      font-weight:800 !important;
    }

    /* ---------------------------------------------------------
       DARK: SECCIONES CON COLOR
       Paleta oscura basada en los mismos bloques del Light.
       --------------------------------------------------------- */

    .dark #mainCatalogView{
      background:transparent !important;
    }

    /* Sección superior / menú */
    .dark .lg\:hidden.fixed.top-0{
      background:#0b5d80 !important;
      border-color:#0b5d80 !important;
    }

    .dark #mainCatalogView header{
      background:#0b5d80 !important;
      color:#ffffff !important;
    }

    /* Azul oscuro → sección catálogo */
    .dark .section-wave-hero-catalog{
      background:#0b5d80 !important;
    }

    .dark .section-wave-hero-catalog path{
      fill:#7f3036 !important;
    }

    /* Catálogo: rojo oscuro */
    .dark #mainCatalogView main{
      background:#7f3036 !important;
    }

    /* Rojo oscuro → FAQ */
    .dark .section-wave-catalog-faq{
      background:#7f3036 !important;
    }

    .dark .section-wave-catalog-faq path{
      fill:#8a641d !important;
    }

    /* FAQ: amarillo/ocre oscuro */
    .dark section.max-w-3xl{
      background:#8a641d !important;
    }

    /* FAQ → footer */
    .dark .section-wave-faq-footer{
      background:#8a641d !important;
    }

    .dark .section-wave-faq-footer path{
      fill:#285f50 !important;
    }

    /* Footer: verde oscuro */
    .dark footer{
      background:#285f50 !important;
    }

    /* Contenido de FAQ en dark */
    .dark section.max-w-3xl h2{
      color:#fff7d6 !important;
    }

    .dark section.max-w-3xl .space-y-2\.5 > div{
      background:#172033 !important;
      border-color:rgba(255,255,255,.12) !important;
    }

    /* Las tarjetas del catálogo mantienen la estructura dark original */
    .dark #catalogGrid > div{
      border-radius:16px !important;
    }

    /* Detalle dark conserva el fondo general del catálogo */
    .dark #detailView{
      background:#7f3036 !important;
    }

    /* ---------------------------------------------------------
       BOTÓN CARGAR MÁS INVITACIONES
       --------------------------------------------------------- */

    #loadMoreBtn,
    #loadMoreInvitations,
    button[onclick*="loadMore"],
    button[onclick*="loadMoreInvitations"]{
      min-width:250px !important;
      min-height:58px !important;
      padding:16px 30px !important;
      border-radius:30px !important;
      font-size:19px !important;
      font-weight:800 !important;
      letter-spacing:.01em !important;
      transform:scale(1) !important;
      transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease !important;
      box-shadow:0 8px 0 rgba(0,0,0,.18), 0 15px 28px rgba(0,0,0,.16) !important;
    }

    .light #loadMoreBtn,
    .light #loadMoreInvitations,
    .light button[onclick*="loadMore"],
    .light button[onclick*="loadMoreInvitations"]{
      background:#000000 !important;
      color:#fff !important;
      border:2px solid #000 !important;
    }

    .dark #loadMoreBtn,
    .dark #loadMoreInvitations,
    .dark button[onclick*="loadMore"],
    .dark button[onclick*="loadMoreInvitations"]{
      background:#ffc85c !important;
      color:#000000 !important;
      border:2px solid rgba(255,255,255,.15) !important;
    }

    #loadMoreBtn:hover,
    #loadMoreInvitations:hover,
    button[onclick*="loadMore"]:hover,
    button[onclick*="loadMoreInvitations"]:hover{
      transform:translateY(-4px) scale(1.03) !important;
      box-shadow:0 12px 0 rgba(0,0,0,.16), 0 20px 34px rgba(0,0,0,.20) !important;
      filter:brightness(1.05) !important;
    }

    @media(max-width:639px){
      #loadMoreBtn,
      #loadMoreInvitations,
      button[onclick*="loadMore"],
      button[onclick*="loadMoreInvitations"]{
        width:min(100%,320px) !important;
        min-width:0 !important;
        min-height:54px !important;
        font-size:14px !important;
      }
    }



    /* =========================================================
       CORRECCIONES DE VISIBILIDAD Y ARMONÍA FINAL
       ========================================================= */

    /* 1. CATÁLOGO LIGHT: SIN BORDE / SIN HALO EXTERNO */
    .light #catalogGrid > div{
      border:0 !important;
      outline:0 !important;
      -webkit-box-shadow:0 9px 22px rgba(113,31,34,.22) !important;
      box-shadow:0 9px 22px rgba(113,31,34,.22) !important;
    }

    .light #catalogGrid > div:hover{
      -webkit-box-shadow:0 14px 30px rgba(113,31,34,.30) !important;
      box-shadow:0 14px 30px rgba(113,31,34,.30) !important;
    }

    /* =========================================================
       2. DARK: PALETA ORDENADA, MENOS MEZCLADA
       Una sola familia cromática oscura:
       Azul petróleo → coral oscuro → dorado oscuro → verde petróleo
       ========================================================= */

    /* Superior */
    .dark #mainCatalogView header,
    .dark .lg\:hidden.fixed.top-0{
      background:#102b3a !important;
      border-color:#102b3a !important;
    }

    /* Azul petróleo → catálogo coral profundo */
    .dark .section-wave-hero-catalog{
      background:#102b3a !important;
    }
    .dark .section-wave-hero-catalog path{
      fill:#542b38 !important;
    }

    /* Catálogo */
    .dark #mainCatalogView main{
      background:#542b38 !important;
    }

    /* Catálogo → FAQ dorado/oliva oscuro */
    .dark .section-wave-catalog-faq{
      background:#542b38 !important;
    }
    .dark .section-wave-catalog-faq path{
      fill:#4d4427 !important;
    }

    /* FAQ */
    .dark section.max-w-3xl{
      background:#4d4427 !important;
    }

    /* FAQ → Footer verde petróleo */
    .dark .section-wave-faq-footer{
      background:#4d4427 !important;
    }
    .dark .section-wave-faq-footer path{
      fill:#173c38 !important;
    }

    /* Footer */
    .dark footer{
      background:#173c38 !important;
    }

    /* Evitar tarjetas demasiado desconectadas visualmente */
    .dark #catalogGrid > div{
      background:#172033 !important;
      border-color:rgba(255,255,255,.08) !important;
      box-shadow:0 9px 22px rgba(0,0,0,.22) !important;
    }

    .dark section.max-w-3xl .space-y-2\.5 > div{
      background:#1b2433 !important;
      border:1px solid rgba(255,255,255,.10) !important;
    }

    /* =========================================================
       3. SIDEBAR LIGHT: FONDO Y TEXTO CON CONTRASTE REAL
       ========================================================= */

    .light #sidebarNav{
      background:#ffffff !important;
      border-right:1px solid rgba(27,181,249,.18) !important;
      color:#27334d !important;
      box-shadow:10px 0 30px rgba(26,63,87,.10) !important;
    }

    .light #sidebarNav *,
    .light #sidebarNav button{
      text-shadow:none !important;
    }

    .light #sidebarNav .text-white{
      color:#27334d !important;
    }

    .light #sidebarNav .text-slate-900,
    .light #sidebarNav .text-slate-800,
    .light #sidebarNav .text-slate-700{
      color:#27334d !important;
    }

    .light #sidebarNav .text-slate-500,
    .light #sidebarNav .text-slate-600,
    .light #sidebarNav .text-slate-400{
      color:#66738c !important;
    }

    .light #sidebarNav .border-slate-200,
    .light #sidebarNav .border-slate-700{
      border-color:#d9edf7 !important;
    }

    .light #sidebarNav .main-cat-btn{
      background:#f5fbff !important;
      color:#27334d !important;
      border:1px solid #d9edf7 !important;
    }

    .light #sidebarNav .main-cat-btn:hover{
      background:#e6f7ff !important;
      color:#153f59 !important;
      border-color:#1bb5f9 !important;
    }

    .light #sidebarNav .main-cat-btn.bg-amber-400,
    .light #sidebarNav .main-cat-btn[class*="bg-amber"]{
      background:#1bb5f9 !important;
      color:#ffffff !important;
      border-color:#1bb5f9 !important;
    }

    .light #sidebarNav .main-cat-btn.bg-amber-400 *,
    .light #sidebarNav .main-cat-btn[class*="bg-amber"] *{
      color:#ffffff !important;
    }

    .light #sidebarNav .sub-evt-btn{
      background:#ffffff !important;
      color:#46546e !important;
      border-color:#e0edf3 !important;
    }

    /* =========================================================
       4. FAQ LIGHT: TABS SIEMPRE VISIBLES
       ========================================================= */

    .light section.max-w-3xl .space-y-2\.5 > div{
      display:block !important;
      visibility:visible !important;
      opacity:1 !important;
      background:#ffffff !important;
      border:1px solid rgba(38,50,75,.16) !important;
      box-shadow:0 6px 18px rgba(126,82,7,.16) !important;
    }

    .light section.max-w-3xl .space-y-2\.5 > div > button{
      display:flex !important;
      visibility:visible !important;
      opacity:1 !important;
      min-height:52px !important;
      background:#ffffff !important;
      color:#27334d !important;
    }

    .light section.max-w-3xl .space-y-2\.5 > div > button span:first-child{
      color:#27334d !important;
    }

    .light section.max-w-3xl [id$="-icon"]{
      color:#f14749 !important;
      flex-shrink:0 !important;
    }

    /* =========================================================
       5. CTA FOOTER: MUCHO MÁS LLAMATIVO
       ========================================================= */

    .light footer{
   
      padding-top:42px !important;
      padding-bottom:42px !important;
    }

    .light footer > .mb-5{
      max-width:780px !important;
      margin-left:auto !important;
      margin-right:auto !important;
      padding:28px 24px !important;
      background:rgba(255,255,255,.16) !important;
      border:1px solid rgba(255,255,255,.34) !important;
      border-radius:24px !important;
      box-shadow:0 16px 35px rgba(18,94,55,.20) !important;
      backdrop-filter:blur(8px) !important;
    }

    .light footer h3{
      font-size:clamp(1.25rem,2.2vw,1.8rem) !important;
      font-weight:900 !important;
      line-height:1.15 !important;
      color:#ffffff !important;
      margin-bottom:10px !important;
    }

    .light footer p{
      color:rgba(255,255,255,.94) !important;
    }

    .light #footerWhatsappBtn{
      min-height:58px !important;
      padding:15px 32px !important;
      margin-top:8px !important;
      background:#ffffff !important;
      color:#238e5c !important;
      border:2px solid rgba(255,255,255,.9) !important;
      border-radius:999px !important;
      font-size:14px !important;
  
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important;
    }

    .light #footerWhatsappBtn i{
      color:#25b96f !important;
      font-size:20px !important;
    }

    .light #footerWhatsappBtn:hover{
      background:#fff8d7 !important;
      color:#16764a !important;
      transform:translateY(-4px) scale(1.03) !important;
 
    }

    /* CTA dark: también contraste real */
    .dark footer{
      padding-top:42px !important;
      padding-bottom:42px !important;
    }

    .dark footer > .mb-5{
      max-width:780px !important;
      margin-left:auto !important;
      margin-right:auto !important;
      padding:28px 24px !important;
      background:rgba(255,255,255,.06) !important;
      border:1px solid rgba(255,255,255,.12) !important;
      border-radius:24px !important;
    }

    .dark #footerWhatsappBtn{
      background:#f5c94c !important;
      color:#172033 !important;
      border:0 !important;
      box-shadow:0 8px 0 rgba(0,0,0,.20), 0 18px 30px rgba(0,0,0,.18) !important;
    }

    .dark #footerWhatsappBtn:hover{
      background:#ffe07a !important;
    }

    @media(max-width:639px){
      .light footer > .mb-5,
      .dark footer > .mb-5{
        margin-left:14px !important;
        margin-right:14px !important;
        padding:24px 16px !important;
        border-radius:20px !important;
      }

      .light footer h3{
        font-size:1.28rem !important;
      }

      .light #footerWhatsappBtn{
        width:min(100%,290px) !important;
        justify-content:center !important;
      }
    }



    /* =========================================================
       AJUSTE: HEADER + MENÚ + FOQUITO = #254185
       ========================================================= */

    /* Barra superior móvil: nombre, menú y foquito */
    .light .lg\:hidden.fixed.top-0{
      background:#254185 !important;
      border-color:#254185 !important;
      box-shadow:0 4px 16px rgba(20,45,84,.25) !important;
    }

    /* Sección superior del catálogo */
    .light #mainCatalogView header{
      background:#254185 !important;
    }

    /* Botón menú sobre el nuevo fondo */
    .light .lg\:hidden.fixed.top-0 button[onclick="toggleSidebar(true)"]{
      background:rgba(255,255,255,.13) !important;
      color:#ffffff !important;
      border:1px solid rgba(255,255,255,.22) !important;
    }

    /* Foquito */
    .light .lg\:hidden.fixed.top-0 button[onclick="toggleTheme()"]{
      background:#ffffff !important;
      color:#f5b82e !important;
      border-color:#ffffff !important;
    }

    /* La onda superior debe pertenecer exactamente al color del header */
    .light .section-wave-hero-catalog{
      background:#254185 !important;
    }

    /* =========================================================
       ONDAS: eliminar líneas y asegurar continuidad de color
       ========================================================= */

  

    .section-wave svg{
      display:block !important;
      width:100.4% !important;
      margin-left:-0.2% !important;
      margin-top:-1px !important;
      margin-bottom:-2px !important;
      transform:translateZ(0) !important;
    }

    /* Color superior = sección de arriba / path = sección siguiente */
    .light .section-wave-hero-catalog{
      background:#254185 !important;
    }

    .light .section-wave-catalog-faq{
      background:#f14749 !important;
    }

    .light .section-wave-faq-footer{
      background:#ffbd3c !important;
    }

    /* =========================================================
       CTA: "¿Quieres solicitar una invitación o ser revendedor?"
       Más llamativo y con contraste real
       ========================================================= */

    .light footer{
         background: #49c180!important;
      padding-top:52px !important;
      padding-bottom:46px !important;
    }

    /* Tarjeta CTA */
    .light footer > .mb-5{
      max-width:850px !important;
      padding:34px 32px 30px !important;
      background:linear-gradient(145deg,#ffffff 0%,#fff8dc 100%) !important;
      border:4px solid rgba(255,255,255,.55) !important;
      border-radius:28px !important;
      box-shadow:
        0 0 0 7px rgba(255,255,255,.13),
        0 18px 0 rgba(24,112,68,.18),
        0 28px 45px rgba(14,82,48,.24) !important;
      position:relative !important;
      overflow:hidden !important;
      text-align:center !important;
    }



    .light footer > .mb-5::before{
      top:14px !important;
      left:24px !important;
    }

    .light footer > .mb-5::after{
      right:24px !important;
      bottom:14px !important;
    }

    .light footer h3{
      max-width:650px !important;
      margin-left:auto !important;
      margin-right:auto !important;
      color:#254185 !important;
      -webkit-text-fill-color:#254185 !important;
      font-size:clamp(1.4rem,2.6vw,2rem) !important;
      font-weight:900 !important;
      line-height:1.15 !important;
      letter-spacing:-.02em !important;
    }

    .light footer p{
      max-width:600px !important;
      margin-left:auto !important;
      margin-right:auto !important;
      color:#52617b !important;
      font-size:16px !important;    margin-top: 49px;
      line-height:1.55 !important;
    }

    /* Botón CTA: color totalmente distinto al fondo */
    .light #footerWhatsappBtn{
      background:#f14749 !important;
      color:#ffffff !important;
      border:3px solid #ffffff !important;
      min-height:62px !important;
      padding:16px 36px !important;
      border-radius:999px !important;
      font-size:15px !important;
      font-weight:900 !important;
  
    }

    .light #footerWhatsappBtn i{
      color:#ffffff !important;
      font-size:21px !important;
    }

   

    /* Mantener el resto del footer legible */
    .light footer > p,
    .light footer > div:not(.mb-5),
    .light footer a:not(#footerWhatsappBtn){
      color:rgba(255,255,255,.92) !important;
    }

    @media(max-width:639px){
      .light footer{
        padding-top:42px !important;
      }

      .light footer > .mb-5{
        margin-left:14px !important;
        margin-right:14px !important;
        padding:30px 18px 26px !important;
        border-radius:24px !important;
      }

      .light footer > .mb-5::before{
        left:12px !important;
      }

      .light footer > .mb-5::after{
        right:12px !important;
      }

      .light footer h3{
        font-size:1.45rem !important;
      }

      .light #footerWhatsappBtn{
        width:min(100%,310px) !important;
        justify-content:center !important;
      }
    }



    /* =========================================================
       CORRECCIÓN DE JERARQUÍA DE COLORES
       Barra superior: #254185
       Sección "Catálogo de Invitaciones": celeste #1bb5f9
       ========================================================= */

    /* Arriba: nombre / menú / foquito mantiene azul oscuro */
    .light .lg\:hidden.fixed.top-0{
      background:#254185 !important;
      border-color:#254185 !important;
    }

    /* Sección inferior independiente: título + contenido del header */
    .light #mainCatalogView header{
      background:#1bb5f9 !important;
    }

    /* La primera onda debe salir del celeste, no del azul oscuro */
    .light .section-wave-hero-catalog{
      background:#1bb5f9 !important;
    }

    /* En escritorio, cualquier zona superior asociada al nombre
       conserva #254185 sin afectar el header del catálogo */
    @media(min-width:1024px){
      .light .lg\:hidden.fixed.top-0{
        background:#254185 !important;
      }
    }



    /* =========================================================
       PORTADA SIMPLIFICADA + SOLO LIGHT
       ========================================================= */

    /* Desactivar visualmente cualquier variante dark */
    html.dark,
    .dark{
      color-scheme:light !important;
    }

    /* PORTADA: cada item solo imagen + H3 */
    #catalogGrid > div{
      overflow:hidden !important;
    }

    /* Ocultar cualquier control, descripción, botón o bloque extra */
    #catalogGrid > div > div:last-child > *:not(h3),
    #catalogGrid > div > div:last-child .flex,
    #catalogGrid > div > div:last-child button,
    #catalogGrid > div > div:last-child a:not(h3 a){
      display:none !important;
    }

    #catalogGrid > div > div:last-child{
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      min-height:52px !important;
      padding:10px 8px 12px !important;
      background:#ffffff !important;
    }

    #catalogGrid > div > div:last-child h3{
      display:block !important;
      margin:0 !important;
      text-align:center !important;
    }

    /* Solo la imagen ocupa la parte visual superior */
    #catalogGrid > div > div:first-child{
      width:100% !important;
    }

    #catalogGrid > div > div:first-child img{
      display:block !important;
      width:100% !important;
      height:auto !important;
    }

    /* BOTÓN UNIRSE: reemplaza al foquito */
    .light #joinButton{
      background:rgba(255,255,255,.14) !important;
      color:#ffffff !important;
      border-color:rgba(255,255,255,.28) !important;
    }

    .light #joinButton:hover{
      background:rgba(255,255,255,.24) !important;
      transform:scale(1.05) !important;
    }

    /* Eliminar reglas visuales heredadas del foquito */
    .light button[onclick="toggleTheme()"]{
      display:none !important;
    }

    /* El nombre central es claramente clicable */
    .light #brandMobileContainer{
      color:#ffffff !important;
      text-decoration:none !important;
      cursor:pointer !important;
    }

    .light #brandMobileContainer span{
      color:#ffffff !important;
    }



    /* =========================================================
       MOBILE: BARRA SUPERIOR + CONTENIDO SIN ESPACIOS VARIABLES
       ========================================================= */

    /* Altura fija y consistente de la barra móvil */
    @media(max-width:1023px){
      .lg\:hidden.fixed.top-0{
        height:64px !important;
        min-height:64px !important;
        display:flex !important;
        align-items:center !important;
        left:0 !important;
        right:0 !important;
        width:100% !important;
        padding:0 14px !important;
        box-sizing:border-box !important;
      }

      /* El contenido que sigue comienza siempre justo debajo */
      body{
        padding-top:64px !important;
      }

      #mainCatalogView,
      #detailView{
        margin-top:0 !important;
      }

      /* Evita diferencias por safe areas y alturas heredadas */
      .lg\:hidden.fixed.top-0 + *{
        margin-top:0 !important;
      }
    }

    /* =========================================================
       MENÚ MÓVIL: ICONO GRANDE, BLANCO Y LLAMATIVO
       ========================================================= */

    @media(max-width:1023px){
      .lg\:hidden.fixed.top-0 button[onclick="toggleSidebar(true)"]{
        width:46px !important;
        height:46px !important;
        min-width:46px !important;
        border-radius:14px !important;
        background:rgba(255,255,255,.14) !important;
        border:1px solid rgba(255,255,255,.24) !important;
        color:#ffffff !important;
      }

      .lg\:hidden.fixed.top-0 button[onclick="toggleSidebar(true)"] i{
        font-size:25px !important;
        color:#ffffff !important;
      }

      /* Botón Unirse equilibrado con el menú */
      .light #joinButton{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
      }

      .light #joinButton i{
        font-size:19px !important;
      }
    }

    /* =========================================================
       SIDEBAR MÓVIL: OCUPA TODA LA PANTALLA
       ========================================================= */

    @media(max-width:1023px){
      #sidebarNav{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        min-height:100dvh !important;
        border-radius:0 !important;
        z-index:9999 !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        transform:translateX(-100%) !important;
        transition:transform .28s ease !important;
      }

      #sidebarNav.translate-x-0{
        transform:translateX(0) !important;
      }

      /* Si el script usa otra clase, el drawer visible también ocupa todo */
      #sidebarNav:not(.hidden){
        max-width:none !important;
      }
    }

    /* =========================================================
       BUSCADOR MÓVIL: EXPERIENCIA FULLSCREEN
       ========================================================= */

    @media(max-width:639px){

      /* El buscador mantiene su apariencia normal antes de activarse */
      .catalog-search{
        position:relative !important;
      }

      /* Al enfocarse: contenedor ocupa toda la pantalla */
      .catalog-search:focus-within{
        position:fixed !important;
        inset:0 !important;
        z-index:10000 !important;
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        margin:0 !important;
        padding:84px 16px 24px !important;
        background:#f14749 !important;
        display:flex !important;
        flex-direction:column !important;
        box-sizing:border-box !important;
        overflow-y:auto !important;
      }

      .catalog-search:focus-within > div{
        width:100% !important;
        max-width:720px !important;
        margin:0 auto !important;
      }

      .catalog-search:focus-within #searchInput{
        width:100% !important;
        min-height:58px !important;
        font-size:16px !important; /* evita zoom automático en iPhone */
        background:#ffffff !important;
        color:#27334d !important;
      }

      /* Resultados visibles y con espacio suficiente */
      .catalog-search:focus-within #searchSuggestions,
      .catalog-search:focus-within .search-suggestions,
      .catalog-search:focus-within [id*="suggest"],
      .catalog-search:focus-within [class*="suggest"]{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        width:100% !important;
        max-width:720px !important;
        max-height:none !important;
        margin:12px auto 0 !important;
        z-index:10001 !important;
        overflow:visible !important;
      }
    }

    /* =========================================================
       BUSCADOR: EVITAR QUE EL NAVEGADOR LO TRATE COMO PASSWORD
       ========================================================= */

    #searchInput{
      autocomplete:off !important;
      -webkit-text-security:none !important;
      -webkit-appearance:none !important;
    }



    /* =========================================================
       CORRECCIONES DE ESPACIOS VACÍOS
       ========================================================= */

    .light #mainCatalogView{
      padding-top:0 !important;
      min-height:100vh !important;
    }

    @media(max-width:639px){
      .light #detailView{
        padding-top:30px !important;
        padding-bottom:30px !important;
      }

      /* El margen inferior era una causa de separación visual */
      .my-6{
        margin-top:1.5rem !important;
        margin-bottom:0 !important;
      }

      /* Quitar separaciones heredadas entre barra móvil y contenido */
      body,
      #app,
      #mainCatalogView{
        margin-top:0 !important;
      }
    }

    /* =========================================================
       MENÚ: FUNCIONAMIENTO CONSISTENTE PC + MÓVIL
       ========================================================= */

    #sidebarNav{
      z-index:9998 !important;
    }

    /* Overlay para cerrar tocando fuera, sin modificar la lógica original */
    #sidebarOverlay{
      position:fixed;
      inset:0;
      z-index:9997;
      background:rgba(15,23,42,.42);
      opacity:0;
      visibility:hidden;
      pointer-events:none;
      transition:opacity .25s ease, visibility .25s ease;
    }

    #sidebarOverlay.is-open{
      opacity:1;
      visibility:visible;
      pointer-events:auto;
    }

    @media(max-width:1023px){
      #sidebarNav{
        inset:0 !important;
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        min-height:100dvh !important;
      }

      body.menu-open{
        overflow:hidden !important;
      }
    }

    /* =========================================================
       BUSCADOR COMO MODAL REAL
       La búsqueda y sus funciones originales se conservan.
       ========================================================= */

    #searchModal{
      position:fixed;
      inset:0;
      z-index:10050;
      display:none;
      align-items:flex-start;
      justify-content:center;
      padding:76px 16px 24px;
      box-sizing:border-box;
      background:rgba(37,65,133,.96);
      overflow-y:auto;
    }

    #searchModal.is-open{
      display:flex;
    }

    #searchModal .search-modal-panel{
      width:min(100%,760px);
      margin:0 auto;
      position:relative;
    }

    #searchModal .search-modal-close{
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.25);
      background:rgba(255,255,255,.14);
      color:#fff;
      display:flex;
      align-items:center;
      justify-content:center;
      margin:0 0 14px auto;
      font-size:18px;
      cursor:pointer;
    }

    #searchModal .search-modal-close:hover{
      background:rgba(255,255,255,.25);
    }

    /* El input original se mueve temporalmente al modal mediante JS */
    #searchModal #searchInput{
      width:100% !important;
      min-height:58px !important;
      font-size:16px !important;
      background:#fff !important;
      color:#27334d !important;
      border-radius:16px !important;
    }

    /* Las sugerencias/resultados quedan visibles en el modal */
    #searchModal #searchSuggestions,
    #searchModal .search-suggestions{
      position:relative !important;
      top:auto !important;
      left:auto !important;
      right:auto !important;
      width:100% !important;
      max-height:none !important;
      margin-top:12px !important;
      overflow:visible !important;
      z-index:10051 !important;
    }

    @media(min-width:640px){
      #searchModal{
        padding-top:90px;
      }
    }



    /* =========================================================
       FIX DEFINITIVO: MENÚ MÓVIL + BUSCADOR MODAL + ICONO PC
       ========================================================= */

    /* El sidebar original usa -translate-x-full para ocultarse.
       No usar transform personalizado que impida su apertura. */
    #sidebarNav{
      z-index:10020 !important;
      transition:transform .28s ease !important;
    }

    #mobileOverlay{
      z-index:10010 !important;
    }

    @media(max-width:1023px){
      #sidebarNav{
        position:fixed !important;
        top:0 !important;
        left:0 !important;
        right:auto !important;
        bottom:auto !important;
        width:100vw !important;
        max-width:none !important;
        height:100dvh !important;
        min-height:100dvh !important;
        border-radius:0 !important;
        overflow-y:auto !important;
      }

      /* Estado oculto/original */
      #sidebarNav.-translate-x-full{
        transform:translateX(-100%) !important;
      }

      /* Estado abierto/original */
      #sidebarNav:not(.-translate-x-full){
        transform:translateX(0) !important;
      }
    }

    /* =========================================================
       ICONO MENÚ: MISMO TAMAÑO Y BLANCO EN MÓVIL Y ESCRITORIO
       ========================================================= */

    button[onclick="toggleSidebar(true)"]{
      width:46px !important;
      height:46px !important;
      min-width:46px !important;
      border-radius:14px !important;
      background:#254185 !important;
      color:#ffffff !important;
      border:1px solid rgba(255,255,255,.22) !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
      box-shadow:0 5px 14px rgba(20,45,84,.22) !important;
    }

    button[onclick="toggleSidebar(true)"] i{
      font-size:25px !important;
      color:#ffffff !important;
    }

    button[onclick="toggleSidebar(true)"]:hover{
      background:#1bb5f9 !important;
      transform:scale(1.04) !important;
    }

    /* =========================================================
       BUSCADOR MODAL: TODO POR ENCIMA DEL RESTO
       ========================================================= */

    #searchModal{
      z-index:20000 !important;
      align-items:flex-start !important;
      padding-top:18px !important;
      padding-bottom:24px !important;
    }

    #searchModal.is-open{
      display:block !important;
    }

    #searchModal .search-modal-panel{
      width:min(100%,760px) !important;
      margin:0 auto !important;
      position:relative !important;
      z-index:20001 !important;
    }

    #searchModal .search-modal-close{
      position:relative !important;
      z-index:20005 !important;
      margin:0 0 12px auto !important;
    }

    /* El bloque original completo del buscador se muestra arriba */
    #searchModalMount{
      width:100% !important;
      position:relative !important;
      z-index:20002 !important;
    }

    #searchModalMount .relative.group,
    #searchModalMount > div,
    #searchModalMount{
      position:relative !important;
      z-index:20003 !important;
      overflow:visible !important;
    }

    #searchModal #searchInput{
      position:relative !important;
      z-index:20004 !important;
      width:100% !important;
      min-height:58px !important;
    }

    /* El ID real de las opciones es suggestionsBox */
    #searchModal #suggestionsBox{
      position:relative !important;
      z-index:20006 !important;
      display:block !important;
      width:100% !important;
      left:auto !important;
      right:auto !important;
      top:auto !important;
      margin:12px 0 0 !important;
      max-height:calc(100dvh - 130px) !important;
      overflow-y:auto !important;
      background:#ffffff !important;
      border-radius:16px !important;
      box-shadow:0 18px 40px rgba(0,0,0,.28) !important;
    }

    /* Respetar la lógica original: si JS agrega hidden, debe ocultarse */
    #searchModal #suggestionsBox.hidden{
      display:none !important;
    }

    @media(max-width:639px){
      #searchModal{
        padding:14px 12px 24px !important;
      }

      #searchModal .search-modal-panel{
        width:100% !important;
      }

      #searchModal #suggestionsBox{
        max-height:calc(100dvh - 105px) !important;
      }
    }



    /* =========================================================
       BUSCADOR:
       - PC: comportamiento normal, SIN modal
       - MÓVIL: modal intuitivo, fijo y sin scroll de página
       ========================================================= */

    /* En escritorio el modal nunca interviene */
    @media(min-width:640px){
      #searchModal{
        display:none !important;
      }
    }

    /* En móvil el modal ocupa exactamente la pantalla disponible */
    @media(max-width:639px){
      #searchModal{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
        overscroll-behavior:none !important;
        background:#254185 !important;
        z-index:30000 !important;
      }

      #searchModal.is-open{
        display:flex !important;
        align-items:flex-start !important;
        justify-content:center !important;
      }

      #searchModal .search-modal-panel{
        width:100% !important;
        height:100% !important;
        padding:14px 14px 18px !important;
        margin:0 !important;
        display:flex !important;
        flex-direction:column !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
      }

      /* Cabecera simple: cerrar + buscador */
      #searchModal .search-modal-close{
        position:absolute !important;
        top:14px !important;
        right:14px !important;
        width:40px !important;
        height:40px !important;
        margin:0 !important;
        z-index:30020 !important;
        background:rgba(255,255,255,.16) !important;
        border:1px solid rgba(255,255,255,.25) !important;
        color:#fff !important;
      }

      #searchModalMount{
        width:100% !important;
        height:100% !important;
        display:flex !important;
        flex-direction:column !important;
        padding-top:56px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
      }

      #searchModalMount .catalog-search{
        width:100% !important;
        max-width:none !important;
        height:100% !important;
        margin:0 !important;
        padding:0 !important;
        display:flex !important;
        flex-direction:column !important;
        overflow:hidden !important;
      }

      #searchModalMount .catalog-search > div{
        flex:0 0 auto !important;
        width:100% !important;
      }

      #searchModal #searchInput{
        min-height:58px !important;
        height:58px !important;
        padding-right:48px !important;
        font-size:16px !important;
        border-radius:16px !important;
      }

      /* Resultados: zona independiente y clara */
      #searchModal #suggestionsBox{
        position:relative !important;
        flex:1 1 auto !important;
        width:100% !important;
        min-height:0 !important;
        max-height:none !important;
        margin-top:12px !important;
        padding:8px !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
        overscroll-behavior:contain !important;
        -webkit-overflow-scrolling:touch !important;
        background:#ffffff !important;
        border-radius:18px !important;
        box-sizing:border-box !important;
      }

      /* Si no hay resultados, no mostrar caja vacía */
      #searchModal #suggestionsBox.hidden{
        display:none !important;
      }

      body.search-modal-open{
        overflow:hidden !important;
        height:100dvh !important;
        touch-action:none !important;
      }

      body.search-modal-open #searchModal,
      body.search-modal-open #searchModal *{
        touch-action:manipulation !important;
      }

      /* Permitir desplazarse únicamente dentro de resultados */
      body.search-modal-open #suggestionsBox{
        touch-action:pan-y !important;
      }
    }

    /* Evitar zoom visual accidental en la interfaz móvil */
    @media(max-width:639px){
      html, body{
        max-width:100% !important;
        overflow-x:hidden !important;
        overscroll-behavior-x:none !important;
      }
    }



    /* =========================================================
       AJUSTE ESCRITORIO: POSICIÓN DEL CATÁLOGO
       ========================================================= */

    @media(min-width:640px){
      /* El catálogo necesita recuperar separación visual respecto
         de la sección superior, sin afectar móvil. */
      .light #mainCatalogView main{
        position:relative !important;
        padding-top:42px !important;
      }

      /* Compensar únicamente la unión visual de la onda */
      .light #mainCatalogView .section-wave-hero-catalog + main{
        margin-top:0 !important;
      }
    }

    /* =========================================================
       BUSCADOR MODAL MÓVIL: RESULTADOS INDIVIDUALES
       ========================================================= */

    @media(max-width:639px){
      #searchModal #suggestionsBox{
        background:transparent !important;
        padding:4px 0 10px !important;
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
        box-shadow:none !important;
        border-radius:0 !important;
      }

      /* Cada resultado se convierte en una tarjeta individual */
      #searchModal #suggestionsBox > *:not(.hidden){
        display:flex !important;
        align-items:center !important;
        width:100% !important;
        min-height:64px !important;
        padding:14px 16px !important;
        box-sizing:border-box !important;
        background:#ffffff !important;
        color:#27334d !important;
        border:1px solid rgba(37,65,133,.10) !important;
        border-radius:16px !important;
        box-shadow:0 6px 16px rgba(12,35,73,.14) !important;
        font-size:16px !important;
        line-height:1.35 !important;
        font-weight:700 !important;
      }

      #searchModal #suggestionsBox > *:not(.hidden):active{
        transform:scale(.985) !important;
        background:#f4fbff !important;
      }

      #searchModal #suggestionsBox > *:not(.hidden) img{
        flex:0 0 auto !important;
        width:42px !important;
        height:42px !important;
        object-fit:cover !important;
        border-radius:10px !important;
      }

      #searchModal #suggestionsBox > *:not(.hidden) *{
        font-size:16px !important;
      }
    }



    /* =========================================================
       REFINAMIENTO FINAL DEL BUSCADOR MODAL MÓVIL
       ========================================================= */
    @media(max-width:639px){

      /* Fondo limpio: eliminar cualquier rojo heredado */
      #searchModal{
        background:#f7f9fc !important;
      }

      #searchModal .search-modal-panel{
        padding:12px 12px 16px !important;
        justify-content:flex-start !important;
      }

      /* Todo el bloque comienza arriba */
      #searchModalMount{
        padding-top:0 !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
      }

      #searchModalMount .catalog-search{
        height:auto !important;
        overflow:visible !important;
      }

      /* Fila superior: buscador + cerrar */
      #searchModalMount .catalog-search > div,
      #searchModalMount .catalog-search > .relative{
        width:100% !important;
      }

      /* Input con espacio para iconos */
      #searchModal #searchInput{
        height:56px !important;
        min-height:56px !important;
        padding-left:46px !important;
        padding-right:54px !important;
        background:#ffffff !important;
        color:#27334d !important;
        border:1px solid rgba(37,65,133,.16) !important;
        box-shadow:0 4px 14px rgba(37,65,133,.10) !important;
      }

      /* Forzar icono de búsqueda visible */
      #searchModalMount .catalog-search .fa-magnifying-glass,
      #searchModalMount .catalog-search .fa-search{
        color:#254185 !important;
        opacity:1 !important;
        visibility:visible !important;
        display:block !important;
        font-size:18px !important;
        z-index:30030 !important;
      }

      /* La X queda al costado derecho del buscador */
      #searchModal .search-modal-close{
        position:absolute !important;
        top:20px !important;
        right:20px !important;
        width:38px !important;
        height:38px !important;
        margin:0 !important;
        background:#254185 !important;
        color:#ffffff !important;
        border:none !important;
        border-radius:12px !important;
        z-index:30050 !important;
        box-shadow:0 4px 12px rgba(37,65,133,.22) !important;
      }

      #searchModal .search-modal-close i{
        color:#ffffff !important;
        font-size:18px !important;
      }

      /* Caja de resultados completamente transparente */
      #searchModal #suggestionsBox{
        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
        padding:12px 0 !important;
        margin:0 !important;
        border-radius:0 !important;
        max-height:calc(100dvh - 88px) !important;
      }

      /* Cada resultado independiente */
      #searchModal #suggestionsBox > *:not(.hidden){
        background:#ffffff !important;
        color:#27334d !important;
        margin:0 0 10px !important;
        border-radius:14px !important;
      }

      /* Eliminar fondos heredados en wrappers internos */
      #searchModalMount,
      #searchModalMount .catalog-search,
      #searchModalMount .relative,
      #searchModalMount .group{
        background:transparent !important;
      }

      /* Si hay texto de ayuda, que no genere bloques de color */
      #searchModalMount *{
        -webkit-tap-highlight-color:transparent;
      }
    }



    /* =========================================================
       AJUSTE FINAL ESCRITORIO
       La barra superior fixed no debe tapar el catálogo.
       Móvil permanece sin cambios.
       ========================================================= */
    @media(min-width:640px){
      body{
        padding-top:72px !important;
      }

      .light #mainCatalogView{
        padding-top:0 !important;
      }

      .light #mainCatalogView main{
        padding-top:0 !important;
      }
    }

    /* =========================================================
       BUSCADOR MODAL MÓVIL
       Fondo propio del modal + resultados individuales.
       ========================================================= */
    @media(max-width:639px){
      #searchModal{
        background:#254185 !important;
        overflow:hidden !important;
      }

      #searchModal .search-modal-panel{
        background:transparent !important;
      }

      /* El buscador conserva su propio diseño */
      #searchModal #searchInput{
        background:#ffffff !important;
      }

      /* El contenedor de opciones no añade fondo */
      #searchModal #suggestionsBox{
        background:transparent !important;
        box-shadow:none !important;
      }

      /* Cada opción sí mantiene su tarjeta blanca individual */
      #searchModal #suggestionsBox > *:not(.hidden){
        background:#ffffff !important;
      }
    }



    /* =========================================================
       CORRECCIÓN HEADER FIXED EN ESCRITORIO
       ========================================================= */
    @media(min-width:640px){
      body{
        padding-top:65px !important;
      }
    }

    /* =========================================================
       CIERRE GARANTIZADO DEL MODAL AL SELECCIONAR
       ========================================================= */
    @media(max-width:639px){
      #searchModal.is-open{
        pointer-events:auto !important;
      }
    }


    /* CORRECCIÓN EXACTA DEL HEADER FIJO EN ESCRITORIO */
    @media (min-width: 640px) {
      body {
        padding-top: 64px !important;
      }
    }



    /* =========================================================
       MEJORAS VISUALES — SIN CAMBIAR FUNCIONALIDAD
       ========================================================= */

    /* ---------- BUSCADOR MODAL MÓVIL ---------- */
    @media(max-width:639px){

      /* Cabecera del modal: buscador arriba y cierre claramente separado */
      #searchModal .search-modal-panel{
        padding:14px 14px 18px !important;
      }

      #searchModalMount{
        padding-right:56px !important;
        box-sizing:border-box !important;
      }

      /* Icono de búsqueda claramente identificable */
      #searchModalMount .catalog-search .fa-magnifying-glass,
      #searchModalMount .catalog-search .fa-search{
        color:#254185 !important;
        font-size:19px !important;
      }

      /* Botón para borrar texto: visualmente secundario */
      #searchModalMount button[aria-label*="orrar"],
      #searchModalMount button[title*="orrar"],
      #searchModalMount .clear-search,
      #searchModalMount #clearSearch{
        width:32px !important;
        height:32px !important;
        min-width:32px !important;
        border-radius:50% !important;
        background:#eef2f7 !important;
        color:#64748b !important;
        border:none !important;
        box-shadow:none !important;
      }

      /* Cerrar modal: botón independiente, rojo y reconocible */
      #searchModal .search-modal-close{
        top:16px !important;
        right:14px !important;
        width:46px !important;
        height:46px !important;
        border-radius:14px !important;
        background:#f14749 !important;
        color:#ffffff !important;
        border:2px solid rgba(255,255,255,.32) !important;
        box-shadow:0 6px 16px rgba(0,0,0,.18) !important;
      }

      #searchModal .search-modal-close:hover,
      #searchModal .search-modal-close:active{
        background:#d9363a !important;
        transform:scale(.96) !important;
      }

      #searchModal .search-modal-close i{
        font-size:21px !important;
        color:#ffffff !important;
      }

      /* Pequeña diferencia visual para entender que cierra toda la búsqueda */
      #searchModal .search-modal-close::after{
        content:"Cerrar" !important;
        position:absolute !important;
        top:50px !important;
        right:0 !important;
        padding:4px 7px !important;
        border-radius:8px !important;
        background:rgba(15,23,42,.72) !important;
        color:#fff !important;
        font-size:10px !important;
        font-weight:700 !important;
        line-height:1 !important;
        white-space:nowrap !important;
        opacity:0 !important;
        pointer-events:none !important;
        transition:opacity .2s ease !important;
      }

      #searchModal .search-modal-close:active::after{
        opacity:1 !important;
      }
    }

    /* ---------- MENÚ DESPLEGABLE ---------- */

    /* Fondo propio del menú */
    #sidebarNav{
      background:#254185 !important;
      box-shadow:10px 0 35px rgba(15,23,42,.25) !important;
    }

    /* Eliminar visualmente el título "Categorías" */
    #sidebarNav .sidebar-title,
    #sidebarNav h2,
    #sidebarNav h3{
      font-size:0 !important;
    }

    /* Por si el texto está dentro de un nodo específico */
    #sidebarNav *{
      color:inherit;
    }

    /* Mejor contraste para los enlaces */
    #sidebarNav a,
    #sidebarNav button{
      color:#ffffff !important;
    }

    #sidebarNav a:hover,
    #sidebarNav button:hover{
      background:rgba(255,255,255,.12) !important;
    }

    /* Botón X del menú: grande, arriba a la derecha y llamativo */
    #sidebarNav button[onclick*="toggleSidebar"],
    #sidebarNav .close-sidebar,
    #sidebarNav [aria-label*="Cerrar"]{
      width:46px !important;
      height:46px !important;
      min-width:46px !important;
      border-radius:14px !important;
      background:#f14749 !important;
      color:#ffffff !important;
      border:2px solid rgba(255,255,255,.28) !important;
      box-shadow:0 6px 18px rgba(0,0,0,.22) !important;
      display:flex !important;
      align-items:center !important;
      justify-content:center !important;
    }

    #sidebarNav button[onclick*="toggleSidebar"] i,
    #sidebarNav .close-sidebar i,
    #sidebarNav [aria-label*="Cerrar"] i{
      font-size:22px !important;
      color:#ffffff !important;
    }

    /* Eliminar solo el texto exacto Categorías mediante clase visual
       si el título está en el primer encabezado del sidebar */
    #sidebarNav h2:first-child,
    #sidebarNav h3:first-child{
      display:none !important;
    }

  

/* AJUSTES VISUALES */
.light body, body.light{background:#f14749!important;}
#sidebarNav{background:#254185!important;box-shadow:12px 0 38px rgba(15,23,42,.30)!important;padding-top:72px!important;}
#sidebarNav a,#sidebarNav button:not(.search-modal-close){font-size:17px!important;font-weight:700!important;line-height:1.35!important;}
#sidebarNav a{padding-top:13px!important;padding-bottom:13px!important;}
#sidebarNav button[onclick*="toggleSidebar"],#sidebarNav .close-sidebar,#sidebarNav [aria-label*="Cerrar"]{position:absolute!important;top:16px!important;right:16px!important;width:48px!important;height:48px!important;min-width:48px!important;border-radius:50%!important;background:#1ec1f6!important;color:#fff!important;border:3px solid rgba(255,255,255,.30)!important;box-shadow:0 7px 18px rgba(10,35,75,.28)!important;z-index:10050!important;display:flex!important;align-items:center!important;justify-content:center!important;}
#sidebarNav button[onclick*="toggleSidebar"] i,#sidebarNav .close-sidebar i,#sidebarNav [aria-label*="Cerrar"] i{color:#fff!important;font-size:22px!important;}
#sidebarNav button[onclick*="toggleSidebar"]:hover,#sidebarNav .close-sidebar:hover,#sidebarNav [aria-label*="Cerrar"]:hover{background:#f14749!important;transform:scale(1.05)!important;}
.catalog-search{position:relative!important;}
.catalog-search .quick-clear-search{position:absolute!important;top:50%!important;right:10px!important;transform:translateY(-50%)!important;width:30px!important;height:30px!important;border-radius:9px!important;border:none!important;background:#eef2f7!important;color:#64748b!important;display:none!important;align-items:center!important;justify-content:center!important;z-index:40!important;cursor:pointer!important;}
.catalog-search .quick-clear-search:hover{background:#f14749!important;color:#fff!important;}
.catalog-search .quick-clear-search.is-visible{display:flex!important;}
.catalog-search #searchInput{padding-right:52px!important;}



/* =========================================================
   AJUSTE FINAL VISUAL Y BOTÓN BORRAR NO INVASIVO
   ========================================================= */

/* Branding centrado y más visible */
#brandName,
.brand-name,
header .brand-title{
  text-align:center !important;
  font-size:1.2em !important;
}

/* Intentar centrar el branding real dentro de la barra superior */
header .absolute.left-1\/2,
header .absolute.left-1\/2.-translate-x-1\/2{
  width:max-content !important;
  text-align:center !important;
}

/* Sidebar */
#sidebarNav{
  padding-top:0 !important;
}

#sidebarNav a,
#sidebarNav button:not(.search-modal-close){
  font-size:15px !important;
  font-weight:700 !important;
  line-height:.35 !important;
}

.light #sidebarNav{
  background:#1e3469 !important;
  border-right:2px solid #fff !important;
  color:#27334d !important;
  box-shadow:10px 0 30px rgba(26,63,87,.10) !important;
}

/* Logo y nombre en blanco */
.light #sidebarNav .brand-name,
.light #sidebarNav .logo-text,
.light #sidebarNav [class*="logo"],
.light #sidebarNav [class*="brand"],
.light #sidebarNav h1,
.light #sidebarNav h2,
.light #sidebarNav h3{
  color:#fff !important;
}

/* Restaurar cabecera del sidebar sin la franja/borde inferior solicitada */
#sidebarNav .flex.items-center.justify-between.mb-4.pb-2.border-b{
  display:none !important;
}

/* Botón borrar integrado dentro del mismo buscador */
.catalog-search{position:relative !important;}
.catalog-search .quick-clear-search{
  position:absolute !important;
  top:50% !important;
  right:12px !important;
  transform:translateY(-50%) !important;
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  border:0 !important;
  background:rgba(39,51,77,.10) !important;
  color:#64748b !important;
  z-index:20 !important;
  cursor:pointer !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.catalog-search .quick-clear-search.is-visible{
  display:flex !important;
}

.catalog-search .quick-clear-search i{
  font-size:12px !important;
  pointer-events:none !important;
}

.catalog-search .quick-clear-search:hover,
.catalog-search .quick-clear-search:active{
  background:rgba(241,71,73,.16) !important;
  color:#f14749 !important;
}

/* Dejar espacio para icono buscar a la izquierda y borrar a la derecha */
.catalog-search #searchInput{
  padding-right:46px !important;
}

@media(max-width:639px){
  #searchModalMount .catalog-search .quick-clear-search{
    right:12px !important;
  }
}



/* =========================================================
   AJUSTES SOLICITADOS — SOLO INTERFAZ
   ========================================================= */

/* 1. Botones principales de categoría */
.light #sidebarNav .main-cat-btn{
  background:#f5fbff00 !important;
  color:#ffffff !important;
  border:0px solid #d9edf7 !important;
}

/* 2 y 6. Branding Creativas.me en blanco y más grande */
#sidebarNav span.font-extrabold.text-sm.tracking-wide.dark\:text-white.text-slate-900.leading-tight,
#sidebarNav span.font-black.text-sm.tracking-wide.dark\:text-white.text-slate-900.truncate.max-w-\[180px\].block.text-center.mx-auto{
  color:#ffffff !important;
  font-size:16px !important;
}

/* También proteger cualquier clase Tailwind equivalente */
#sidebarNav .text-slate-900{
  color:#ffffff !important;
}

/* 4. Sidebar light sin borde derecho */
.light #sidebarNav{
  background:#1e3469 !important;
  border-right:0px solid #fff !important;
  color:#27334d !important;
  box-shadow:10px 0 30px rgba(26,63,87,.10) !important;
}

/* 5. Posición del buscador del catálogo */
.light #mainCatalogView main .catalog-search{
  position:relative !important;
  z-index:5 !important;
  margin-top:10px !important;
  margin-bottom:30px !important;
}

/* 3. BOTÓN X PARA CERRAR EL SIDEBAR
   Visible en móvil y escritorio, arriba a la derecha */
#sidebarNav .sidebar-close-fixed{
  position:absolute !important;
  top:14px !important;
  right:14px !important;
  width:46px !important;
  height:46px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:0 !important;
  border-radius:50% !important;
  background:#1ec1f6 !important;
  color:#ffffff !important;
  box-shadow:0 6px 16px rgba(10,35,75,.28) !important;
  cursor:pointer !important;
  z-index:10100 !important;
  line-height:1 !important;
}

#sidebarNav .sidebar-close-fixed i{
  color:#ffffff !important;
  font-size:22px !important;
  pointer-events:none !important;
}

#sidebarNav .sidebar-close-fixed:hover,
#sidebarNav .sidebar-close-fixed:active{
  background:#f14749 !important;
  transform:scale(1.05) !important;
}



/* =========================================================
   BUSCADOR: ELIMINAR X DE BORRAR + NUEVO CIERRE DEL MODAL
   ========================================================= */

/* 1. Eliminar completamente la X para borrar el texto */
.quick-clear-search{
  display:none !important;
  pointer-events:none !important;
}

/* Restaurar espacio normal del input */
.catalog-search #searchInput{
  padding-right:16px !important;
}

/* 2. Modal móvil: buscador ocupa todo el ancho */
@media(max-width:639px){
  #searchModal .search-modal-panel{
    padding:14px 14px 16px !important;
  }

  #searchModalMount{
    width:100% !important;
    padding-right:0 !important;
  }

  #searchModalMount .catalog-search{
    width:100% !important;
  }

  #searchModalMount #searchInput{
    width:100% !important;
    padding-right:16px !important;
  }

  /* El botón X anterior no se utiliza dentro de la fila del buscador */
  #searchModal .search-modal-close{
    position:static !important;
    display:none !important;
  }

  /* Nueva X: centrada, debajo del buscador */
  #searchModal .search-modal-close-bottom{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:44px !important;
    height:44px !important;
    margin:14px auto 0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#1ec1f6 !important;
    color:#ffffff !important;
    box-shadow:0 6px 16px rgba(10,35,75,.22) !important;
    cursor:pointer !important;
  }

  #searchModal .search-modal-close-bottom i{
    color:#ffffff !important;
    font-size:21px !important;
    pointer-events:none !important;
  }

  #searchModal .search-modal-close-bottom:hover,
  #searchModal .search-modal-close-bottom:active{
    background:#f14749 !important;
    transform:scale(1.05) !important;
  }
}



/* =========================================================
   AJUSTE MODAL BUSCADOR MÓVIL
   X ARRIBA + RESULTADOS SIN SCROLL INTERNO
   ========================================================= */
@media(max-width:639px){

  /* Panel ordenado desde arriba */
  #searchModal .search-modal-panel{
    padding:12px 14px 16px !important;
    justify-content:flex-start !important;
    overflow:visible !important;
  }

  /* La X anterior centrada debajo deja de usarse */
  #searchModal .search-modal-close-bottom{
    display:none !important;
  }

  /* Contenedor superior de cierre */
  #searchModal .search-modal-top-close{
    width:100% !important;
    height:42px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 0 8px !important;
  }

  /* X arriba del buscador */
  #searchModal .search-modal-top-close button{
    width:38px !important;
    height:38px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:#1ec1f6 !important;
    color:#ffffff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-shadow:0 5px 14px rgba(10,35,75,.22) !important;
    cursor:pointer !important;
  }

  #searchModal .search-modal-top-close button i{
    color:#ffffff !important;
    font-size:20px !important;
    pointer-events:none !important;
  }

  #searchModal .search-modal-top-close button:hover,
  #searchModal .search-modal-top-close button:active{
    background:#f14749 !important;
    transform:scale(1.05) !important;
  }

  /* Buscador a todo el ancho debajo de la X */
  #searchModalMount{
    width:100% !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
  }

  #searchModalMount .catalog-search{
    width:100% !important;
    margin:0 !important;
  }

  #searchModalMount #searchInput{
    width:100% !important;
  }

  /* Resultados: NO scroll interno */
  #searchModal #suggestionsBox{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:auto !important;
  }

  /* El modal puede crecer naturalmente */
  #searchModal{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}



/* =========================================================
   AJUSTES FINALES DEL SIDEBAR Y TIPOGRAFÍA
   ========================================================= */

/* 1. Eliminar bordes inferiores */
.border-b{
  border-bottom-width:0px !important;
}

/* 3. Sin fondo hover en enlaces y botones del sidebar */
#sidebarNav a:hover,
#sidebarNav button:hover{
  background:transparent !important;
}

/* 4. Texto text-sm más grande y con tipografía diferente */
.text-sm{
  font-size:1.3rem !important;
  line-height:1.25rem !important;
  font-family:"Trebuchet MS","Arial Rounded MT Bold",Arial,sans-serif !important;
}



/* Eliminar la X interna del buscador normal.
   La X independiente del modal se mantiene. */
.catalog-search .quick-clear-search,
#mainCatalogView .quick-clear-search,
#searchModalMount .quick-clear-search{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.catalog-search #searchInput{
  padding-right:16px !important;
}



/* =========================================================
   DETAIL VIEW — AJUSTE SOLO PARA PC
   ========================================================= */
@media (min-width: 640px) {
  .light #detailView {
    background: #f14749 !important;
    width: 100% !important;
    min-height: 100vh !important;
    padding-top: 10px !important;
    padding-bottom: 20px !important;
  }
}



/* =========================================================
   AJUSTE DE ONDAS
   ========================================================= */
.section-wave{
  margin-top:-6px !important;
  margin-bottom:-6px !important;
  position:relative !important;
  z-index:20 !important;
  background-clip:border-box !important;
}

/* =========================================================
   ICONO USER-PLUS
   Corregir visualización de Font Awesome
   ========================================================= */
.fa-user-plus::before,
.fa-user-plus:before{
  content:"\f234" !important;
  display:inline-block !important;
  font-family:"Font Awesome 6 Free" !important;
  font-weight:900 !important;
}

/* Asegurar que el icono sea visible */
.fa-user-plus{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}



/* =========================================================
   BOTONES DE DETALLE — MISMO TAMAÑO
   ========================================================= */

/* Botón DEMO */
.light #detailDemoBtn{
  background:#333333 !important;
  color:#ffffff !important;
  box-shadow:none !important;
  font-family:inherit !important;
  font-size:1rem !important;
}

/* El otro botón de "Pedir información":
   igualar tamaño visual y tipografía al botón Demo */
.light #detailInfoBtn,
.light #detailRequestBtn,
.light #requestInfoBtn,
.light #contactInfoBtn{
  font-family:inherit !important;
  font-size:1rem !important;
}

/* Igualar también si el botón no usa uno de los IDs anteriores */
.light #detailView a[href*="whatsapp"],
.light #detailView a[href*="wa.me"]{
  font-family:inherit !important;
  font-size:1rem !important;
}



/* Igualar específicamente el tamaño del botón "Pedir información" */
.light #detailBuyBtn{
  font-family:inherit !important;
  font-size:1rem !important;
}



/* =========================================================
   CSS PROPIO DEL CATÁLOGO — REEMPLAZO DE TAILWIND
   No requiere Tailwind CDN. Se mantienen las clases HTML
   existentes para no romper JavaScript ni selectores actuales.
   ========================================================= */

/* Base */
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0}
button,input,a{font:inherit}
button{cursor:pointer}
a{text-decoration:none}
.hidden{display:none!important}
.block{display:block}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.flex-col{flex-direction:column}
.flex-1{flex:1 1 0%}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.justify-items-center{justify-items:center}
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{inset:0}
.top-0{top:0}.right-0{right:0}.left-0{left:0}.bottom-0{bottom:0}
.top-full{top:100%}.left-1\/2{left:50%}.top-2\.5{top:.625rem}
.left-2{left:.5rem}.right-2{right:.5rem}.left-4{left:1rem}.top-4{top:1rem}
.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}
.w-full{width:100%}.h-full{height:100%}
.w-60{width:15rem}.w-9{width:2.25rem}.h-9{height:2.25rem}
.w-8{width:2rem}.h-8{height:2rem}.w-20{width:5rem}.h-4{height:1rem}
.w-2\.5{width:.625rem}.h-2\.5{height:.625rem}
.min-h-screen{min-height:100vh}.min-h-\[580px\]{min-height:580px}
.max-w-6xl{max-width:72rem}.max-w-4xl{max-width:56rem}.max-w-3xl{max-width:48rem}
.max-w-xl{max-width:36rem}.max-w-\[330px\]{max-width:330px}.max-w-\[300px\]{max-width:300px}
.max-w-\[180px\]{max-width:180px}.max-w-\[120px\]{max-width:120px}.max-w-\[94\%\]{max-width:94%}
.h-auto{height:auto}.h-36{height:9rem}
.mx-auto{margin-left:auto;margin-right:auto}.ml-auto{margin-left:auto}.mx-2{margin-left:.5rem;margin-right:.5rem}
.my-4{margin-top:1rem;margin-bottom:1rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}.my-8{margin-top:2rem;margin-bottom:2rem}
.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}
.mb-1{margin-bottom:.25rem}.mb-1\.5{margin-bottom:.375rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mr-2\.5{margin-right:.625rem}
.p-0{padding:0}.p-2{padding:.5rem}.p-2\.5{padding:.625rem}.p-3{padding:.75rem}.p-3\.5{padding:.875rem}
.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}
.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}
.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.pt-0{padding-top:0}.pt-6{padding-top:1.5rem}.pt-7{padding-top:1.75rem}.pt-16{padding-top:4rem}
.pb-2\.5{padding-bottom:.625rem}.pb-4{padding-bottom:1rem}.pb-10{padding-bottom:2.5rem}
.pl-12{padding-left:3rem}
.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}
.gap-3{gap:.75rem}.gap-3\.5{gap:.875rem}.gap-4{gap:1rem}.gap-8{gap:2rem}
.space-y-1\.5>*+*{margin-top:.375rem}.space-y-2\.5>*+*{margin-top:.625rem}.space-y-3>*+*{margin-top:.75rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}
.object-contain{object-fit:contain}.object-cover{object-fit:cover}
.rounded-full{border-radius:9999px}.rounded-xl{border-radius:.75rem}.rounded-2xl{border-radius:1rem}.rounded-3xl{border-radius:1.5rem}
.rounded-\[28px\]{border-radius:28px}.rounded-\[44px\]{border-radius:44px}.rounded-tr-none{border-top-right-radius:0}
.border{border-width:1px;border-style:solid}.border-2{border-width:2px;border-style:solid}.border-\[5px\]{border-width:5px;border-style:solid}.border-\[10px\]{border-width:10px;border-style:solid}
.border-r{border-right-width:1px;border-right-style:solid}.border-t{border-top-width:1px;border-top-style:solid}
.border-b{border-bottom-style:solid}
.border-slate-100{border-color:#f1f5f9}.border-slate-200{border-color:#e2e8f0}.border-slate-700{border-color:#334155}.border-slate-800{border-color:#1e293b}
.border-\[\#222d34\]{border-color:#222d34}.border-\[\#202c33\]{border-color:#202c33}.border-\[\#202a43\]{border-color:#202a43}
.border-emerald-500\/20{border-color:rgba(16,185,129,.2)}.border-emerald-400\/30{border-color:rgba(52,211,153,.3)}
.bg-white{background:#fff}.bg-white\/90{background:rgba(255,255,255,.9)}.bg-white\/95{background:rgba(255,255,255,.95)}
.bg-slate-100{background:#f1f5f9}.bg-slate-950{background:#020617}.bg-slate-950\/70{background:rgba(2,6,23,.7)}
.bg-amber-400{background:#fbbf24}.bg-blue-600{background:#2563eb}.bg-emerald-500{background:#10b981}.bg-emerald-700{background:#047857}
.bg-\[\#111b21\]{background:#111b21}.bg-\[\#031017\]{background:#031017}.bg-\[\#202c33\]{background:#202c33}
.bg-\[\#005c4b\]{background:#005c4b}.bg-\[\#025142\]{background:#025142}.bg-\[\#2a3942\]{background:#2a3942}.bg-\[\#00a884\]{background:#00a884}
.text-white{color:#fff}.text-slate-950{color:#020617}.text-slate-900{color:#0f172a}.text-slate-800{color:#1e293b}
.text-slate-600{color:#475569}.text-slate-500{color:#64748b}.text-slate-400{color:#94a3b8}
.text-amber-500{color:#f59e0b}.text-sky-500{color:#0ea5e9}.text-sky-600{color:#0284c7}.text-sky-400{color:#38bdf8}
.text-indigo-500{color:#6366f1}.text-pink-500{color:#ec4899}.text-purple-500{color:#a855f7}.text-rose-500{color:#f43f5e}
.text-teal-500{color:#14b8a6}.text-blue-500{color:#3b82f6}.text-emerald-400{color:#34d399}.text-emerald-50{color:#ecfdf5}
.text-emerald-100\/90{color:rgba(209,250,229,.9)}.text-emerald-200\/70{color:rgba(167,243,208,.7)}.text-emerald-300\/80{color:rgba(110,231,183,.8)}
.text-\[\#8696a0\]{color:#8696a0}.text-\[\#aebac1\]{color:#aebac1}
.text-transparent{color:transparent}.text-left{text-align:left}.text-center{text-align:center}
.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}
.text-xs{    font-size: 17px;
    line-height: 22px;}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}
.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-black{font-weight:900}
.font-normal{font-weight:400}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.uppercase{text-transform:uppercase}.tracking-tight{letter-spacing:-.025em}.tracking-wide{letter-spacing:.025em}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}
.leading-tight{line-height:1.25}.leading-relaxed{line-height:1.625}.leading-snug{line-height:1.375}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,.05)}.shadow-md{box-shadow:0 4px 6px rgba(0,0,0,.1)}.shadow-lg{box-shadow:0 10px 15px rgba(0,0,0,.1)}
.shadow-xl{box-shadow:0 20px 25px rgba(0,0,0,.1)}.shadow-2xl{box-shadow:0 25px 50px rgba(0,0,0,.25)}.shadow-inner{box-shadow:inset 0 2px 4px rgba(0,0,0,.06)}
.backdrop-blur-sm{backdrop-filter:blur(4px)}.backdrop-blur-md{backdrop-filter:blur(12px)}.backdrop-blur-xl{backdrop-filter:blur(24px)}
.transition{transition:all .2s ease}.transition-opacity{transition:opacity .2s ease}.transition-transform{transition:transform .2s ease}
.transform{transform:translateZ(0)}.-translate-x-full{transform:translateX(-100%)}.-translate-x-1\/2{transform:translateX(-50%)}
.focus\:outline-none:focus{outline:0}.focus\:ring-4:focus{box-shadow:0 0 0 4px rgba(251,191,36,.35)}
.active\:scale-95:active{transform:scale(.95)}.active\:scale-90:active{transform:scale(.9)}
.hover\:opacity-90:hover{opacity:.9}.hover\:scale-105:hover{transform:scale(1.05)}.hover\:scale-\[1\.02\]:hover{transform:scale(1.02)}
.hover\:bg-slate-100:hover{background:#f1f5f9}.hover\:bg-slate-200:hover{background:#e2e8f0}.hover\:bg-blue-500:hover{background:#3b82f6}.hover\:bg-emerald-400:hover{background:#34d399}
.divide-y>*+*{border-top-width:1px;border-top-style:solid}.divide-slate-100>*+*{border-color:#f1f5f9}
.bg-clip-text{background-clip:text;-webkit-background-clip:text}

/* Responsive CSS */
@media(min-width:640px){
 .sm\:p-0{padding:0}.sm\:p-4{padding:1rem}.sm\:p-6{padding:1.5rem}.sm\:p-8{padding:2rem}
 .sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
 .sm\:rounded-2xl{border-radius:1rem}.sm\:rounded-3xl{border-radius:1.5rem}.sm\:text-xs{font-size:.75rem}.sm\:text-sm{font-size:.875rem}.sm\:text-base{font-size:1.2rem}.sm\:text-lg{font-size:1.125rem}.sm\:text-2xl{font-size:1.5rem}.sm\:text-3xl{font-size:1.875rem}.sm\:text-4xl{font-size:2.25rem}
 .sm\:gap-2{gap:.5rem}.sm\:mb-6{margin-bottom:1.5rem}
}
@media(min-width:768px){
 .md\:w-1\/2{width:50%}.md\:flex-row{flex-direction:row}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .md\:text-base{font-size:1rem}.md\:text-3xl{font-size:1.875rem}.md\:text-5xl{font-size:3rem}.md\:text-left{text-align:left}
 .md\:my-6{margin-top:1.5rem;margin-bottom:1.5rem}
}
@media(min-width:1024px){
 .lg\:hidden{display:none}.lg\:block{display:block}.lg\:pt-0{padding-top:0}.lg\:ml-60{margin-left:15rem}.lg\:translate-x-0{transform:translateX(0)}
}

/* Dark classes kept harmlessly compatible; current interface remains light */
.dark .dark\:text-white{color:#fff}.dark .dark\:text-slate-400{color:#94a3b8}.dark .dark\:text-slate-300{color:#cbd5e1}
.dark .dark\:bg-slate-900\/90{background:rgba(15,23,42,.9)}.dark .dark\:bg-slate-900\/95{background:rgba(15,23,42,.95)}
.dark .dark\:bg-slate-800{background:#1e293b}.dark .dark\:bg-slate-800\/80{background:rgba(30,41,59,.8)}
.dark .dark\:border-slate-700{border-color:#334155}.dark .dark\:border-slate-800{border-color:#1e293b}
.dark .dark\:text-yellow-400{color:#facc15}.dark .dark\:text-blue-300{color:#93c5fd}



/* AJUSTES VISUALES */


body,button,input,textarea,select,#sidebarNav,#sidebarNav a,#sidebarNav button,.catalog-search,#catalogGrid,#detailView{
  font-family:"Sniglet",cursive !important;
}

/* Títulos conservan su tipografía actual */
h1,h2,h3,h4,h5,h6,.section-title,.catalog-title,.detail-title,
#mainCatalogView h1,#mainCatalogView h2,#detailView h1,#detailView h2,#detailView h3{
  font-family:inherit !important;
}

.light .bg-amber-400{
  background:#ffd64d !important;
  color:#1e3469 !important;
  padding:10px 15px;
}

/* Iconos sidebar blancos y visualmente ligeros */
.light #sidebarNav i,
.light #sidebarNav svg,
#sidebarNav .fa,
#sidebarNav .fa-solid,
#sidebarNav .fa-regular,
#sidebarNav [class*="fa-"]{
  color:#ffffff !important;
  font-weight:400 !important;
  stroke-width:1.5 !important;
}

/* Detail sin borde slate */
.light #detailView .border-slate-800{
  border:0 !important;
  border-color:transparent !important;    margin: 20px auto 20px auto;
}



/* =========================================================
   CORRECCIÓN: TIPOGRAFÍA ORIGINAL + ICONOS + FAQ TABS
   ========================================================= */

/* 1. Restaurar completamente la tipografía original */
body, body *,
button, input, textarea, select{
  font-family:inherit !important;
}

/* Anular Sniglet */
#sidebarNav,
#sidebarNav a,
#sidebarNav button,
.catalog-search,
#catalogGrid,
#detailView{
  font-family:inherit !important;
}

/* 2. Restaurar iconos del sidebar: visibles y blancos */
.light #sidebarNav i,
.light #sidebarNav .fa,
.light #sidebarNav .fa-solid,
.light #sidebarNav .fa-regular,
.light #sidebarNav [class*="fa-"]{
  display:inline-block !important;
  color:#ffffff !important;
  font-family:"Font Awesome 6 Free" !important;
  font-weight:900 !important;
  line-height:1 !important;
  opacity:1 !important;
}

/* No forzar Font Awesome sobre SVG */
.light #sidebarNav svg{
  display:inline-block !important;
  color:#ffffff !important;
  stroke:#ffffff !important;
  fill:currentColor !important;
  opacity:1 !important;
}

/* =========================================================
   3. MEJORAR TABS DE PREGUNTAS FRECUENTES
   ========================================================= */

/* Detectar tabs comunes dentro de la sección FAQ */
#faqView [role="tablist"],
#faqView .faq-tabs,
#faqView .tabs,
#faqSection [role="tablist"],
#faqSection .faq-tabs,
#faqSection .tabs{
  display:flex !important;
  flex-wrap:wrap !important;
  justify-content:center !important;
  gap:10px !important;
  padding:10px !important;
  margin:0 auto 20px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.22) !important;
}

/* Botones de tabs */
#faqView [role="tab"],
#faqView .faq-tabs button,
#faqView .tabs button,
#faqSection [role="tab"],
#faqSection .faq-tabs button,
#faqSection .tabs button{
  border:0 !important;
  border-radius:14px !important;
  padding:10px 16px !important;
  min-height:42px !important;
  background:rgba(255,255,255,.88) !important;
  color:#1e3469 !important;
  font-family:inherit !important;
  font-size:.9rem !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  box-shadow:0 4px 10px rgba(30,52,105,.12) !important;
  transition:transform .2s ease, background .2s ease, color .2s ease !important;
}

/* Hover */
#faqView [role="tab"]:hover,
#faqView .faq-tabs button:hover,
#faqView .tabs button:hover,
#faqSection [role="tab"]:hover,
#faqSection .faq-tabs button:hover,
#faqSection .tabs button:hover{
  transform:translateY(-2px) !important;
  background:#ffd64d !important;
  color:#1e3469 !important;
}

/* Tab activo: incluye varias formas habituales */
#faqView [role="tab"][aria-selected="true"],
#faqView .faq-tabs button.active,
#faqView .tabs button.active,
#faqSection [role="tab"][aria-selected="true"],
#faqSection .faq-tabs button.active,
#faqSection .tabs button.active,
#faqView button.bg-amber-400,
#faqSection button.bg-amber-400{
  background:#ffd64d !important;
  color:#1e3469 !important;
  box-shadow:0 5px 14px rgba(30,52,105,.16) !important;
}

/* Móvil */
@media(max-width:639px){
  #faqView [role="tablist"],
  #faqView .faq-tabs,
  #faqView .tabs,
  #faqSection [role="tablist"],
  #faqSection .faq-tabs,
  #faqSection .tabs{
    gap:7px !important;
    padding:8px !important;
    border-radius:15px !important;
  }

  #faqView [role="tab"],
  #faqView .faq-tabs button,
  #faqView .tabs button,
  #faqSection [role="tab"],
  #faqSection .faq-tabs button,
  #faqSection .tabs button{
    padding:9px 12px !important;
    font-size:.82rem !important;
    min-height:38px !important;
  }
}



/* =========================================================
   CORRECCIÓN DEFINITIVA DE FUENTES + FONT AWESOME
   ========================================================= */

/* Tipografía original del sitio */
html,
body{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}

/* Controles heredan la tipografía normal */
button,
input,
textarea,
select,
a,
span,
p,
div,
li{
  font-family:inherit !important;
}

/* IMPORTANTE:
   Font Awesome NO debe heredar la fuente del texto.
   Esto restaura menú, cerrar, categorías, WhatsApp, etc. */
i.fa-solid,
i.fa-regular,
i.fa-light,
i.fa-thin,
i.fa-sharp,
.fa-solid,
.fa-regular,
.fa-light,
.fa-thin,
.fa-sharp{
  font-family:"Font Awesome 6 Free" !important;
  font-style:normal !important;
  font-variant:normal !important;
  text-rendering:auto !important;
  line-height:1 !important;
}

i.fa-solid,
.fa-solid,
i.fa-sharp,
.fa-sharp{
  font-weight:900 !important;
}

i.fa-regular,
.fa-regular{
  font-weight:400 !important;
}

/* Marcas como WhatsApp necesitan su propia familia */
i.fa-brands,
.fa-brands{
  font-family:"Font Awesome 6 Brands" !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-variant:normal !important;
  text-rendering:auto !important;
  line-height:1 !important;
}

/* Menú hamburguesa: asegurar visibilidad */
button[onclick="toggleSidebar(true)"] .fa-bars,
.fa-bars{
  display:inline-block !important;
  color:#ffffff !important;
  font-family:"Font Awesome 6 Free" !important;
  font-weight:900 !important;
  font-size:25px !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* X de cierre */
.fa-xmark,
.fa-times{
  display:inline-block !important;
  font-family:"Font Awesome 6 Free" !important;
  font-weight:900 !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Iconos del sidebar */
.light #sidebarNav i[class*="fa-"]{
  color:#ffffff !important;
  font-family:"Font Awesome 6 Free" !important;
  font-weight:900 !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* WhatsApp dentro del sidebar o botones */
.light #sidebarNav i.fa-brands,
i.fa-brands{
  font-family:"Font Awesome 6 Brands" !important;
  font-weight:400 !important;
}

/* Eliminar cualquier regla previa que pudiera adelgazar/desaparecer iconos */
#sidebarNav i,
#sidebarNav [class*="fa-"]{
  stroke-width:initial !important;
}

/* Mantener títulos con la misma fuente general, sin Google Fonts externos */
h1,h2,h3,h4,h5,h6{
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
}



/* =========================================================
   AJUSTES SOLICITADOS
   ========================================================= */

/* 1. Tipografía segura y compatible en todos los dispositivos.
   Stack de fuentes nativas similares a la apariencia actual. */
:root{
  --catalog-font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
  "Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
html,body,button,input,textarea,select{
  font-family:var(--catalog-font) !important;
}

/* 2. Preguntas frecuentes: eliminar recuadro/borde al seleccionar */
#faqView button:focus,
#faqView button:focus-visible,
#faqSection button:focus,
#faqSection button:focus-visible,
#faqView [role="tab"]:focus,
#faqView [role="tab"]:focus-visible,
#faqSection [role="tab"]:focus,
#faqSection [role="tab"]:focus-visible{
  outline:none !important;
  border-color:transparent !important;
  box-shadow:none !important;
}

#faqView button,
#faqSection button,
#faqView [role="tab"],
#faqSection [role="tab"]{
  outline:none !important;
}

/* 3. Los demás cambios de cantidad se manejan con el JavaScript.
   Se establece el valor visual base para 20 elementos. */

/* 4. p-2.5 */
.p-2\.5{
  padding:5px !important;
}

/* 5. text-[11px] */
.text-\[11px\]{
  font-size:11px !important;
  padding:0 5px !important;
}

/* 6. rounded-[44px] */
.rounded-\[44px\]{
  border-radius:23px !important;
}

/* 7. Hover botón WhatsApp del footer */
.light #footerWhatsappBtn:hover{
  background:#3cb676 !important;
  color:#ffffff !important;
  transform:translateY(-4px) scale(1.03) !important;
 
}



/* =========================================================
   AJUSTES FINALES FAQ + BUSCADOR + FILTROS
   ========================================================= */

/* 1. Preguntas frecuentes */
.light section.max-w-3xl .space-y-2\.5 > div > button{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  min-height:52px !important;
  background:#ffffff !important;
  color:#27334d !important;
  border:none !important;
}

/* 2. Sugerencias del buscador: PC y móvil */
#searchModal #suggestionsBox > *:not(.hidden) *{
  font-size:16px !important;
  padding:5px 10px !important;
}

/* 3. Botones/elementos amarillos */
.light .bg-amber-400{
  background:#ffd64d !important;
  color:#1e3469 !important;
  padding:10px 15px !important;
  border:none !important;
}

/* 4. Filtros de búsqueda:
   mismo alto para todos y "Quitar filtro" deja de ser rojo */
#filterBar button,
#filterButtons button,
.catalog-filters button,
#searchFilters button,
#mainCatalogView [data-filter],
#mainCatalogView button[onclick*="filter"],
#mainCatalogView button[onclick*="Filter"],
#mainCatalogView button[onclick*="clear"],
#mainCatalogView button[onclick*="Clear"]{
  min-height:42px !important;
  height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Quitar estilo rojo del botón "Quitar filtro" */
#filterBar button.text-red-500,
#filterBar button.text-rose-500,
#filterButtons button.text-red-500,
#filterButtons button.text-rose-500,
.catalog-filters button.text-red-500,
.catalog-filters button.text-rose-500,
#searchFilters button.text-red-500,
#searchFilters button.text-rose-500,
#mainCatalogView button[onclick*="clear"],
#mainCatalogView button[onclick*="Clear"]{
  background:#ffffff !important;
  color:#1e3469 !important;
  border:none !important;
}

/* Hover uniforme */
#filterBar button:hover,
#filterButtons button:hover,
.catalog-filters button:hover,
#searchFilters button:hover,
#mainCatalogView [data-filter]:hover{
  opacity:.92 !important;
}



/* =========================================================
   CORRECCIÓN FILTROS + SOMBRA SOLO EN ESCRITORIO
   ========================================================= */

/* 1. Todos los botones del filtro conservan exactamente
   la misma altura */
#filterBar button,
#filterButtons button,
.catalog-filters button,
#searchFilters button,
#mainCatalogView [data-filter],
#mainCatalogView button[onclick*="filter"],
#mainCatalogView button[onclick*="Filter"],
#mainCatalogView button[onclick*="clear"],
#mainCatalogView button[onclick*="Clear"]{
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* "Quitar filtro" vuelve a tener color rojo */
#filterBar button.text-red-500,
#filterBar button.text-rose-500,
#filterButtons button.text-red-500,
#filterButtons button.text-rose-500,
.catalog-filters button.text-red-500,
.catalog-filters button.text-rose-500,
#searchFilters button.text-red-500,
#searchFilters button.text-rose-500,
#mainCatalogView button[onclick*="clear"],
#mainCatalogView button[onclick*="Clear"]{
  color:#ef4444 !important;
}

/* 2. Sombra 2xl normal en PC */
.shadow-2xl{
  box-shadow:0 25px 50px rgba(0,0,0,.25) !important;
}

/* En móvil eliminar completamente la sombra */
@media(max-width:639px){
  .shadow-2xl{
    box-shadow:none !important;
  }
}



/* =========================================================
   CORRECCIÓN COLOR AMBER + BOTONES DE FILTROS UNIFORMES
   ========================================================= */

/* 1. Iconos/textos amber */
.light .text-amber-500,
.light .text-amber-600{
  color:#333333 !important;
  padding:10px !important;
}

/* 2. FILTROS: regla unificada para TODOS los botones.
   Se fuerza el mismo tamaño, padding y alineación. */
#filterBar button,
#filterButtons button,
.catalog-filters button,
#searchFilters button,
#mainCatalogView [data-filter],
#mainCatalogView button[onclick*="filter"],
#mainCatalogView button[onclick*="Filter"],
#mainCatalogView button[onclick*="clear"],
#mainCatalogView button[onclick*="Clear"]{
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  box-sizing:border-box !important;
  padding:0 16px !important;
  margin:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

/* Quitar filtro: fondo rojo y letra negra */
#filterBar button.text-red-500,
#filterBar button.text-rose-500,
#filterButtons button.text-red-500,
#filterButtons button.text-rose-500,
.catalog-filters button.text-red-500,
.catalog-filters button.text-rose-500,
#searchFilters button.text-red-500,
#searchFilters button.text-rose-500,
#mainCatalogView button[onclick*="clear"],
#mainCatalogView button[onclick*="Clear"]{
  background:#ef4444 !important;
  color:#000000 !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
}

/* Evitar que iconos internos alteren el alto del botón */
#filterBar button i,
#filterButtons button i,
.catalog-filters button i,
#searchFilters button i{
  line-height:1 !important;
}



/* =========================================================
   FILTROS — ALTURA REALMENTE UNIFORME
   ========================================================= */

/* Se aplica al contenedor de filtros y a todos sus hijos button */
#filterBar,
#filterButtons,
.catalog-filters,
#searchFilters{
  display:flex !important;
  align-items:center !important;
}

/* Todos los botones de filtros: caja idéntica */
#filterBar > button,
#filterButtons > button,
.catalog-filters > button,
#searchFilters > button,
#filterBar button,
#filterButtons button,
.catalog-filters button,
#searchFilters button{
  box-sizing:border-box !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 16px !important;
  margin:0 !important;
  line-height:42px !important;
  display:inline-flex !important;
  flex:none !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

/* Si algún span o icono interno añade espacio, no altera la altura */
#filterBar button *,
#filterButtons button *,
.catalog-filters button *,
#searchFilters button *{
  line-height:1 !important;
}

/* Tailwind border slate */
.border-slate-100{
  border-color:#ffffff !important;
}



/* =========================================================
   AJUSTES DETAIL VIEW + BORDES + PADDING
   ========================================================= */

/* 1. Fondo gris slate dentro del detalle */
.light #detailView .bg-slate-100{
  background:#ffffff !important;
  color:#5f6980 !important;
}

/* 2. Border slate 200 */
.light .border-slate-200{
  border-color:#ffffff !important;
}

/* 3. p-4 */
.p-4{
  padding:0 !important;
}



/* =========================================================
   SUB-EVENT BUTTONS + BOTÓN TODOS SIN SOMBRA
   ========================================================= */

/* Botones de subcategorías */
.light .sub-evt-btn{
  background:#f1fbff !important;
  border-color:#d4eff9 !important;
  color:#000000 !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
}

/* Botón amarillo "Todos": eliminar cualquier sombra */
.light .bg-amber-400{
  box-shadow:none !important;
}



/* =========================================================
   BOTÓN "QUITAR FILTRO" — ESTILO FINAL
   ========================================================= */
#filterBar button.text-red-500,
#filterBar button.text-rose-500,
#filterButtons button.text-red-500,
#filterButtons button.text-rose-500,
.catalog-filters button.text-red-500,
.catalog-filters button.text-rose-500,
#searchFilters button.text-red-500,
#searchFilters button.text-rose-500,
#mainCatalogView button[onclick*="clear"],
#mainCatalogView button[onclick*="Clear"]{
  background:#ef4444 !important;
  color:#ffffff !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
}



/* =========================================================
   IMAGEN DEL DETALLE — RATIO NATURAL
   ========================================================= */
#detailImage{
  width:auto !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
  display:block;
  margin:auto;
  filter:contrast(1.1);
}



/* =========================================================
   AJUSTES SOLICITADOS
   ========================================================= */

/* 1. mt-3 */
.mt-3{
  margin-top:.75rem !important;
  margin-bottom:.75rem !important;
}

/* 2. Botón amarillo */
.light .bg-amber-400{
  background:#ffd64d !important;
  color:#1e3469 !important;
  padding:10px 15px !important;
  border:solid 1px !important;
}

/* 3. Botones sub-evento */
.light .sub-evt-btn{
  background:#ffd64d !important;
  border-color:#ffbd3c !important;
  color:#000000 !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 16px !important;
  box-sizing:border-box !important;
}



/* =========================================================
   H2 DEL FILTRO (NOMBRE DEL PERSONAJE) — MÁS COMPACTO
   ========================================================= */

/* Reduce el espacio vertical del nombre del personaje */
#filterBar h2,
#filterButtons h2,
.catalog-filters h2,
#searchFilters h2,
#mainCatalogView .filter-section h2,
#mainCatalogView h2.text-amber-500,
#mainCatalogView h2.text-amber-600{
  padding-top:2px !important;
  padding-bottom:2px !important;
  margin-top:0 !important;
  margin-bottom:4px !important;
  line-height:1.15 !important;
}



/* =========================================================
   FILTRO DE EVENTOS — COLOR SELECCIONADO / NO SELECCIONADO
   ========================================================= */

/* Evento seleccionado.
   También se respeta el botón "Todos" cuando está activo por defecto. */
.light .sub-evt-btn.active,
.light .sub-evt-btn[aria-selected="true"],
.light .sub-evt-btn.bg-amber-400,
.light .sub-evt-btn.selected,
.light .sub-evt-btn.is-active,
.light #filterBar .sub-evt-btn.active,
.light #filterButtons .sub-evt-btn.active,
.light .catalog-filters .sub-evt-btn.active,
.light #searchFilters .sub-evt-btn.active{
  background:#ffd64d !important;
  border-color:#ffbd3c !important;
}

/* Eventos NO seleccionados */
.light .sub-evt-btn:not(.active):not(.bg-amber-400):not(.selected):not(.is-active),
.light #filterBar .sub-evt-btn:not(.active):not(.bg-amber-400):not(.selected):not(.is-active),
.light #filterButtons .sub-evt-btn:not(.active):not(.bg-amber-400):not(.selected):not(.is-active),
.light .catalog-filters .sub-evt-btn:not(.active):not(.bg-amber-400):not(.selected):not(.is-active),
.light #searchFilters .sub-evt-btn:not(.active):not(.bg-amber-400):not(.selected):not(.is-active){
  background:#f1fbff !important;
  border-color:#d4eff9 !important;
}

/* Si "Todos" es el filtro activo por defecto, conserva el amarillo */
.light .sub-evt-btn[data-filter="all"].active,
.light .sub-evt-btn[data-filter="todos"].active,
.light .sub-evt-btn[data-filter="Todo"].active,
.light .sub-evt-btn[data-filter="Todos"].active,
.light .sub-evt-btn[data-event="all"].active,
.light .sub-evt-btn[data-event="todos"].active{
  background:#ffd64d !important;
  border-color:#ffbd3c !important;
}


/* Tamaño y espaciado text-3xl */
.text-3xl{
  font-size:1.875rem !important;
  line-height:3.25rem !important;
  margin-block-start:0 !important;
  margin-block-end:0 !important;
}



/* =========================================================
   ICONOS / IMÁGENES DE REFERIDOS — TAMAÑO CIRCULAR UNIFORME
   ========================================================= */

/* Contenedor del icono de referidos y elementos equivalentes */
.referral-icon,
.referido-icon,
[class*="referral"] img,
[class*="referido"] img,
#referralIcon,
#referidoIcon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  object-position:center !important;
  overflow:hidden !important;
  display:inline-block !important;
  vertical-align:middle !important;
}

/* Si el icono está dentro de un contenedor, evitar que la imagen
   real modifique visualmente el tamaño del círculo */
.referral-icon img,
.referido-icon img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:cover !important;
  object-position:center !important;
  border-radius:50% !important;
  display:block !important;
}



/* =========================================================
   AVATAR / ICONO DEL REFERIDO — CÍRCULO PEQUEÑO REAL
   El avatar real se genera dinámicamente dentro de:
   #brandDesktopContainer
   ========================================================= */
#brandDesktopContainer{
  display:flex !important;
  align-items:center !important;
}

#brandDesktopContainer > img{
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center !important;
    flex: 0 0 32px !important;
    display: block !important;
    overflow: hidden !important;
}

/* También normaliza el icono cuadrado con inicial */
#brandDesktopContainer > div{
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  max-width:32px !important;
  max-height:32px !important;
  aspect-ratio:1 / 1 !important;
  border-radius:50% !important;
  flex:0 0 32px !important;
}