/* Variables CSS para colores y dimensiones */
    :root {
      --color-primary:  #1a5e63; /* Verde azulado oscuro */
      --color-secondary: #d4af37; /* Dorado */
      --color-accent: #8d6e63; /* Marrón terroso */
      --color-light: #f5f5f5; /* Blanco casi puro */
      --color-dark: #333; /* Gris muy oscuro */
      --color-background: #f8f8f8; /* Blanco grisáceo muy claro */
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
      --transition: all 0.3s ease; /* Transición suave */
      --color-amber-50: #fffbeb;
      --color-amber-600: #d4af37; /* #d97706; */
      --color-amber-700: #b45309;
      --color-white: #ffffff;
      --color-gray-600: #4b5563;
      --color-gray-700: #374151;
      --color-gray-900: #111827;
      --color-morado: #9370db;
      --color-gris: #72777d;
      --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
      --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    }

    /* Estilos base */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: linear-gradient(to bottom, var(--color-amber-50), var(--color-white));
      color: var(--color-gray-900);
      min-height: 100vh;
      line-height: 1.5;
    }

    /* Estilos de contenedores */
    .container {
      max-width: 72rem; /* 1152px aprox */
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .palabra-container {
      max-width: 172rem; /* 1152px aprox */
      margin: 0 auto;
      padding: 0 1.5rem;
    }


    .section-padding {
      padding: 3rem 0;
    }

    /* Header */
    .header {
      padding: 1.5rem 0;
    }

    .header-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .arabic-letter {
     font-family: 'Aref Ruqaa', serif;
      width: 4rem;
      height:4rem;
      border-radius: 50%;
      background-color: var(--color-primary);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 2rem;
      text-decoration: none;

    }

    .arabic-letter1 {
     font-family: 'Aref Ruqaa Ink', serif;
/*      font-family: 'Noto Nastaliq Urdu', serif;*/
      width: 4rem;
      height:4rem;
      border-radius: 50%;
      background-color: var(--color-secondary);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: 1.5rem;
      text-decoration: none;

    }

   .spanish-letter1 {
      font-family: 'Aref Ruqaa Ink', serif;  
/*    font-family: 'Noto Nastaliq Urdu', serif;*/
      width: 4rem;
      height:4rem;
      border-radius: 50%;
      background-color: var(--color-primary);
      color: var(--color-white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      font-size: .50rem;
      text-decoration: none;

    }



    .logo {
      height: 3rem;
    }

    .title-container h1 {
      font-size: 1.5rem;
      font-weight: 800;
      margin-bottom: 0.25rem;
    }
   .title-container-ar h1 {
      font-size: 1.5rem;
      font-family: 'Aref Ruqaa', serif;
      font-weight: 800;
      margin-bottom: 0.25rem;
    }

    .title-container p {
      font-size: 0.875rem;
      color: var(--color-gray-600);
    }

   .title-container p-ar {
      font-size: 0.875rem;
      color: var(--color-gray-600);
    }


    .nav-menu {
      display: none;
      gap: 1rem;
      font-size: 0.875rem;
    }

    .nav-menu a {
      text-decoration: none;
      color: inherit;
    }

    .nav-menu a:hover {
      text-decoration: underline;
    }

    /* Hero section */
    .hero {
      display: grid;
      gap: 2rem;
      align-items: center;
      padding: 3rem 0;
    }

    .hero-content h2 {
      font-size: 2.25rem;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 1rem;
    }

    .hero-content p {
      color: var(--color-gray-700);
      margin-bottom: 1.5rem;
    }

    .hero-buttons {
      display: flex;
      gap: 0.75rem;
    }

    .btn-primary {
      background-color: var(--color-amber-600);
      color: var(--color-white);
      padding: 0.75rem 1.25rem;
      border-radius: 0.5rem;
      text-decoration: none;
      font-weight: 500;
      box-shadow: var(--shadow-md);
      transition: background-color 0.2s;
    }

  .btn-ext {
      background-color: var(--color-morado);
      color: var(--color-white);
      padding: 0.75rem 1.25rem;
      border-radius: 0.5rem;
      text-decoration: none;
      font-weight: 500;
      box-shadow: var(--shadow-md);
      transition: background-color 0.2s;
    }

 .btn-ord {
      background-color: var(--color-gray-700);
      color: var(--color-white);
      padding: 0.75rem 1.25rem;
      border-radius: 0.5rem;
      text-decoration: none;
      font-weight: 500;
      box-shadow: var(--shadow-md);
      transition: background-color 0.2s;
    }



    .btn-primary:hover {
      background-color: var(--color-amber-700);
    }

    .btn-secondary {
      border: 1px solid var(--color-amber-600);
      color: var(--color-amber-600);
      padding: 0.75rem 1.25rem;
      border-radius: 0.5rem;
      text-decoration: none;
      font-weight: 500;
      transition: background-color 0.2s;
    }

    .btn-secondary:hover {
      background-color: var(--color-amber-50);
    }

.glass-card-ar {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(6px);
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-md);
      text-align: right;
    }

.glass-card-es {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(6px);
      border-radius: .75rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-md);
      text-align: left;
    }

    .glass-card p:first-child {
      font-size: 0.875rem;
      color: var(--color-gray-600);
      margin-bottom: 0.5rem;
    }

    .example-box {
      background-color: var(--color-white);
      border-radius: 0.5rem;
      padding: 1rem;
      margin-top: 0.5rem;
    }

    .example-box p:first-child {
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .example-box p:nth-child(2) {
      color: var(--color-gray-700);
      margin-bottom: 0.75rem;
    }

    .example-box p:last-child {
      font-size: 0.875rem;
      color: var(--color-gray-600);
    }

    /* Features grid */
    .features-grid {
      display: grid;
      gap: 1.5rem;
      margin-top: 2rem;
    }

    .feature-card {
      background-color: var(--color-white);
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-md);
      transition: box-shadow 0.3s;
    }

    .feature-card:hover {
      box-shadow: var(--shadow-lg);
    }

    .feature-icon {
      font-size: 1.875rem;
      font-family: 'Lateef', serif;
      margin-bottom: 0.75rem;
    }

    .feature-card h3 {
      font-size: 1.125rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .feature-card p {
      font-size: 0.875rem;
      color: var(--color-gray-600);
      margin-bottom: 1rem;
    }

 .anuncio-card {
      background-color: azure; /*var(--color-white);*/
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-md);
      transition: box-shadow 0.3s;
    }

