:root {
     --primary-dark: #0a122a;
     --primary-light: #1d3461;
     --accent-gold: #d4af37;
     --accent-blue: #6290c8;
     --text-light: #f7f9fc;
     --text-gray: #b8b8b8;
     --bg-stone: #2a2a2a;
     --bg-card: #1a1a1a;
     --card-border: #3a3a3a;
     --shadow-dark: 0 4px 20px rgba(0, 0, 0, 0.5);
     --shadow-light: 0 2px 10px rgba(212, 175, 55, 0.3);
     --transition: all 0.3s ease;
 }

 /* Estructura base similar a runas nórdicas */
 .main-container {
     background-color: #0a122a;
     color: #f7f9fc;
     font-family: 'Roboto', sans-serif;
     line-height: 1.6;
     background-image: url('../https://albertmaster.com/assets/img/black-paper.png');
     min-height: 100vh;
     padding: 0;
     overflow-x: hidden;
 }

 .container {
     width: 100%;
     margin: 0 auto;
     padding: 20px;
 }

 /* Header estilo premium */
 .header-title {
     text-align: center;
     padding: 40px 20px;
     position: relative;
     overflow: hidden;
 }

 .header-title::before {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 100%;
     background: linear-gradient(135deg, rgba(10, 18, 42, 0.9) 0%, rgba(29, 52, 97, 0.7) 100%);
     z-index: -1;
 }

 h1, h2, h3 {
     font-family: 'Cinzel', serif;
     font-weight: 700;
     letter-spacing: 1px;
 }

 h1 {
     font-size: 2.8rem;
     margin-bottom: 15px;
     color: var(--accent-gold);
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
     position: relative;
     display: inline-block;
 }

 h1::after {
     content: "";
     display: block;
     width: 100px;
     height: 3px;
     background: var(--accent-gold);
     margin: 10px auto;
 }

 /* Contenido principal - Adaptado de runas */
 .main-content {
     display: grid;
     grid-template-columns: 1fr;
     gap: 40px;
     margin-bottom: 40px;
 }

 .tarot-reader {
     background: rgba(26, 26, 26, 0.8);
     border-radius: 15px;
     box-shadow: var(--shadow-dark);
     padding: 30px;
     border: 1px solid var(--card-border);
     backdrop-filter: blur(5px);
 }

 /* Opciones de tirada - Mejorado */
 .reading-options {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-bottom: 30px;
     flex-wrap: wrap;
 }

 .reading-btn {
     background: var(--primary-light);
     color: var(--text-light);
     border: none;
     padding: 12px 25px;
     border-radius: 8px;
     cursor: pointer;
     font-family: 'Cinzel', serif;
     font-size: 1rem;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     border: 1px solid var(--accent-blue);
 }

 .reading-btn:hover {
     background: var(--accent-blue);
     transform: translateY(-3px);
     box-shadow: var(--shadow-light);
 }

 .reading-btn.active {
     background: var(--accent-gold);
     color: var(--primary-dark);
     font-weight: bold;
 }

 /* Contenedor de cartas - Adaptado responsive */
 .cards-container {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
     margin: 40px 0;
     min-height: 200px;
 }

 .tarot-card {
     width: 120px;
     height: 200px;
    
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: var(--transition);
     position: relative;
     overflow: hidden;
     border: 1px solid var(--card-border);
     box-shadow: var(--shadow-dark);
     perspective: 1000px;

     background: repeating-linear-gradient( 45deg, #2a1d0f, #2a1d0f 10px, #3c2a14 10px, #3c2a14 20px );
     border: 2px solid var(--accent-gold);
 }

 .tarot-card:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-light);
     border-color: var(--accent-blue);
 }
   

 .tarot-card.revealed {
     background: linear-gradient(135deg, var(--bg-card) 0%, var(--primary-light) 100%);
     border-color: var(--accent-gold);
 }

 /* Animación de volteo */
 .tarot-card.flipped {
     transform: rotateY(180deg);
 }

 .card-front, .card-back {
     position: absolute;
     width: 100%;
     height: 100%;
     backface-visibility: hidden;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
     padding-bottom: 15px;
 }

 .card-back {
     background: repeating-linear-gradient(
         45deg,
         #2a1d0f,
         #2a1d0f 10px,
         #3c2a14 10px,
         #3c2a14 20px
     );
     transform: rotateY(180deg);
     justify-content: center;
 }

 .card-back::before {
     content: "🔮";
     font-size: 2rem;
     color: rgba(212, 175, 55, 0.5);
 }





 

 /* Resultados e interpretación */
 .reading-result {
     background: rgba(10, 18, 42, 0.7);
     border-radius: 10px;
     padding: 25px;
     margin-top: 30px;
     border-left: 4px solid var(--accent-gold);
     display: none;
 }

 .reading-result.active {
     display: block;
     animation: fadeIn 0.5s ease;
 }

 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }

 /* Botones de acción */
 .action-buttons {
     display: flex;
     justify-content: center;
     gap: 15px;
     margin-top: 30px;
     flex-wrap: wrap;
 }

 .action-btn {
     background: transparent;
     color: var(--text-light);
     border: 1px solid var(--accent-blue);
     padding: 12px 25px;
     border-radius: 8px;
     cursor: pointer;
     font-family: 'Roboto', sans-serif;
     font-size: 1rem;
     transition: var(--transition);
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .action-btn:hover {
     background: var(--accent-blue);
     transform: translateY(-3px);
     box-shadow: var(--shadow-light);
 }

 /* Diccionario de cartas */
 .tarot-dictionary {
     background: rgba(26, 26, 26, 0.8);
     border-radius: 15px;
     box-shadow: var(--shadow-dark);
     padding: 30px;
     margin-top: 40px;
     border: 1px solid var(--card-border);
 }

 .dictionary-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
     gap: 20px;
     margin-top: 30px;
 }

 /* Responsive mejorado */
 @media (max-width: 768px) {
     h1 {
         font-size: 2.2rem;
     }
     
     .reading-options {
         flex-direction: column;
         align-items: center;
     }
     
     .reading-btn {
         width: 100%;
         max-width: 250px;
     }
     
     .tarot-card {
         width: 100px;
         height: 160px;
     }
     
     .action-buttons {
         flex-direction: column;
         align-items: center;
     }
     
     .action-btn {
         width: 100%;
         max-width: 250px;
         justify-content: center;
     }
 }

 /* Efectos especiales */
 .glow {
     animation: glow 2s infinite;
 }

 @keyframes glow {
     0% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }
     50% { box-shadow: 0 0 20px rgba(212, 175, 55, 0.8); }
     100% { box-shadow: 0 0 5px rgba(212, 175, 55, 0.5); }
 }

 .fall-animation {
     animation: fall 0.8s ease-out forwards;
 }

 @keyframes fall {
     0% { transform: translateY(-100px) rotate(0deg); opacity: 0; }
     100% { transform: translateY(0) rotate(360deg); opacity: 1; }
 }
 
 /* Nuevos estilos para el panel de cortar el mazo */
 .cutting-panel {
     background: rgba(26, 22, 16, 0.8);
     border-radius: 15px;
     padding: 25px;
     margin: 20px 0;
     text-align: center;
     display: none;
     border: 1px solid var(--accent-gold);
     box-shadow: var(--shadow-dark);
 }

 .cutting-controls {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 15px;
     margin-bottom: 20px;
 }

 .cutting-controls label {
     font-size: 1.1rem;
     color: var(--accent-gold);
     font-family: 'Cinzel', serif;
 }

 .cutting-controls input {
     padding: 10px 15px;
     width: 100px;
     border-radius: 8px;
     border: 1px solid var(--accent-gold);
     background: rgba(20, 15, 10, 0.8);
     color: white;
     text-align: center;
     font-size: 1.2rem;
     font-family: 'Roboto', sans-serif;
 }

 .cutting-controls button {
     padding: 12px 25px;
     background: linear-gradient(to right, var(--primary-light), var(--accent-blue));
     color: white;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     font-family: 'Roboto', sans-serif;
     font-size: 1.1rem;
     transition: var(--transition);
 }

 .cutting-controls button:hover {
     background: linear-gradient(to right, var(--accent-blue), #4361ee);
     transform: translateY(-3px);
     box-shadow: var(--shadow-light);
 }

 .piles-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
     margin-top: 20px;
 }

 .pile {
     width: 120px;
     height: 180px;
     background: repeating-linear-gradient(
         45deg,
         #2a1d0f,
         #2a1d0f 10px,
         #3c2a14 10px,
         #3c2a14 20px
     );
     border: 2px solid var(--accent-gold);
     border-radius: 12px;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     color: rgba(212, 175, 55, 0.7);
     transition: var(--transition);
 }

 .pile:hover {
     transform: translateY(-10px);
     box-shadow: var(--shadow-light);
     border-color: var(--accent-blue);
 }

 /* Spinner para carga */
 .spinner {
     display: none;
     width: 40px;
     height: 40px;
     margin: 20px auto;
     border: 4px solid rgba(212, 175, 55, 0.3);
     border-radius: 50%;
     border-top: 4px solid var(--accent-gold);
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
 }

 /* Ajustes responsive para el panel de corte */
 @media (max-width: 768px) {
     .cutting-panel {
         padding: 15px;
     }
     
     .pile {
         width: 100px;
         height: 150px;
     }
 }
 .card-name{
     background-color:black;
     padding: 2px;
     text-align: center;
     border: 1px solid #d4af37;
     width: 100%;
     bottom: 0;
     font-size: x-small;
 }


 /* Agregar esto en tu sección de estilos CSS */
 .modal {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     z-index: 1000;
     align-items: center;
     justify-content: center;
     backdrop-filter: blur(5px);
     animation: fadeIn 0.3s ease;
 }

 .modal-content {
     background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
     border-radius: 15px;
     padding: 30px;
     max-width: 500px;
     width: 90%;
     max-height: 90vh;
     overflow-y: auto;
     border: 2px solid var(--accent-gold);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.4);
     position: relative;
     animation: slideUp 0.4s ease;
 }

 .close-modal {
     position: absolute;
     top: 15px;
     right: 15px;
     font-size: 1.8rem;
     color: var(--text-gray);
     cursor: pointer;
     transition: var(--transition);
     background: rgba(0, 0, 0, 0.3);
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     border: 1px solid var(--accent-gold);
 }

 .close-modal:hover {
     color: var(--accent-gold);
     transform: rotate(90deg);
 }

 .modal h2 {
     color: var(--accent-gold);
     font-family: 'Cinzel', serif;
     text-align: center;
     margin-bottom: 20px;
     padding-bottom: 10px;
     border-bottom: 1px solid rgba(212, 175, 55, 0.3);
 }

 .modal-img-container {
     text-align: center;
     margin: 20px 0;
     position: relative;
 }

 .modal-img-container img {
     max-width: 200px;
     border-radius: 10px;
     border: 3px solid var(--accent-gold);
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
     transition: var(--transition);
 }

 .modal-img-container.reversed img {
     transform: rotate(180deg);
     filter: hue-rotate(180deg);
 }

 .modal-section {
     margin-bottom: 20px;
     background: rgba(10, 18, 42, 0.5);
     padding: 15px;
     border-radius: 8px;
     border-left: 3px solid var(--accent-gold);
 }

 .modal-section h3 {
     color: var(--accent-blue);
     font-family: 'Cinzel', serif;
     margin-top: 0;
     margin-bottom: 10px;
     display: flex;
     align-items: center;
 }

 .modal-section h3 i {
     margin-right: 10px;
     color: var(--accent-gold);
 }

 .modal-section p {
     margin: 0;
     line-height: 1.6;
 }

 .keywords {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin-top: 10px;
 }

 .keyword {
     background: rgba(212, 175, 55, 0.1);
     color: var(--accent-gold);
     padding: 5px 10px;
     border-radius: 20px;
     font-size: 0.8rem;
     border: 1px solid rgba(212, 175, 55, 0.3);
 }

 /* Animaciones */
 @keyframes fadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
 }

 @keyframes slideUp {
     from { 
         opacity: 0;
         transform: translateY(50px);
     }
     to { 
         opacity: 1;
         transform: translateY(0);
     }
 }


 /* Alertas personalizadas */
 .custom-alert {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.7);
     z-index: 1100;
     align-items: center;
     justify-content: center;
     animation: fadeIn 0.3s ease;
 }

 .custom-alert-content {
     background: linear-gradient(135deg, #0a122a 0%, #1d3461 100%);
     border-radius: 15px;
     padding: 30px;
     max-width: 400px;
     width: 90%;
     text-align: center;
     border: 2px solid var(--accent-gold);
     box-shadow: var(--shadow-dark);
     animation: slideUp 0.3s ease;
     color:white;
 }

 .custom-alert h3 {
     color: var(--accent-gold);
     font-family: 'Cinzel', serif;
     margin-top: 0;
     margin-bottom: 20px;
     font-size: 1.5rem;
 }

 .custom-alert p {
     margin-bottom: 25px;
     line-height: 1.6;
 }

 .custom-alert-btn {
     background: linear-gradient(to right, var(--primary-light), var(--accent-blue));
     color: white;
     border: none;
     padding: 12px 25px;
     border-radius: 50px;
     cursor: pointer;
     font-family: 'Roboto', sans-serif;
     font-size: 1rem;
     transition: var(--transition);
     margin: 0 10px;
 }

 .custom-alert-btn:hover {
     background: linear-gradient(to right, var(--accent-blue), #4361ee);
     transform: translateY(-3px);
     box-shadow: var(--shadow-light);
 }

 .custom-alert-btn i {
     margin-right: 8px;
 }


 .dict-card {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 15px;
     position: relative;
 }

 .dict-card-image {
     width: 60px;
     height: 90px;
     background-size: cover;
     background-position: center;
     border-radius: 8px;
     border: 1px solid var(--accent-gold);
     box-shadow: var(--shadow-light);
 }

 .dict-card-symbol {
     font-size: 1.8rem;
     font-family: 'Cinzel', serif;
     color: var(--accent-gold);
     min-width: 40px;
     text-align: center;
 }

 .dict-card-name {
     font-family: 'Cinzel', serif;
     font-size: 1.2rem;
     color: var(--accent-gold);
     flex-grow: 1;
 }

  /* ===== ARTICLE SPECIFIC STYLES - NO BODY STYLES ===== */
  #tarot-ultimate-guide {
      max-width: 1280px;
      margin: 0 auto;
      padding: 2rem 1.5rem 3rem 1.5rem;
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      color: #fff;
    }

    /* Hero Section */
    .tarot-guide-hero {
      text-align: center;
      margin-bottom: 2.5rem;
      padding: 2rem 1.5rem;
      background: linear-gradient(135deg, #0a122a 0%, #1d3461 100%);
      border-radius: 32px;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .tarot-guide-hero h2 {
      font-size: 2.6rem;
      font-weight: 800;
      background: linear-gradient(135deg, #d4af37, #f5d742);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      margin-bottom: 1rem;
      letter-spacing: -0.02em;
      font-family: 'Cinzel', serif;
    }

    .tarot-guide-hero .tarot-hero-sub {
      font-size: 1.2rem;
      color: #cbd5e1;
      max-width: 720px;
      margin: 0 auto;
      line-height: 1.5;
    }

    .tarot-guide-meta {
      display: flex;
      justify-content: center;
      gap: 2rem;
      color: #d4af37;
      font-weight: 500;
      margin-top: 1.2rem;
      flex-wrap: wrap;
    }

    .tarot-guide-meta span i {
      margin-right: 0.5rem;
      color: #d4af37;
    }

    /* Grid Layout */
    .tarot-guide-grid {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 2rem;
    }

    /* Main Content */
    .tarot-main-content {
      background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(10, 18, 42, 0.95));
      border-radius: 28px;
      padding: 2rem 2rem 2.5rem 2rem;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(212, 175, 55, 0.2);
    }

    .tarot-main-content h2 {
      font-size: 1.8rem;
      font-weight: 700;
      margin-top: 2rem;
      margin-bottom: 1rem;
      color: #d4af37;
      border-left: 5px solid #d4af37;
      padding-left: 1rem;
      font-family: 'Cinzel', serif;
    }

    .tarot-main-content h2:first-of-type {
      margin-top: 0;
    }

    .tarot-main-content h3 {
      font-size: 1.35rem;
      font-weight: 600;
      margin: 1.5rem 0 0.75rem 0;
      color: #f5d742;
    }

    .tarot-main-content p {
      font-size: 1.05rem;
      color: #e2e8f0;
      margin-bottom: 1.2rem;
      line-height: 1.6;
    }

    .tarot-main-content ul, .tarot-main-content ol {
      margin: 1rem 0 1.2rem 1.8rem;
      color: #e2e8f0;
      line-height: 1.6;
    }

    .tarot-main-content li {
      margin-bottom: 0.5rem;
    }

    .tarot-highlight-box {
      background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.05));
      border-left: 6px solid #d4af37;
      padding: 1.25rem 1.5rem;
      border-radius: 20px;
      margin: 1.75rem 0;
    }

    .tarot-pro-tip {
      background: rgba(212, 175, 55, 0.1);
      border-radius: 20px;
      padding: 1.2rem 1.5rem;
      margin: 1.5rem 0;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
      border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .tarot-pro-tip i {
      font-size: 1.8rem;
      color: #d4af37;
    }

    .tarot-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1.2rem;
      margin: 2rem 0;
    }

    .tarot-stat-card {
      background: rgba(0, 0, 0, 0.4);
      border-radius: 20px;
      padding: 1.2rem;
      text-align: center;
      transition: all 0.2s;
      border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .tarot-stat-card .stat-number {
      font-size: 2rem;
      font-weight: 800;
      color: #d4af37;
      margin-bottom: 0.25rem;
    }

    .tarot-quote-block {
      background: rgba(212, 175, 55, 0.1);
      padding: 1.5rem;
      border-radius: 24px;
      text-align: center;
      font-style: italic;
      margin: 1.5rem 0;
      border: 1px solid rgba(212, 175, 55, 0.3);
    }

    .tarot-quote-block i {
      font-size: 2rem;
      color: #d4af37;
      margin-bottom: 0.5rem;
      display: inline-block;
    }

    .tarot-table-wrapper {
      overflow-x: auto;
      margin: 1.5rem 0;
    }

    .tarot-cards-table {
      width: 100%;
      border-collapse: collapse;
      background: rgba(0, 0, 0, 0.3);
      border-radius: 16px;
      overflow: hidden;
    }

    .tarot-cards-table th, .tarot-cards-table td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    }

    .tarot-cards-table th {
      background: rgba(212, 175, 55, 0.2);
      font-weight: 600;
      color: #d4af37;
    }

    .tarot-cards-table tr:hover {
      background: rgba(212, 175, 55, 0.1);
    }

    /* Sidebar */
    .tarot-sidebar-section {
      align-self: start;
    }

    .tarot-side-card {
      background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(10, 18, 42, 0.95));
      border-radius: 24px;
      padding: 1.5rem;
      margin-bottom: 1.8rem;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      border: 1px solid rgba(212, 175, 55, 0.2);
    }

    .tarot-side-card h4 {
      font-size: 1.35rem;
      font-weight: 700;
      margin-bottom: 1rem;
      border-bottom: 3px solid #d4af37;
      padding-bottom: 0.6rem;
      color: #d4af37;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Cinzel', serif;
    }

    .tarot-checklist, .tarot-resource-list {
      list-style: none;
      padding: 0;
    }

    .tarot-checklist li, .tarot-resource-list li {
      margin-bottom: 0.85rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
      color: #e2e8f0;
    }

    .tarot-checklist i, .tarot-resource-list i {
      color: #d4af37;
      width: 1.5rem;
      font-size: 1rem;
    }

    .tarot-tool-link {
      display: inline-block;
      background: linear-gradient(95deg, #d4af37, #f5d742);
      color: #0a122a;
      text-decoration: none;
      font-weight: 700;
      padding: 0.8rem 1.2rem;
      border-radius: 40px;
      width: 100%;
      text-align: center;
      margin-top: 1rem;
      transition: transform 0.2s, box-shadow 0.2s;
      border: none;
      cursor: pointer;
      font-size: 0.95rem;
      font-family: 'Cinzel', serif;
    }

    .tarot-tool-link:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(212, 175, 55, 0.5);
    }

    .tarot-share-buttons {
      display: flex;
      gap: 0.8rem;
      justify-content: center;
      margin-top: 1.2rem;
    }

    .tarot-share-btn {
      background: rgba(255, 255, 255, 0.1);
      padding: 0.5rem 1rem;
      border-radius: 40px;
      font-size: 0.85rem;
      font-weight: 500;
      text-decoration: none;
      color: #e2e8f0;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
    }

    .tarot-share-btn:hover {
      background: rgba(212, 175, 55, 0.5);
    }

    .tarot-footer-note {
      margin-top: 2.5rem;
      text-align: center;
      font-size: 0.85rem;
      color: #b8b8b8;
      border-top: 1px solid rgba(212, 175, 55, 0.3);
      padding-top: 2rem;
    }

    @media (max-width: 880px) {
      .tarot-guide-grid {
        grid-template-columns: 1fr;
      }
      .tarot-guide-hero h2 {
        font-size: 2rem;
      }
      .tarot-main-content {
        padding: 1.5rem;
      }
      #tarot-ultimate-guide {
        padding: 1rem;
      }
    }