/* ==========================================================
   portada.css — Primera sección del sitio
   Texto a la izquierda e ícono trazado a la derecha.
   ========================================================== */

   .portada {
    display: flex;
    align-items: center;
    min-height: calc(100svh - var(--alto-encabezado));
    padding-block: var(--espacio-8);
  }
  
  .portada__contenido {
    display: grid;
    gap: var(--espacio-6);
    align-items: center;
  }
  
  /* ----- Texto ----- */
  .portada__titulo {
    max-width: 14ch;
    margin-bottom: var(--espacio-3);
    font-size: var(--texto-2xl);
    font-weight: var(--peso-fuerte);
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  
  .portada__descripcion {
    max-width: 46ch;
    margin: 0 0 var(--espacio-4);
    font-size: var(--texto-lg);
    color: var(--color-texto-suave);
  }
  
  .portada__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
  }
  
  /* ----- Ilustración ----- */
  .portada__ilustracion {
    width: min(100%, 360px);
    justify-self: center;
  }
  
  .portada__ilustracion svg {
    width: 100%;
    height: auto;
  }
  
  /* Efecto de trazado: cada línea se dibuja de 0 a 100 % */
  .portada__trazo {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: trazar 1.6s ease-out forwards;
  }
  
  .portada__trazo--2 {
    animation-delay: 0.9s;
  }
  
  .portada__nodo {
    opacity: 0;
    animation: aparecer 0.4s ease-out 2.2s forwards;
  }
  
  @keyframes trazar {
    to {
      stroke-dashoffset: 0;
    }
  }
  
  @keyframes aparecer {
    to {
      opacity: 1;
    }
  }
  
  /* Si el usuario desactiva animaciones, se muestra el dibujo completo */
  @media (prefers-reduced-motion: reduce) {
    .portada__trazo {
      stroke-dashoffset: 0;
    }
  
    .portada__nodo {
      opacity: 1;
    }
  }
  
  /* ----- Escritorio ----- */
  @media (min-width: 900px) {
    .portada__contenido {
      grid-template-columns: 1.3fr 1fr;
    }
  
    .portada__ilustracion {
      width: 100%;
      max-width: 420px;
      justify-self: end;
    }
  }