/* ===== CSS Desgin ===== */
.fondo {
    background: linear-gradient(135deg, #f1fcff, #b2cde8);
}
.cuadro-texto {
    width: 800px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 20px 25px;
    margin-right: 50px;
    text-align: right; /* alinea el texto dentro del cuadro */
    border-left: 5px solid #4a90e2; /* toque de color elegante */
  }

  .texto p {
    color: #666;
    line-height: 1.6;
  }

/* ===== Barra menu ===== */
.site-header {
    background-color: var(--color-blanco);
    border-bottom: 1px solid #83a6bc;
    padding: 1.2rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    background-color: rgba(117, 163, 173, 0.998);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.site-header h1 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primario);
}

.site-header nav a {
    color: var(--color-texto);
    text-decoration: none;
    margin: 0 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-weight: 500;
    position: relative;
    transition: var(--transicion-suave);
}

.site-header nav a:hover {
    color: var(--color-acento);
    background-color: #b2cde8;
}

/* ===== Presentación ===== */
.tarjeta-presentacion {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100vh - 100px);
  background: linear-gradient(135deg, #f1fcff, #b2cde8);
  padding: 2rem;
}

.tarjeta-contenido {
  background-color: white;
  padding: 2rem 3rem;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-contenido:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}


.tarjeta-contenido h2C {
  color: #206991;
  font-size: 1.6rem;
  margin: 0.5rem 0;
}

.tarjeta-contenido p {
  color: #333;
  font-size: 1rem;
  margin: 0.3rem 0;
}



.boton-contacto:hover {
  background-color: #205b72;
}



/* ===== Diseño 3D ====== */
 h2 {
    background-color: rgb(32, 105, 145);
    color: white;
  }
  .Paso1 {
    width: 600px;
    height: 400px;
  }
  .Paso2 {
    width: 600px;
    height: 400px;
  }

  .Paso3 {
    width: 600px;
    height: 400px;
  }

  .Paso4 {
    width: 700px;
    height: 500px;
  }
  
  .Paso4add {
     width: 700px;
    height: 500px;
  }

  .Paso5 {
    width: 700px;
    height: 500px;
  }

  .Paso6 {
    width: 700px;
    height: 500px;
  }

  .Paso7 {
    width: 600px;
    height: 500px;
  }

  .Paso8 {
    width: 600px;
    height: 400px;
  }

  .Paso9 {
    width: 800px;
    height: 400px;
  }

  .Paso10 {
    width: 600px;
    height: 400px;
  }

  .Paso11 {
    width: 800px;
    height: 400px;
  }

  .Resultado {
    width: 600px;
    height: 400px;
  }

/* ===== Corte Laser ====== */
    .Paso1CL {
    width: 600px;
    height: 400px;
    }

    .Paso2CL {
    width: 300px;
    height: 400px;
    }

    .Paso2CLadd {
    width: 600px;
    height: 400px;
    }

    .Paso3CL {
    width: 600px;
    height: 400px;
    }

    .Paso4CL {
    width: 500px;
    height: 400px;
    }

    .Corte {
    width: 700px;
    height: 500px;
    }

    .Eq {
    width: 500px;
    height: 300px;
    }

    .ResCL {
    width: 400px;
    height: 450px;
    }

/* ===== PCB ===== */
    .Circuito {
    width: 800px;
    height: 450px;
    }

    .PCBmal {
    width: 800px;
    height: 450px;
    }

    .PCBbien {
    width: 800px;
    height: 450px;
    }

    .Soldar {
    width: 800px;
    height: 450px;
    }

    .Estanio {
    width: 800px;
    height: 450px;
    }

    .ResPCB {
    width: 800px;
    height: 450px;
    }