.palabradeldia-card {
      background-color: azure; /*var(--color-white);*/
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-md);
      transition: box-shadow 0.3s;
    }


.arabe-card {
      background-color: #d1e9d2 ; /*var(--color-primary);*/
      border-radius: 0.75rem;
      padding: 1.5rem;
      box-shadow: var(--shadow-md);
      transition: box-shadow 0.3s;
    }


    .feature-link {
/*      color: var(--color-amber-600);*/
      background-color: var(--color-secondary);
      font-weight: 500;
      text-decoration: none;
    }

    .feature-link:hover {
      text-decoration: underline;
    }

    /* About section */
    .about-section {
      background-color: var(--color-amber-50);
      border-radius: 0.75rem;
      padding: 1.5rem;
      margin-top: 3rem;
    }

    .about-section h3 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .about-section p {
      color: var(--color-gray-700);
    }

    /* Contact section */
    .contact-section {
      margin-top: 2rem;
    }

    .contact-section h3 {
      font-size: 1.125rem;
      font-weight: 600;
    }

    /* Footer */
    .footer {
      background-color: var(--color-white);
      box-shadow: var(--shadow-inner);
      padding: 1.5rem 0;
      margin-top: 3rem;
    }

    .footer-content {
      font-size: 0.875rem;
      color: var(--color-gray-600);
    }

    /* Responsive design */
    @media (min-width: 640px) {
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (min-width: 768px) {
      .nav-menu {
        display: flex;
      }
      
      .hero {
        grid-template-columns: repeat(2, 1fr);
      }
      
      .hero-content h2 {
        font-size: 3rem;
      }
    }

    @media (min-width: 1024px) {
      .features-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

/*class="font-amiri arab-script font-bold text-[#B5651D]">حان قطوف الثمار */
.texto-arabe0 {
  font-family: 'Amiri', serif;
  color: #B5651D;
  font-weight: bold;
  direction: rtl;
  text-align: right;
  text-align-last: right;
  line-height: 1;
  font-size: 1.1em;
  font-size: 2rem;
}



.texto-arabe1 {
  font-family: 'Aref Ruqaa Ink', serif;
  direction: rtl;
  text-align: right;
  text-align-last: right;
  line-height: 1;
  /* font-size: 1.1em; */
  font-size: 3rem;
}

.texto-arabe {
  /*font-family: 'Aref Ruqaa', serif;*/
  direction: rtl;
  text-align: right;
  text-align-last: right;
  line-height: 1.8;
  font-size: 2.9rem; 
  font-size: 1.1rem;

}

.texto-arabe-izq {
  font-family: 'Aref Ruqaa Ink', serif;
  direction: rtl;
  text-align: left;
  text-align-last: left;
  line-height: 1.8;
  font-size: 2.3rem;

}
.texto-arabe-dch {
  /*font-family: 'Aref Ruqaa Ink', serif;*/
  direction: rtl;
  text-align: right;
  text-align-last: right;
  line-height: 1.8;
  font-size: 1.1rem;

}


.enlace-sin {
  text-decoration: none;
}

.texto-español {
  direction: ltr;
  text-align: left;
  text-align-last: left;
  line-height: 1;
  font-size: 1rem;

}


.fondo-menu-alqutuf0 {
    background: #d4af37 url('https://alqutuf.es/images/alqutuf_logo_letters_banner.svg') no-repeat center center;
    background-size: cover;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.fondo-menu-alqutuf {
    background: #d4af37 url('https://alqutuf.es/images/alqutuf_logo_letters_banner.svg') no-repeat center center;
    background-size: cover;
    width: 100%;
    padding: 0.75rem 1.25rem;
    box-sizing: border-box;
    color: var(--color-white);
    border-radius: 0.5rem;
    text-decoration: none;
    font-weight: 500;
    box-shadow: var(--shadow-md);
    transition: background-color 0.2s;
}

.contenido-principal {
  display: flex;
  width: 100%;
  height: 100vh; /* Ocupa toda la altura de la pantalla */
}

.contenido-info {
  flex: 2; /* Ocupa 2/3 */
  padding: 10px;
  background-color: #f5f5f5;
}

.contenido-ayuda {
  flex: 1; /* Ocupa 1/3 */
  padding: 10px;
  background-color: #e8f4fd;
  border-left: 2px solid #007bff;
}