body {
      box-sizing: border-box;
    }

    .font-bebas {
      font-family: 'Bebas Neue', sans-serif;
    }

    .font-inter {
      font-family: 'Inter', sans-serif;
    }

    .gradient-overlay {
      background: linear-gradient(135deg, rgba(255, 87, 34, 0.9) 0%, rgba(244, 67, 54, 0.85) 50%, rgba(211, 47, 47, 0.9) 100%);
    }

    .card-hover {
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 25px 50px -12px rgba(255, 87, 34, 0.25);
    }

    .nav-link {
      position: relative;
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 0;
      width: 0;
      height: 2px;
      background: #FF5722;
      transition: width 0.3s ease;
    }

    .nav-link:hover::after {
      width: 100%;
    }

    .pulse-animation {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.7;
      }
    }

    .slide-in {
      animation: slideIn 0.6s ease-out forwards;
    }

    @keyframes slideIn {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .geometric-pattern {
      background-image:
        linear-gradient(30deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(150deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(30deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(150deg, #f97316 12%, transparent 12.5%, transparent 87%, #f97316 87.5%, #f97316),
        linear-gradient(60deg, #fed7aa 25%, transparent 25.5%, transparent 75%, #fed7aa 75%, #fed7aa),
        linear-gradient(60deg, #fed7aa 25%, transparent 25.5%, transparent 75%, #fed7aa 75%, #fed7aa);
      background-size: 80px 140px;
      background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
      opacity: 0.03;
    }

    .slider-container {
      scroll-behavior: smooth;
      scrollbar-width: none;
    }

    .slider-container::-webkit-scrollbar {
      display: none;
    }

    .blog-card {
      transition: all 0.3s ease;
    }

    .blog-card:hover .blog-image {
      transform: scale(1.05);
    }

    .service-icon {
      transition: all 0.3s ease;
    }

    .service-card:hover .service-icon {
      transform: scale(1.1) rotate(5deg);
    }

    .footer-link {
      transition: color 0.2s ease, transform 0.2s ease;
    }

    .footer-link:hover {
      color: #FF5722;
      transform: translateX(4px);
    }

    .scroll-smooth {
      scroll-behavior: smooth;
    }

    .cart-badge {
      animation: cartPulse 0.3s ease-out;
    }

    @keyframes cartPulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.2);
      }

      100% {
        transform: scale(1);
      }
    }

    .modal-backdrop {
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }

    .toast {
      animation: slideInRight 0.3s ease-out;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(400px);
        opacity: 0;
      }

      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .fade-in {
      animation: fadeIn 0.5s ease-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    /* Skeleton loading */
    .skeleton {
      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
      background-size: 200% 100%;
      animation: skeletonShimmer 1.5s ease-in-out infinite;
      border-radius: 0.5rem;
    }

    @keyframes skeletonShimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    .skeleton-text {
      height: 0.875rem;
      margin-bottom: 0.5rem;
    }

    .skeleton-text-sm {
      height: 0.75rem;
      margin-bottom: 0.375rem;
    }

    .skeleton-circle {
      border-radius: 50%;
    }

    /* Real-time validation styles */
    .field-valid {
      border-color: #22c55e !important;
      box-shadow: 0 0 0 1px #22c55e;
    }

    .field-invalid {
      border-color: #ef4444 !important;
      box-shadow: 0 0 0 1px #ef4444;
    }

    .field-error-msg {
      color: #ef4444;
      font-size: 0.75rem;
      margin-top: 0.25rem;
      display: block;
      animation: fadeIn 0.2s ease-out;
    }

    .password-strength {
      height: 4px;
      border-radius: 2px;
      margin-top: 0.5rem;
      background: #e5e7eb;
      overflow: hidden;
      transition: all 0.3s;
    }

    .password-strength-bar {
      height: 100%;
      border-radius: 2px;
      transition: width 0.3s, background-color 0.3s;
    }

    @view-transition {
      navigation: auto;
    }

    /* ============================================
   PILL NAV - Navegación estilo píldoras
   ============================================ */
    .pill-nav-items {
      position: relative;
      display: flex;
      align-items: center;
      height: 42px;
      background: var(--pn-base, #111827);
      border-radius: 9999px;
    }

    .pill-list {
      list-style: none;
      display: flex;
      align-items: stretch;
      gap: 3px;
      margin: 0;
      padding: 3px;
      height: 100%;
    }

    .pill-list>li {
      display: flex;
      height: 100%;
    }

    .pill-item {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      padding: 0 16px;
      background: var(--pn-pill, #fff);
      color: var(--pn-text, #111827);
      text-decoration: none;
      border-radius: 9999px;
      box-sizing: border-box;
      font-weight: 600;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      white-space: nowrap;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border: none;
      background-color: var(--pn-pill, #fff);
    }

    .pill-item .pill-circle {
      position: absolute;
      left: 50%;
      bottom: 0;
      border-radius: 50%;
      background: var(--pn-base, #111827);
      z-index: 1;
      display: block;
      pointer-events: none;
      will-change: transform;
    }

    .pill-item .pill-label-stack {
      position: relative;
      display: inline-block;
      line-height: 1;
      z-index: 2;
    }

    .pill-item .pill-label-main {
      position: relative;
      z-index: 2;
      display: inline-block;
      line-height: 1;
      will-change: transform;
    }

    .pill-item .pill-label-over {
      position: absolute;
      left: 0;
      top: 0;
      color: var(--pn-hover-text, #fff);
      z-index: 3;
      display: inline-block;
      will-change: transform, opacity;
    }

    .pill-item.is-active {
      background: var(--pn-base, #111827);
      color: #fff;
    }

    /* ============================================
   TOGGLE SWITCH - Admin (interruptores)
   ============================================ */
    .tim3-switch {
      font-size: 0.6rem;
      position: relative;
      display: inline-block;
      width: 4em;
      height: 2em;
      cursor: pointer;
    }

    .tim3-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .tim3-switch .tim3-knob {
      position: absolute;
      cursor: pointer;
      inset: 0;
      background-color: #eee;
      transition: 0.4s;
      border-radius: 0.5em;
      box-shadow: 0 0.2em #dfd9d9;
    }

    .tim3-switch .tim3-knob:before {
      position: absolute;
      content: "";
      height: 1.5em;
      width: 1.4em;
      border-radius: 0.3em;
      left: 0.3em;
      bottom: 0.7em;
      background-color: #fca5a5;
      transition: 0.4s;
      box-shadow: 0 0.4em #bcb4b4;
    }

    .tim3-switch .tim3-knob:hover::before {
      box-shadow: 0 0.2em #bcb4b4;
      bottom: 0.5em;
    }

    .tim3-switch input:checked+.tim3-knob:before {
      transform: translateX(2em);
      background: #86efac;
    }

    .tim3-switch input:checked+.tim3-knob {
      background-color: #dcfce7;
    }


    /* ============================================
   CARRITO FLOTANTE (solo móvil)
   ============================================ */
    #cart-fab {
      display: none;
      position: fixed;
      bottom: 92px;
      right: 24px;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: #ff0000 !important;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(239, 68, 68, 0.45);
      align-items: center;
      justify-content: center;
      color: #fff;
      z-index: 9998;
      transition: transform 0.2s, box-shadow 0.2s;
    }

    #cart-fab:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 28px rgba(249, 115, 22, 0.55);
    }

    #cart-fab-badge {
      position: absolute;
      top: -4px;
      right: -4px;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: 11px;
      background: #ff0000;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #fff;
    }

    #cart-fab-badge.hidden {
      display: none;
    }

    @media (max-width: 992px) {
      #cart-fab {
        display: flex;
      }
    }

    @media (max-width: 640px) {
      #cart-fab {
        bottom: 78px;
        right: 16px;
        width: 50px;
        height: 50px;
      }
    }

    /* ============================================
   CHAT WIDGET - Bot TIM3
   ============================================ */
    #chat-widget {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 9998;
      font-family: 'Inter', sans-serif;
    }

    #chat-toggle {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: linear-gradient(135deg, #f97316, #ef4444);
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 20px rgba(249, 115, 22, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s;
      margin-left: auto;
    }

    #chat-toggle:hover {
      transform: scale(1.08);
      box-shadow: 0 6px 28px rgba(249, 115, 22, 0.55);
    }

    #chat-window {
      display: none;
      position: absolute;
      bottom: 68px;
      right: 0;
      width: 340px;
      background: #fff;
      border-radius: 18px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
      overflow: hidden;
      flex-direction: column;
    }

    #chat-window.open {
      display: flex;
    }

    #chat-header {
      background: linear-gradient(135deg, #f97316, #ef4444);
      padding: 14px 16px;
      color: #fff;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }

    #chat-header-avatar {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      flex-shrink: 0;
    }

    #chat-header-info {
      flex: 1;
    }

    #chat-header-info strong {
      display: block;
      font-size: 0.9rem;
    }

    #chat-header-info span {
      font-size: 0.72rem;
      opacity: 0.85;
    }

    #chat-close {
      background: none;
      border: none;
      color: #fff;
      cursor: pointer;
      padding: 2px;
      opacity: 0.8;
      transition: opacity 0.2s;
    }

    #chat-close:hover {
      opacity: 1;
    }

    #chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 260px;
      max-height: 320px;
      background: #fafafa;
    }

    .chat-msg {
      max-width: 84%;
      padding: 9px 13px;
      border-radius: 14px;
      font-size: 0.85rem;
      line-height: 1.5;
      word-break: break-word;
    }

    .chat-msg.bot {
      background: #fff;
      color: #1f2937;
      border-bottom-left-radius: 4px;
      align-self: flex-start;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    }

    .chat-msg.user {
      background: linear-gradient(135deg, #f97316, #ef4444);
      color: #fff;
      border-bottom-right-radius: 4px;
      align-self: flex-end;
    }

    .chat-typing {
      display: flex;
      gap: 4px;
      align-items: center;
      padding: 10px 13px;
      background: #fff;
      border-radius: 14px;
      border-bottom-left-radius: 4px;
      align-self: flex-start;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
    }

    .chat-typing span {
      width: 7px;
      height: 7px;
      background: #d1d5db;
      border-radius: 50%;
      animation: chatBounce 1.2s infinite;
    }

    .chat-typing span:nth-child(2) {
      animation-delay: 0.2s;
    }

    .chat-typing span:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes chatBounce {

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

      30% {
        transform: translateY(-6px);
      }
    }

    #chat-input-wrap {
      display: flex;
      border-top: 1px solid #e5e7eb;
      padding: 10px;
      gap: 8px;
      flex-shrink: 0;
      background: #fff;
    }

    #chat-input {
      flex: 1;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 0.85rem;
      outline: none;
      resize: none;
      font-family: inherit;
      line-height: 1.4;
      max-height: 80px;
      background: #f9fafb;
      color: #111;
    }

    #chat-input:focus {
      border-color: #f97316;
      background: #fff;
    }

    #chat-send {
      background: linear-gradient(135deg, #f97316, #ef4444);
      color: #fff;
      border: none;
      border-radius: 10px;
      width: 38px;
      height: 38px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: opacity 0.2s;
      align-self: flex-end;
    }

    #chat-send:hover {
      opacity: 0.85;
    }

    #chat-send:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    /* Responsive Chat Bubble */
    @media (max-width: 480px) {
      #chat-widget {
        bottom: 16px;
        right: 16px;
      }

      #chat-toggle {
        width: 50px;
        height: 50px;
      }

      #chat-window {
        width: calc(100vw - 32px);
        right: 0;
        bottom: 64px;
        max-height: min(400px, calc(100vh - 90px));
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
      }
    }