class GraduationCard extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
          max-width: 800px;
          margin: 0 auto;
          text-align: center;
          padding: 2rem;
          position: relative;
        }
        
        .student-title {
          font-family: 'Playfair Display', serif;
          font-size: 2rem;
          color: white;
          margin-bottom: 1.5rem;
          text-transform: uppercase;
          letter-spacing: 3px;
        }
        .photo-frame {
          width: 280px;
          height: 280px;
          margin: 0 auto 2rem;
          border: 3px solid white;
          border-radius: 10px;
          padding: 15px;
          position: relative;
          box-shadow: 0 0 30px rgba(0, 85, 164, 0.6);
          background: rgba(255, 255, 255, 0.1);
          transition: all 0.5s ease;
          animation: float 6s ease-in-out infinite;
        }
.photo-frame:hover {
          box-shadow: 0 0 35px rgba(0, 102, 51, 0.7);
        }
        .photo-frame::before {
          content: '';
          position: absolute;
          top: -10px;
          left: -10px;
          right: -10px;
          bottom: -10px;
          border: 2px solid #0055A4;
          border-radius: 15px;
          pointer-events: none;
          animation: pulse 3s infinite alternate;
          filter: drop-shadow(0 0 10px rgba(0, 102, 51, 0.7));
        }
        @keyframes pulse {
          0%, 100% { 
            border-color: #0055A4;
            box-shadow: 0 0 20px rgba(0, 85, 164, 0.8);
          }
          50% { 
            border-color: #006633;
            box-shadow: 0 0 35px rgba(0, 102, 51, 0.8);
          }
        }

        @keyframes float {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-15px); }
        }
.student-photo {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 3px;
        }
        .student-name {
          font-family: 'Montserrat', sans-serif;
          font-size: 2.8rem;
          color: white;
          margin-bottom: 0.5rem;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 2px;
          text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
          background: linear-gradient(to right, #0055A4, #FFFFFF, #006633);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          transition: all 0.5s ease;
        }
.degree {
          font-family: 'Montserrat', sans-serif;
          font-size: 1.2rem;
          color: #FFD700;
          margin-bottom: 0.5rem;
          font-weight: 300;
        }
        .major {
          font-family: 'Montserrat', sans-serif;
          font-size: 1.8rem;
          color: white;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 2px;
          border-top: 2px solid rgba(255, 255, 255, 0.3);
          padding-top: 1rem;
          display: inline-block;
          text-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
          position: relative;
        }

        .major::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(to right, #0055A4, #FFFFFF, #006633);
          transform: scaleX(0);
          transition: transform 0.3s ease;
        }

        .major:hover::after {
          transform: scaleX(1);
        }
@media (max-width: 768px) {
          .student-title {
            font-size: 1.5rem;
          }
          
          .photo-frame {
            width: 200px;
            height: 200px;
          }
          
          .student-name {
            font-size: 2rem;
          }
          
          .major {
            font-size: 1.2rem;
          }
        }
      </style>
      
      <div class="student-title">Estudiante</div>
      <div class="photo-frame">
        <img class="student-photo" src="http://static.photos/people/300x300/1" alt="Foto del estudiante">
      </div>
      <div class="student-name">Nombre del Estudiante</div>
      <div class="degree">Técnico Medio</div>
      <div class="major">Gastronomía</div>
    `;
  }
}

customElements.define('graduation-card', GraduationCard);